Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
    • Light Mode
    • Dark Mode
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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 (optional)

Screenshots

Light Mode

Dark Mode

Links

• Solution URL: Github Repository
• Live Site URL: View Here

My process

For this project I used React for front-end functionality, CSS/HTML for styling, and Axios to fetch data. I started off with developing the front-end. For both the home and details page, I decided to create the individual components and style them first so that formatting the page afterwards becomes a simpler process.

For the REST Countries API, I used React's useState and useEffect hooks to fetch and store the data, and displayed them using JavaScript's map function. If a user goes to a country details page, the app gets more data for that specific country and displays it for the user.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Love

What I learned

Before this project, I mainly used UI libraries to get the job done for the front-end. However, I wanted to have a good grasp on HTML and CSS fundamentals, so I learned the concepts behind Flexbox, CSS Grid, and HTML5 semantics. I also learned how to implement dark mode!

Useful resources

• Flexbox Froggy - I had a hard time understanding flexbox until I completed this tutorial
• Grid Garden - Made by the same creators of Flexbox Froggy, they made it very easy to understand the concepts behind CSS Grids
• Easy Dark Mode - A tutorial on how to implement dark mode

Author

• Website - Sarah Kwon
• Frontend Mentor - @sarahkwon
• GitHub - @sarahkwon