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
  • Built with
  • What I learned
  • Continued development
• 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

• Mobile HomePage Light

• Mobile HomePage Dark

• Mobile CountryDetails Light

• Mobile CountryDetails Dark

• Desktop HomePage Light

• Desktop HomePage Dark

• Desktop CountryDetails Dark

• Desktop CountryDetails Light

Links

• Live Site URL: @via Vercel
• Live Site URL: @via Netlify
• Solution URL: @via frontend mentor

Built with

• React - JS library
• Vite - Build tool
• React-Router v.6 - Routing & fetching data from API
• React-Paginate - For pagination
• Semantic HTML5 markup
• CSS custom properties
• Flexbox & Grid
• JSX syntax
• Hooks (useEffect, useNavigate, useParams)

What I learned

To think more in react logic and deal with REST-API, and to fetch data through ReactRouter v.6 and navigate between countries in the same page (when click on some border country it navigates to that country without refreshing the page)

Continued development

Build more projects with Reactjs

Author

• Website - Ragaboga
• Frontend Mentor - @RagaBoGaa