Country Scope - REST Countries Explorer 🌍

Country Scope is a modern web app that lets you explore countries of the world, search and filter by region, and view detailed information—all with a beautiful dark mode.
This project is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

---

Table of contents

• Overview
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

---

Overview

Features

• 🌐 See all countries from the REST Countries 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
• ⚡ Fast, responsive, and mobile-friendly

Screenshot

Links

• Solution URL: https://github.com/DemoStephen/Country-Scope
• Live Site URL: https://countryscope.vercel.app/

---

My process

Built with

• Mobile-first workflow
• React
• Vite
• Tailwind CSS
• REST Countries API
• React Router

What I learned

• Fetching and displaying data from a public API in React
• Implementing a theme switcher using React and Tailwind CSS
• Managing global state for theme and filters
• Routing with React Router for country detail pages
• Responsive design and accessibility best practices

Example: Fetching countries from the API

const fetchCountries = async () => {
  const response = await fetch("https://restcountries.com/v3.1/all");
  const data = await response.json();
  setCountries(data);
  setLoading(false);
};

Example: Theme toggle function

function toggleTheme() {
  const isDark = document.documentElement.classList.toggle("dark");
  localStorage.theme = isDark ? "dark" : "light";
}

Continued development

• Improve accessibility, especially for keyboard navigation and screen readers
• Add unit and integration tests
• Enhance error handling for API requests
• Optimize performance for large datasets

Useful resources

• REST Countries API Docs
• Tailwind CSS Documentation
• React Router Documentation

---

Author

• Frontend Mentor - @demostephen
• GitHub - demostephen

---

Acknowledgments

Thanks to the Frontend Mentor community for feedback and support!