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
  • The challenge
  • Screenshot
  • Links
• 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