Where in the World?

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

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

Additional features:

• URL path handling
• Dark mode detection and saving themes to localStorage
• custom scroll
• dynamic document title
• countries appearing animation with Intersection Observer

Screenshot

Links

Live Site URL:

My process

Built with

• CSS grid
• Typescript
• Vite
• Tailwind
• Rest Countries API

What I learned

This project was another opportunity to practice Typescript, this time with API. I've used also Vite instead of create React app for the first time, which turned out to be super fast and easy to use. It was also a great opportunity to further practice of Tailwind. I've learned how to use Intersection Observer to implement Infinite scroll.