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. This project was bootstrapped with Create React App.

Table of contents

Overview
My process
- Built with
- 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

Screenshot

Desktop (width: 1440px) view of home page in dark mode

Desktop (width: 1440px) view of home page in light mode

Desktop (width: 1440px) view of single Country page in dark mode

Desktop (width: 1440px) view of single Country page in light mode

Links

Live Site URL: https://femto-countries.vercel.app/

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
Mobile-first workflow
React - JS library
Material-UI - A React UI Component Library

Useful resources

Material-UI Documentation - This is my first major material UI project, so the documentation helped a lot.
Anthony Sistilli's Material UI playlist on YouTube - I learned material UI with this playlist :D.

Author

Twitter - @femto_ace