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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

This is the first advanced Frontend Mentor challenge I've completed. The data is provided by Rest Countries API and I used the React library to render the data.

It was good practice of using React to display data from an external API and especicially so with the more subtle aspects, like the country border links.

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)

Screenshot

Homepage desktop and mobile views with light and dark mode

Country detail desktop and mobile views with light and dark mode

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: live site

My process

Built with

• Sass
• Mobile-first workflow
• React - JS library

What I learned

I'm pretty happy with the result, although at the time of submitting the project, there are some aspects of React-Router-Dom that I haven't figuted out.

Useful resources

World map favicon from favicon.io

The following packages were used:

• axios
• react-icons

Author

• Website - My project showcase
• Frontend Mentor - @michagodfrey
• Twitter - @Michael07865192