🌍 Countries Explorer

A responsive, theme-switchable country information app powered by the REST Countries API. Built with React and Material-UI, this project showcases API integration, dynamic routing, and a dark/light mode toggle. solution to the REST Countries API with Color Theme Switcher challenge on Frontend Mentor. This challenge offered a great opportunity to practice working with APIs, dynamic routing, and implementing a dark/light theme toggle in a React application.

---

📋 Table of Contents

• Overview
  • The Challenge
  • Screenshot
  • Live Links
• Development Process
  • Tech Stack
  • Key Learnings
  • Future Improvements
  • Resources
• Getting Started
• Author
• Acknowledgments

---

🔎 Overview

The Challenge

Users should be able to:

• View all countries from the REST API on the homepage
• Search for a country by name
• Filter countries by region
• Click on a country to view more detailed information on a separate page
• Navigate to border countries from the country details page
• Toggle between light and dark themes (optional feature)

Screenshot

Live Links

• 💻 GitHub Repository: github/countries-explorer
• 🌐 Live Demo: countries-explorer-byoge

---

🛠 Development Process

Tech Stack

• React – JavaScript library for building user interfaces
• Material-UI (MUI) – For reusable UI components and theming
• Axios – For making HTTP requests to the REST Countries API
• React Router DOM – For dynamic routing between pages
• CSS Grid & Flexbox – For responsive layouts
• React Icons – For consistent and scalable icon usage

---

Key Learnings

This project helped me strengthen my knowledge in:

• 🔄 Building dynamic SPAs with React and routing
• 📡 Fetching data with Axios and managing API states
• 🌗 Implementing a dark/light mode toggle using MUI’s createTheme
• 🧩 Organizing components and managing application state efficientl

Example code snippet:

const theme = createTheme({
  palette: {
    mode: darkMode ? "dark" : "light", // Set MUI's color mode
    background: {
      default: darkMode ? "hsl(207, 26%, 17%)" : "hsl(0, 0%, 98%)",
      paper: darkMode ? "hsl(209, 23%, 22%)" : "hsl(0, 0%, 100%)",
    },
    text: {
      primary: darkMode ? "hsl(0, 0%, 100%)" : "hsl(200, 15%, 8%)",
    },
    action: {
      input: darkMode ? "hsl(0, 0%, 52%)" : "hsl(0, 0%, 52%)",
    },
  },
});

---

Resources

• Material UI Documentation – For theming and reusable components
• React Router – For handling routing and navigation
• REST Countries API – Official API source for country data

---

🚀 Getting Started

To run this project locally:

Clone the repository:

git clone https://github.com/geliettech/countries-explorer.git

Navigate to the project folder:

cd countries-explorer

Install dependencies:

npm install

Start the development server:

npm start

The app will open on http://localhost:3000

👩‍💻 Author

• Frontend Mentor – @geliettech
• GitHub – @geliettech
• Twitter – @geliettech

---

🙏 Acknowledgments

Thanks to Frontend Mentor for providing engaging, real-world development challenges. Special appreciation to the open-source community and documentation writers who make building awesome projects easier every day.