https://github.com/dhruv9916/worldatlas-react-19-multi-page-website
https://github.com/dhruv9916/worldatlas-react-19-multi-page-website
axios formhandling html-css-javascript loader pagination react-icons react-router-dom reactjs router-dom useeffect-hook useparams usestate-hook usetransition
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dhruv9916/worldatlas-react-19-multi-page-website
- Owner: Dhruv9916
- Created: 2025-03-02T00:48:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-08T06:31:02.000Z (3 months ago)
- Last Synced: 2025-03-08T07:27:31.633Z (3 months ago)
- Topics: axios, formhandling, html-css-javascript, loader, pagination, react-icons, react-router-dom, reactjs, router-dom, useeffect-hook, useparams, usestate-hook, usetransition
- Language: JavaScript
- Homepage: https://worldatlas-react-by-dhruv.netlify.app/
- Size: 948 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌍 WORLDATLAS - REACT 19 MULTI-PAGE WEBSITE
🚀 Overview
WorldAtlas is a dynamic and responsive multi-page website built using React 19. It features dynamic routing, React Router DOM for seamless navigation, Axios for API requests, and includes advanced features like search, filter, and sorting functionalities. The project follows best practices for building modern web applications with React.
## 🔗 Live Demo
🌍 **[WorldAtlas Live Demo](https://worldatlas-react-by-dhruv.netlify.app/)**
✨ Features
* ✅ 🌐 **Dynamic Multi-Page Navigation** – React Router DOM for seamless routing
* ✅ 🔍 **Search & Filtering** – Easily search and filter countries based on user input
* ✅ 🔄 **API Data Fetching** – Axios used for fetching country data dynamically
* ✅ 📊 **Sorting Functionality** – Sort countries in ascending/descending order
* ✅ 🎨 **Fully Responsive Design** – Optimized for all devices
* ✅ 🚀 **Deployed on Netlify** – Easily accessible online
* ✅ ⚠️ **Error Handling & Loaders** – Smooth user experience
* ✅ **Pagination Feature** – Smooth user experience
🚀 Deployment
This project is deployed using Netlify. You can easily redeploy it by connecting your GitHub repository to Netlify and enabling automatic builds.
📚 Tech Stack
* **Frontend:** React 19, React Router DOM, HTML, CSS, JavaScript
* **API Handling:** Axios
* **Deployment:** Netlify
⚡ Quick Start Guide
To run the project locally, simply clone the repository and run:
```bash
npm install && npm run dev
```
🌍 Real-World Use Cases
* 📖 **Educational Tool** – Helps users learn about different countries and their details.
* ✈️ **Travel & Tourism Website** – Can be adapted for travel guides, providing country insights.
* 📊 **Geographical Data Dashboard** – Useful for visualizing country-based statistics and information.
🛠️ Concepts Used
* ⚛️ **React 19 & Core React Features**
* 🔀 **React Router DOM** (Navigation, Dynamic Routes, Outlet, Router Provider)
* 🌍 **API Fetching with Axios** (GET method, JSON data handling)
* 🔗 **NavLink for Navigation**
* 🎨 **React Icons for UI Enhancements**
* 🔄 **useState & useEffect Hooks** (State Management & Side Effects)
* ⏳ **useTransition Hook** (Optimizing UI rendering)
* 🗺️ **.map Method** (Looping through country data)
* ❓ **Conditional Rendering**
* 📍 **useParams Hook** (Fetching Individual Country Details)
* 🏗️ **Form Handling in React 19**