Skip to content

DonMatano/rest-countries-api-with-color-theme-switcher

Repository files navigation

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

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

Mobile home

Mobile Detail

Mobile home dark

Mobile Detail dark

home desktop

detail desktop

home desktop dark

detail desktop dark

Links

My process

Built with

  • React - JS library
  • React Router
  • Styled Components - For styles
  • Typescript
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

I was able to refresh myself on my knowledge of working with React and hooks. Also, was able to work with Typescript, React Router and styled components libraries.

I was able to know a way to store data in the localstorage to save on making many calls to the server. This saved the user bandwidth and reduced the load to the server.

I was able to learn on how to make a theme toggle for a site.

Author