📌 React Router Project – Modern Multipage Website Layout

🖥️ Demo | 📂 Repository

Table of Contents

• Table of Contents
• ✨ Overview
• 📖 Description
• 🚀 Features
• 🗂️ Project Skeleton
• 🛠️ Built With
• ⚡ How To Use
• 📌 About This Project
• 🙏 Acknowledgements
• 📬 Contact

---

✨ Overview

A responsive multi-page web application built with React Router, Bootstrap, and FontAwesome, focusing on dynamic routing, API data fetching, and component-based architecture.

---

📖 Description

• This project demonstrates the use of React Router v6 features such as:

  • Static & Dynamic Routing
  • Nested Routes
  • Programmatic Navigation with useNavigate
  • Private Routes for authorization control
  • Route Parameters using useParams
  • Data fetching with fetch, useState, and useEffect

• It also includes Bootstrap integration, FontAwesome icons, and reusable components for a modular and scalable React structure.

---

🚀 Features

• ⚛️ React Router v6 for client-side routing
• 🔄 Dynamic Routing using useNavigate()
• 🔐 Private Route implementation
• 🌐 API Integration with https://jsonplaceholder.typicode.com/
• 🧩 Reusable Components (Nav, Footer, InstructorDetail, etc.)
• 🧭 Browser History API (forward/back navigation)
• 💅 Bootstrap & FontAwesome integration for styling
• 🚀 Deployed on GitHub Pages

---

🗂️ Project Skeleton

src/
 │
 |----readme.md   
 │
 ├─ components/
 │   ├─ About.jsx
 │   ├─ Courses.jsx
 │   ├─ Footer.jsx
 │   └─ Nav.jsx
 │
 ├─ img/
 │
 ├─ pages/
 │   ├─ Aws.jsx
 │   ├─ Contact.jsx
 │   ├─ FullStack.jsx
 │   ├─ Home.jsx
 │   ├─ InstructorDetail.jsx
 │   ├─ Instructors.jsx
 │   ├─ NotFound.jsx
 │   ├─ Paths.jsx
 │   └─ PrivateRouter.jsx
 │   
 ├─ App.css
 ├─ App.js
 ├─ index.css
 ├─ index.js
 └─ data.js

---

🛠️ Built With

• React
• React Router v6
• Bootstrap
• FontAwesome
• JSONPlaceholder API
• GitHub Pages

---

⚡ How To Use

To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/Umit8098/React-Project-Router.git

# Navigate into the project folder
$ cd React-Project-Router

# Install dependencies
$ yarn  
$ yarn start

# or using npm
$ npm install
$ npm start

---

📌 About This Project

• This project was built to practice and demonstrate advanced React Router concepts while creating a clean, responsive, and multi-page layout.
• It showcases practical usage of navigation, route protection, and API-driven dynamic content within a modern React environment.

💡 “Bu proje React Router konusundaki bilgimi pekiştirmek ve API tabanlı dinamik içerik oluşturmayı pratik etmek amacıyla geliştirilmiştir.”
— Ümit Arat

---

🙏 Acknowledgements

• 🎓Clarusway – for the training resources
• 📘React Documentation
• 🧭React Router Docs
• 💡JSONPlaceholder API

---

📬 Contact

• GitHub @Umit8098

• Linkedin @umit-arat