REST Countries API with Color Theme Switcher 🌍

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. This project allows users to browse through all countries, filter them by region, sort by various metrics, search for a specific country, and view more detailed information on a dedicated page. It also features a fully functional light/dark mode theme switcher and dynamic browser metadata.

✨ View Live Demo

---

Table of Contents

• The Challenge
• Screenshots
• Links
• Built With
• Features
• Installation
• Author
• Acknowledgments

---

The Challenge

Users should be able to:

• See all countries from the API on the homepage.
• Search for a country using an input field.
• Search by a capital using an input field.
• Filter countries by region.
• Sort countries by Name (A-Z, Z-A) and Population (Lowest, Highest).
• 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.
• View the optimal layout for the app depending on their device's screen size.

---

Screenshots

Desktop Preview

Home Page

Desktop Home Experience

Light Theme	Dark Theme

Country Details View

Light Theme	Dark Theme

Mobile Experience

Light Theme	Dark Theme

Links

• Figma Design: Figma Link for REST Countries API
• Live Site URL: https://albertbabaiani.github.io/rest-countries-app/

---

Built With

This project was built using modern web development technologies and libraries to create a responsive and dynamic user experience.

• Framework: Angular (using standalone components)
• UI Library: Angular Material
• Styling:
  • SCSS (Sass)
  • CSS Flexbox & Grid
  • Mobile-First Workflow
• State Management & Architecture:
  • Angular Signals: Declarative state using signal, computed, and effect()
  • RxJS Interop: Seamlessly bridging HTTP streams to signals with toSignal and toObservable
  • Modern Routing: Utilizing Route Input Bindings to decouple components from ActivatedRoute
• API: REST Countries API

---

Features

• Modern Declarative State: Built entirely with Angular Signals for heavily optimized, granular DOM updates without manual RxJS subscriptions.
• Dynamic Browser Metadata: Utilizing Angular's Title service and DOCUMENT token to dynamically update the browser tab title and favicon to match the currently viewed country's flag and name.
• Advanced Sorting & Filtering: Users can filter by continent, search by country name or capital, and sort the grid by name or population dynamically.
• Dark/Light Mode Theme Toggle: Seamlessly switch between a light and dark theme, with preferences saved in local storage.
• Detailed Country View: Clicking on a country card navigates to a detailed page with information like native name, sub-region, currencies, languages, and more.
• Border Country Navigation: On the detail page, users can click on border countries to navigate directly to their respective detail pages safely using mapped HTTP queries.
• Robust Error Handling: Navigating to a non-existent country URL redirects to a clean "404 Not Found" page.

---

🚀 Installation

To run this project locally, follow these simple steps.

1. Clone the repository

    git clone [https://github.com/AlbertBabaiani/rest-countries-app.git](https://github.com/AlbertBabaiani/rest-countries-app.git)
    ```
2.  **Navigate to the project directory**
    ```sh
    cd rest-countries-app
    ```
3.  **Install NPM packages**
    ```sh
    npm install
    ```
4.  **Run the application**
    ```sh
    ng serve
    ```
    The application will be available at `http://localhost:4200/`.

---

## Author

- **Albert Babaiani**
- **GitHub:** [@AlbertBabaiani](https://github.com/AlbertBabaiani)

---

## Acknowledgments

- A big thank you to [Frontend Mentor](https://www.frontendmentor.io) for providing this challenging and educational project.
- The [REST Countries API](https://restcountries.com/) for providing the data.