Frontend Mentor - REST Countries API with color theme switcher solution

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

The challenge

Users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Screenshot

Links

• Solution : solution URL here
• Live Site : live site URL here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Accessibility
• Responsive Design
• React - JS library
• React-Router - A multi-strategy router for React
• Rest-countries-API - a RESTful API that provides information about countries
• Tailwind - A utility-first CSS framework
• Motion - React animation library

What I learned

During the development of this project, I gained valuable experience, particularly how to work with react router which enabled me to create a single-page application (SPA) with a more fluid and interactive user experience. I also integrated a RESTful API to fetch and display country data. This presented a challenge later on when the API provider restricted the number of countries returned per request. However, I was able to overcome this by requesting only the necessary fields. Additionally, I implemented dark mode functionality for the first time, enhancing the user experience and accessibility.