https://github.com/vedantagrawal524/rest-countries-api

https://github.com/vedantagrawal524/rest-countries-api

css3 html5 javascript react react-router tailwindcss vercel-deployment vite

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/vedantagrawal524/rest-countries-api
• Owner: vedantagrawal524
• Created: 2025-05-23T11:52:21.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-25T07:49:51.000Z (about 1 year ago)
• Last Synced: 2025-06-18T21:46:42.534Z (about 1 year ago)
• Topics: css3, html5, javascript, react, react-router, tailwindcss, vercel-deployment, vite
• Language: JavaScript
• Homepage: https://where-in-the-world-countries.vercel.app/
• Size: 686 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌍 Where in the World? — REST Countries API App

This is a solution to the [REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). It helped me improve my skills in **React**, **dark/light theme implementation**, and **working with REST APIs** to build a dynamic UI.

---

## 📋 Table of Contents

- [Overview](#overview)  

  - [Features](#features)  

  - [Screenshots](#screenshots)  

  - [Live Links](#live-links)  

  - [Built With](#built-with)

  - [Backend Features](#backend-features)

- [Author](#author)

---

## Overview

This application displays country data fetched from the REST Countries API. Users can view details about each country, search by name, filter by region, switch themes, and navigate to bordering countries.

---

### Features

- View all countries from the API on the homepage  

- Search for a country using a text input  

- Filter countries by region  

- Click on a country to view more detailed information  

- Navigate to border countries via links  

- Toggle between light and dark themes  

- Responsive design for mobile, tablet, and desktop  

- Graceful handling of missing or undefined data

---

### Screenshots

![All Countries View - Light Mode](./client/public/design/desktop-design-home-light.jpg)  

![All Countries View - Dark Mode](./client/public/design/mobile-design-home-dark.jpg)  

![Country Details- Light Mode](./client/public/design/mobile-design-detail-light.jpg)

![Country Details- Dark Mode](./client/public/design/desktop-design-detail-dark.jpg)

---

### Live Links

- 📁 GitHub Repository: [REST Countries App](https://github.com/vedantagrawal524/rest-countries-api)  

- 🌐 Live Site: [https://where-in-the-world-countries.vercel.app/](https://where-in-the-world-countries.vercel.app/)

---

### Built With

- HTML5

- TailWind CSS

- JavaScript

- React  

- React Router  

- REST Countries API  

- Mobile-first responsive layout  

- Dark/Light Theme Toggle  

- [Vercel](https://vercel.com/) for deployment

- Node.js

- Express.js

- MongoDB

- Mongoose

- [Render](https://render.com/) for Server deployment  

---

### Backend Features

- Created an **Express.js server** to handle Countries Data.

- Countries Data are stored securely in a **MongoDB database**.

- Used **Mongoose** to define the Countries Data schema and perform validations.

- Hosted backend using **Render**.

---

## Author

- Portfolio – _Vedant Agrawal_  

- Frontend Mentor – [@vedantagrawal524](https://www.frontendmentor.io/profile/vedantagrawal524)  

- GitHub – [@vedantagrawal524](https://github.com/vedantagrawal524)

---

🧠 _Fueled by curiosity, completed with precision. Feedback and contributions are always welcome!_