🌐 React Router Website

This is a multi-page React.js application built using React Router DOM. It includes multiple routes (Home, Collections, About, Contact) and also demonstrates API data fetching to display dynamic content.

✨ Features

✅ Multi-Page Routing – Home, Collections, About, Contact ✅ API Data Fetching – Fetch and display data from external API ✅ Responsive Design – Mobile-friendly layout ✅ Error Handling – Custom error page for invalid routes ✅ Reusable Components – Organized structure with layout and pages ✅ Clean Code – Easy to understand and extend

📂 Project Structure src/ ├── Pages/ │ ├── Home.jsx # Home Page │ ├── Collections.jsx # Collections Page (API Data Display) │ ├── About.jsx # About Page │ ├── Contact.jsx # Contact Page │ ├── Layout/ │ │ └── AppLayout.jsx # Main Layout (Navbar, Footer, Outlet) │ └── Error/ │ └── Error.jsx # Custom Error Page (404 etc.) ├── App.jsx # React Router Configuration ├── main.jsx # React Entry Point └── index.css # Styling

⚙️ Installation & Setup

Must Have a 404 Page:

Follow these steps to run the project locally:

Clone the repository

git clone https://github.com/your-username/your-repo.git

Navigate into the folder

cd your-repo

Install dependencies

npm install

Start the development server

npm run dev

Now open http://localhost:5173 in your browser.

🛠️ Tech Stack

⚛️ React.js – UI library

🛣️ React Router DOM – Routing and navigation

🎨 Tailwind CSS (if used) – Styling

🌐 API Fetch – Fetch external data (like OMDB API or any other)

⚡ Vite – Development build tool

🌍 API Integration

This project uses API data fetching to show dynamic content on the Collections page.

Example (OMDb API):

const response = await fetch(URL); const data = await response.json();

📸 Screenshots

🚀 Future Improvements

Add authentication (Login / Signup)

Dark mode support

Backend integration for contact form

More advanced API filtering and search

👨‍💻 Author

Developed by Taha