Where In the World?

Where In the World?

A responsive Progressive Web App (PWA) that allows users to view and search for information about countries around the world.

This project was created as a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

Overview

• Browse a list of countries and search for a specific country by name or capital city.
• Filter countries by region.
• Click on a country to view detailed information, including:
  • Flag
  • Name
  • Population
  • Region
  • Capital
  • Top-Level Domain
  • Currency
  • Language
  • Border Countries
• Dark/Light mode toggle.

View performance analysis overview here.

Built With

• React
• Vite
• React Router
• Tailwind CSS

API

This project uses the REST Countries API to fetch country data.

The API is free to use and does not require authentication.

The following endpoints were used:

• All - https://restcountries.com/v2/all
• CCCA3 Code - https://restcountries.com/v3.1/alpha/{code}

Country Flags

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 content shifts 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.

Live Demo

You can view a live demo hosted on Vercel:

https://where-in-the-world--app.vercel.app/

installing as a Progressive Web App (PWA)

This app is a Progressive Web App (PWA), which means you can install it on your device. Here’s how to install it:

• Visit the app URL https://where-in-the-world-ecru.vercel.app/ in your browser.

• Click on the browser's menu and select "Install Where In the World".

• Follow the prompts to install the app on your device's home screen.

Running Locally

1. Clone the repository:

git clone https://github.com/abdalrhman-almarakeby/where-in-the-world.git

2. Navigate to the project directory:

cd where-in-the-world

3. Install dependencies:

npm install

4. Start the local development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Contact

Github: Abdalrhman Almarakeby

Linkedin :Abdalrhman Almarakeby

Email: almarakeby.work@gmail.com