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
  • Screenshot
  • Links
• My process
  • Built with
• 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 (optional)

Screenshot

Desktop	Mobile
Home Page: Light
Home Page: Dark
Details Page: Light
Details Page: Dark
404 Page: Light
404 Page: Dark

Links

• Solution
• Live Site

My process

Built with

• HTML5
• CSS3
• TypeScript
• TailwindCSS - For Styles
• DaisyUI
• React - UI library
• Vite - For Development & Project Bundling
• React Router DOM - SPA Routing
• @reduxjs/toolkit - Global State Management
• @tanstack/react-query - Asynchronous State Management
• React-Icons

Author

• Shivangam Soni
• Frontend Mentor - @ShivangamSoni
• GitHub - @ShivangamSoni