All solutions

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS

🗒️ Basic Features

• Implemented validation functionality based on form requirements.
• Responsive layout implementation.

⚡ Additional Features

• Utilized useReducer for state management logic.
• Made all options accessible via keyboard (Tab).

※ For this challenge, I only met the minimum specifications of the design guide and made changes to suit what I wanted to implement.*

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• React Query
• TypeScript
• Styled-Components
• Framer Motion
• HTML5, CSS

🗒️ Core Features

• Browse all countries on the home screen
• Search for countries using an input field
• Filter countries by region
• Click on a country to view detailed information on the Nation Detail Page
• View and navigate to neighboring countries on the Nation Detail Page
• Responsive design implementation
• Visual feedback for all interactive elements on the page
• Implemented Light Mode and Dark Mode

⚡ Additional Features

• Custom Design
  • Created icons as components for easy reuse
  • Applied responsive design for a horizontally elongated card on mobile devices
  • Implemented Skeleton UI on Nation Card and Nation Detail Page
  • Used a custom function to intuitively shorten the population number on Nation Card
  • Applied fade-in-up effect when loading Nation Detail Page
  • Applied scrolling animation to display multiple country names for the respective country on the Nation Detail Page.
• Rendering Optimization with useDebounce Hook
  • Applied a custom hook to delay search application by 300ms after completion of search term input
• Load Entire Country Data Based on Scroll
  • Due to the absence of pagination in the REST Countries API, displayed data is split on the client side
  • Globalized search term, option selection information, and data slice count using ContextAPI
  • Ensured that the screen retains the same information (search term, option info, scroll position) even after going back from Nation Detail Page
• Country Lookup Feature Using Google Maps API
• Reset Button for Input/Option Initialization Functionality

‼️ To-Do Features

• Main Layout loads first when the page is initially loaded, causing inconsistency
• Tooltip display feature
• Analyze the color code of country images and display the corresponding color as the background

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Swiper JS

🗒️ Core Features

• Add/Remove items to/from the cart
• Switch main image when clicking on a small thumbnail
• Display a lightbox gallery when clicking on the main image
• Responsive layout

⚡ Additional Features

• User's order information is stored and managed in Context API.
• Implementation of a slider that works on both desktop and mobile environments
  • Slider layout changes for desktop, tablet, and smartphone.
• Ability to input order quantity via the keyboard, allowing up to 2 digits.
• Animation implemented using basic hooks without a separate animation library.
• Clicking on the backdrop automatically closes the cart, mobile menu, and lightbox gallery.

‼️ To-Do for Improvement

• When removing a Cart item, Navbar gets re-rendered due to an update in ProductContext, causing the CartBox to close.
• Faced difficulty in implementing unmount animation using basic hooks.

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Framer Motion

🗒️ Core Features

• Adding new to-do items
• Toggling completion status of existing to-dos
• Filtering to-dos
• Theme switching
• Drag and drop functionality
• Responsive web design

⚡ Additional Features

• When deleting a to-do, a toast is displayed with an "undo" option
  • If multiple items are deleted simultaneously with "Clear Complete," undoing will restore multiple items simultaneously
  • Undo is possible for previously deleted items while the toast timer is active
• Variable textarea style
  • Expands dynamically up to 4 lines, then becomes fixed at 4 lines and includes a custom scrollbar
• Keyboard considerations
  • Pressing Esc while editing a to-do exits the editing mode
  • Pressing Enter when adding a to-do immediately submits it
  • Pressing Shift + Enter when adding a to-do creates a line break
  • All elements can be accessed via the tab key
• Smooth theme switching
  • Transition of the background with a gradient does not work, so opacity transition of pseudo-elements is used to resolve it
  • The header image is handled in the same way

🚧 To-Do Features to Improve

• Issue with touch drag-and-drop not working on mobile devices.

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• Framer Motion
• HTML5, CSS

🗒️ Key Features

• Implemented features similar to the Windows default calculator.
  • Integer part is separated by commas, and decimal part is displayed without separation.
• Fully supports keyboard input.
  • 0~9: Number input
  • Enter: Display calculation result
  • Backspace: Backspace during number input, reset during result display
  • Esc: Reset
• User-selected theme is stored in local storage.
• After completion of calculation, the result can be copied to the clipboard by clicking.
  • Clipboard copy is not available during calculation or when there is no calculation result.
• When copying is completed, a toast appears providing feedback.

🔴 Things I Want to Know

• I'd like to know if there are any issues regarding accessibility.
• I feel that the current code for the Calculator Component is unnecessarily complex. In particular, the logic with if statements determining cases based on prevOperation, currentOperation, and operand states may be perceived as less readable to other developers. If you have any good tips on this matter, please share, and I would appreciate it.