🏍️ Bike World

Bike World is a full-featured, client-side motorcycle marketplace web app where users can browse and explore bikes, view detailed product information, place orders, leave reviews, and log in via Email/Password or Google. Admin users get access to a dedicated dashboard to add and manage products.

🔗 Live Site: https://bike-world-4aa7f.web.app/

---

📸 Screenshot

---

🛠️ Built With

• React 17 — Frontend library
• React Router DOM (v5) — Client-side routing, Private & Admin protected routes
• Firebase Authentication — Email/Password & Google Sign-In
• Context API — Global auth state management
• Bootstrap 5 & React-Bootstrap — Responsive UI layout
• Material UI (MUI) — Icons & UI components
• React Hook Form — Form validation and handling
• Node.js / Express + MongoDB (Heroku-hosted API) — Backend data source consumed via fetch
• Firebase Hosting — Deployment

---

✨ Key Features

• 🔐 Authentication — Register/Login with Email & Password or Google, powered by Firebase
• 🛡️ Protected Routing — Private Routes for logged-in users and Admin Routes for admin-only pages
• 🛒 Explore Products — Browse the full bike catalog with detailed individual product pages
• 📦 Order Management — Place orders and track them under "My Orders"
• ⭐ Reviews — Users can submit reviews/feedback
• 🧑‍💼 Admin Dashboard — Add new products, manage/delete existing products, and promote users to admin
• 📱 Fully Responsive — Works seamlessly across desktop, tablet, and mobile
• ⚡ Single Page Application — No page reloads while navigating

---

📦 Dependencies

"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.1.0",
"@mui/material": "^5.1.0",
"bootstrap": "^5.1.3",
"firebase": "^9.4.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.19.3",
"react-router-dom": "5.3.0",
"react-router-hash-link": "^2.4.3",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"

---

🚀 Getting Started (Run Locally)

Follow these steps to run the project on your local machine:

1. Clone the repository

git clone https://github.com/Sheikhasib/bike-world-client-side-website.git
cd bike-world-client-side-website

2. Install dependencies

npm install
# or
yarn install

3. Set up Firebase configuration

This project uses Firebase Authentication. Add your own Firebase project credentials inside:

src/Pages/Login/Firebase/firebase.init.js

You'll need a firebaseConfig object with your apiKey, authDomain, projectId, etc., generated from the Firebase Console.

4. Run the app

npm start
# or
yarn start

The app will run at http://localhost:3000.

5. Build for production

npm run build
# or
yarn build

---

🔗 Relevant Links

• 🌐 Live Website: https://bike-world-4aa7f.web.app/
• 💻 Client Repository: https://github.com/Sheikhasib/bike-world-client-side-website
• ⚙️ Server Repository: https://github.com/Sheikhasib/bike-world-server-side-website

---

📄 License

This project is created for educational purposes.