https://github.com/terenceclzhang/rest-countries-api-web-app

A React web application using the REST Countries API.
https://github.com/terenceclzhang/rest-countries-api-web-app

framer-motion frontend react react-router rest-countries-api tailwindcss typescript

Last synced: 4 days ago
JSON representation

A React web application using the REST Countries API.

• Host: GitHub
• URL: https://github.com/terenceclzhang/rest-countries-api-web-app
• Owner: TerenceCLZhang
• License: mit
• Created: 2025-08-01T05:57:32.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-08-06T05:49:56.000Z (11 months ago)
• Last Synced: 2025-08-29T05:32:32.593Z (10 months ago)
• Topics: framer-motion, frontend, react, react-router, rest-countries-api, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://terenceclzhang-rest-countries.netlify.app/
• Size: 441 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Where in the World? - A React Web App

![Home page](assets/home.png)

![Details page](assets/details.png)

A Frontend React web application which shows detailed information about countries around the world. Users can browse, search, and filter countries by region, view country details including population, capital, languages, currencies, and neighbouring countries. You can view the [live website here](https://terenceclzhang-rest-countries.netlify.app).

This project was insipired by the [Frontend Mentor REST Countries API with color theme switcher challenge](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca).

## Features

- **Search countries** by name with real-time filtering.

- **Filter countries** by region (Africa, Americas, Asia, Europe, Oceania).

- **Sort countries** by name (A-Z, Z-A) and population (ascending, descending).

- **Responsive design** for desktop and mobile devices.

- **Detailed country pages** showing flags, official name, native names, population, region, subregion, capital, top-level domain, currencies, languages, and border countries.

- **Visit country locations** via direct links to Google, Bing, and DuckDuckGo Maps from the details page.

- **Dark mode toggle** for better user experience.

## Technologies Used

- React

- TypeScript

- React Router

- Axios

- Tailwind CSS

- Framer Motion

- Lucide React

- React Hot Toasts

- [REST Countries API](https://restcountries.com/)

## Contributions

This is a personal project created to showcase my skills. I am not accepting contributions at this time.

## License

This project is released under the [MIT License](LICENSE). You are free to use, modify, and distribute this project in accordance with the terms of the license.