Custom-designed Countries REST API

※ 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