REST Countries API - Where in the world?

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

🌍 Live Demo: https://country-api-eight-wheat.vercel.app

📋 Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Architecture (Clean Architecture)
• Author

Overview

The challenge

Your challenge is to integrate with the REST Countries API to pull country data and display it like in the designs.

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

Screenshot

(Note: Add your actual screenshots if available)

Links

• Solution URL: GitHub Repository
• Live Site URL: Vercel Deployment

My process

Built with

• Astro 6 - Framework for content-driven websites with Islands Architecture.
• Vue 3 (Composition API) - For interactive components.
• Tailwind CSS v4 - Modern CSS utility framework.
• Zod - Robust schema validation.
• Flexbox & CSS Grid - Layout systems.
• Mobile-first workflow - Responsive design strategy.
• SSR (Server-Side Rendering) - For instant load times and optimal SEO.

Architecture (Clean Architecture)

The project follows a simplified Clean Architecture pattern to ensure maintainability, testability, and scalability:

src/
├── core/             # Core Domain (SSOT)
│   ├── domain/       # Types, Schemas (Zod) and Centralized Errors
│   ├── interfaces/   # Ports (Repository definitions)
│   └── use-cases/    # Unified Business Logic (e.g. GetCountries)
├── infrastructure/   # Data Adapters
│   ├── cache/        # In-memory optimization
│   ├── http/         # Core fetch with Retry & Timeout logic
│   └── repositories/ # Concrete API implementations
├── presentation/    # Presentation Layer
│   ├── components/   # Vue components
│   └── composables/  # Generic reactive hooks (useAsync)
├── actions/          # Astro Actions (Bridges)
├── pages/            # Astro Routes (SSR Entry points)
└── layouts/          # Base layouts

Key Optimizations:

• Centralization: Types and validation schemas consolidated in src/core/domain.
• SSR Integration: Initial data fetching happens on the server, eliminating layout shifts and improving UX.
• Intelligent Caching: Infrastructure-level caching to reduce API calls and improve performance.
• Full Accessibility: ARIA attributes and keyboard navigation fully implemented.

📦 Scripts

pnpm dev          # Run development server
pnpm build        # Build for production (Vercel/Node)
pnpm test         # Run unit tests (Vitest)
pnpm e2e          # Run E2E tests (Playwright)

Author

• GitHub - Duquerson
• Frontend Mentor - @Duquerson
• LinkedIn - Duquerson

Acknowledgments

It was fun to build it! 🚀 If you like the code, feel free to follow me. 👋