Skip to content

emanuelmarques45/rest-countries

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.

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

Screenshots

Desktop Layout

Desktop

Desktop

Mobile Layout

Mobile

Mobile

Links

My process

Built with

What I learned

I learned how to use react query to make HTTP requests (which is much more simple than making requests manually), and used react select for the first time to use a custom select input.

To see how you can add code snippets, see below:

function getAllCountries() {
  return useQuery('getAllCountries', async () => {
    return await fetch(`https://restcountries.com/v3.1/all`).then(data =>
      data.json()
    )
  })
}

const { data, isLoading } = getAllCountries()

Useful resources

Author