A responsive Single Page Application (SPA) and Progressive Web App (PWA) that lets users explore and search for information about countries worldwide.
This project was originally developed as a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.
-
Browse a list of countries and search by name or capital city.
-
Filter countries by region.
-
View detailed information about each country, including:
- Flag
- Name
- Population
- Region
- Capital
- Top-Level Domain
- Currency
- Language
- Border Countries
-
Toggle between Dark and Light modes.
View performance analysis here.
This project uses the REST Countries API to fetch country data. The API is free to use and requires no authentication.
Endpoints used:
- All countries:
https://restcountries.com/v3.1/all - Country by CCCA3 code:
https://restcountries.com/v3.1/alpha/{code}
The REST Countries API provides country flags in PNG and SVG format from the flagpedia.net API, but I did not use it because the flags have different aspect ratios, which caused inconsistent card sizes and large Cumulative Layout Shift (CLS) on the home page.
So I used country-flag-icons, a package that provides country flags in a 3:2 aspect ratio.
View performance analysis here.
Check out the live demo here:
https://where-in-the-world.abdalrhman.me
This app is a Progressive Web App (PWA), allowing installation on your device:
- Visit the app at https://where-in-the-world.abdalrhman.me
- Open the browser menu and select "Install Where In the World".
- Follow the prompts to add it to your home screen.
- Clone the repository:
git clone https://github.com/abdalrhman-almarakeby/where-in-the-world.git
- Navigate to the project directory:
cd where-in-the-world
- Install dependencies:
pnpm install
- Start the development server:
pnpm run dev
- Open http://localhost:3000 in your browser.
- GitHub: Abdalrhman Almarakeby
- LinkedIn: Abdalrhman Almarakeby
- Email: [email protected]