🌍 REST Countries API with Color Theme Switcher

Welcome to my solution for the REST Countries API Challenge on Frontend Mentor. This project showcases my ability to build a dynamic web app using Vue.js, REST APIs, and a dark/light theme toggle.

---

📜 Challenge Overview

Objective

Build a web app that fetches data from the REST Countries API and displays it in a responsive and user-friendly manner.

Features

Your 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 detailed information on a separate page.
• ➡️ Navigate to border countries from the detail page.
• 🌓 Toggle between light and dark mode for the entire app.

---

🔧 Technologies Used

• Vue.js: For building the interactive and component-based UI.
• CSS3: For responsive design and theming.
• LocalStorage: To save the user’s theme preference.
• Vite: As the development and build tool for the project.

---

🚀 How to Run Locally

If you’d like to run this project on your machine:

1. Clone the repository:

   git clone https://github.com/Leo-Pellegrin/countries-api-FrontendMentor

2. Navigate to the project folder:

   cd countries-api-FrontendMentor

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open in your browser:

• Go to http://localhost:3000 to view the app locally.

---

🎨 Design

The design was provided by Frontend Mentor and includes:

• Mobile and desktop designs in both light and dark modes.
• A style guide with fonts, colors, and spacing details.

---

📝 Learnings

During this project, I gained experience in:

1. Working with REST APIs and handling large datasets dynamically.
2. Implementing a dark/light mode toggle using CSS variables and local storage.
3. Structuring Vue.js components for scalability and reusability.
4. Creating a responsive and accessible web application.

---

🌟 Features in Detail

1. Dynamic Data Fetching • Utilizes the REST Countries API to fetch country data dynamically. • Handles API errors gracefully with a fallback message.

2. Search and Filtering • Users can search for countries by name or filter them by region for easy navigation.

3. Dark/Light Mode • Implements a theme toggle button to switch between dark and light modes. • Saves the user’s preference in local storage for a consistent experience.

4. Navigation to Border Countries • Displays clickable links to navigate to neighboring countries directly from the details page.

---

🤝 Contributing

If you’d like to contribute:

1. Fork the repository.
2. Create a new branch for your changes:

   git checkout -b feature-new-functionality

3. Commit your changes:

   git commit -m "Add new feature"

4. Push your branch and create a pull request.

---

🙌 Acknowledgments

Thanks to Frontend Mentor for the design inspiration and challenge. If you have feedback or suggestions, feel free to open an issue or reach out.