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

• 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
    • Continued development
    • 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)

Screenshot

Links

• Solution URL: @github
• Live Site URL: @github pages

My process

After reading and analyzing the design spec, I focused on getting all the essentials working, like the API, routing, and parsing the JSON data. From there, I worked on file structure to make the components reusable and easier to maintain. And finally, there were several rounds of component coding, styling, and refactoring.

Built with

• REST Countries API
• React - JS library
• React Router
• Styled Components - For styles
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

This was a great React single page application to interface with the REST Countries API. While I have written several React applications from scrath, this was the first to use React Router and an API. This provided a great opportunity to manage the information from the API and to control the navigation between pages.

My knowledge of styled components grew to incorporated the ThemeProvider and createGlobalStyle modules. I initially struggled with trying to code the theme functionality and was very happy to switch to ThemeProvider. And this was the first project where I incorporated CSS grid with styled-components and was extremely pleased with results.

Continued development

I plan to continue building React single page applications to get more experience with hooks and styled components. I will continue to use and improve on the file structure adopted for this project, where the components are stored in their own folders with a subfolder for styles and the component is named index.js. And I will research the nature of state within React application to understand the best practices for managing state and how to handle browser refreshes.

Useful resources

• stackoverflow - This is a great resource on used CSS grid with styled components.
• Css-Tricks - This is an excellent resource on ThemeProvider and createGlobalStyle.

Author

• Frontend Mentor - @davidrhyne
• Twitter - @DavidRhyne16