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
  • Folder Structure
• 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: Frontendmentor
• Live Site URL: Link Netlify

Built with

• Semantic HTML5 markup
• Styled Components
• Flexbox
• CSS Grid
• Responsive
• React Hooks
• Typescript
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Axios - For request
• React Icons - For icons
• Storybook - For UI

My process

In this challenge, react with typescript was used, listing all countries coming from a rest api.

Custom hooks were also created to store the dark and light theme along with localstorage

Downloading the project:

https://github.com/geraldobl58/frontendmentor-challenge-countries

First you can clone or use this template in your GitHub profile.

# install the deps
yarn

# run the project
yarn start

There is a snippet for quickly creating components.

yarn generate Component

Folder Structure

├── README.md
├── generators # folder to our templates
├── public # folder with our assets
├── src
│   ├── App.tsx # main file to our SPA (We define routes/components here)
│   ├── components
│   │   └──Example
│   │       ├── index.tsx
│   │       ├── styles.ts
│   ├── index.tsx # main file to ReactDom.render
    ├── Hooks
│   ├── pages # we separated our pages/views/screens here
│   │   └── Home.tsx
    ├── Routes
    ├── Services
│   └── styles # any styles that you want to share inside the app
│       └── global.ts

Author

• Website - Geraldo Luiz
• Frontend Mentor - @geraldobl58