Skip to content

Latest commit

 

History

History
executable file
·
112 lines (82 loc) · 3.27 KB

README.md

File metadata and controls

executable file
·
112 lines (82 loc) · 3.27 KB

🌍 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:

🎨 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.