Frontend Mentor - REST Countries API with color theme switcher solution

This is my solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

Table of contents

• Frontend Mentor - REST Countries API with color theme switcher solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • React
    • SCSS
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

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: Link
• Live Site URL: Link

My process

React

• To implement the app I used the React.js library.
• React Router was used to create three routes: the home with all countries, the page with the single country, while al the other routes point to an error page.
• In context.js I created a global context to make all states and functions available globally, in order to avoid prop drilling.
• To change states I used a reducer function with useReducer.

SCSS

For the styling I used the sass pre-processor. The scss folder has the following structure:

.
|── 1-base
│ ├── _1-Variables.scss
│ ├── _2-fonts.scss
│ ├── _3-mixins.scss
│ ├── _4-reset.scss
│ └── _base-index.scss
├── 2-containers
│ ├── _app.scss
│ ├── _containers-index.scss
│ ├── _error.scss
│ └── _home.scss
├── 3-components
│ ├── _components-index.scss
│ ├── _country-item.scss
│ ├── _country.scss
│ ├── _header.scss
│ ├── _loading-spinner.scss
│ └── _search.scss
└── style.scss

Author

• Website - marcocarpona.com
• Frontend Mentor - @MarcoCarpo
• Twitter - @marcocarpona