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

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

• 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.

• ⚛️ 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

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 

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

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

• 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 

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

• GitHub @Umit8098

• Linkedin @umit-arat