🌍 REST Countries Explorer — Frontend Mentor Challenge

This project is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. It’s a fully responsive and accessible React application that allows users to explore detailed information about countries around the world, with support for light/dark themes and custom navigation logic.

📌 Overview

This web application is built with React and SASS, consuming the REST Countries API to display comprehensive data about countries. One of the unique aspects of this project is the manual implementation of routing, which helped me deepen my understanding of client-side navigation without relying on external libraries.

Users can search for countries, filter by region, view detailed country pages, navigate through bordering nations, and toggle between light and dark modes — all within a clean and responsive UI.

🎯 The Challenge

Users can:

• ✅ View 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 detailed information
• 🔁 Navigate through border countries from the detail page
• 🌗 Toggle between light and dark color themes

🖼️ Screenshot

🔗 Links

• 💾 GitHub Repository
• 🌐 Live Demo

---

🛠 My Process

⚙️ Built With

• Semantic HTML5
• SASS and CSS custom properties
• Flexbox & CSS Grid
• Mobile-first responsive design
• React (including Hooks)
• Manual routing without react-router-dom

📚 What I Learned

This project helped me refine several technical skills and broaden my problem-solving abilities:

• 🧠 Custom Hooks – Reused logic efficiently and kept components clean.
• 🧭 Manual Routing – Built a simple yet effective routing system from scratch to control page navigation without external dependencies.
• 🌐 API Integration – Fetched and rendered dynamic data from the REST Countries API.
• 🔄 State Management – Handled global state with useContext to share data across components like the theme toggle.
• 📱 Responsive Design – Ensured accessibility and usability across different screen sizes.
• ⚛️ React Ecosystem – Took advantage of core React features like the virtual DOM, conditional rendering, and component lifecycles.

---

🙋‍♂️ Author

Made with 💻 by Bryan Lazo

• 🧑‍💻 Frontend Mentor: @blazo-dev
• 🌐 LinkedIn: @bryanlazodev
• 💻 GitHub: @blazo-dev