🚀 A production-ready, full-stack Car Rental Booking Platform built with the MERN stack. Users can browse, filter, and book vehicles. Owners can list cars, manage bookings, and track revenue — all in one seamless platform.

---

📌 Table of Contents

• 📸 Screenshots
• ✨ Features
• 🛠️ Tech Stack
• 📁 Project Structure
• ⚙️ Installation & Setup
• 🔗 API Endpoints
• 🤝 Contributing
• 📄 License
• 👨‍💻 Author

---

📸 Screenshots

👤 User Panel

🔐 User Login	🚗 Hero Section
🚘 Car Cards	📅 Book a Car
📋 My Bookings

---

🏢 Owner Panel

🔑 Owner Login	📊 Owner Dashboard
➕ Add New Car	🔧 Manage Cars
📂 Manage Bookings

---

✨ Features

👤 User Features

Feature	Description
🔐 Authentication	Secure Register & Login with JWT tokens
🚗 Browse Cars	View all available cars with images & details
🔍 Smart Filters	Filter by location, category, price range
📅 Book a Car	Select pickup & return dates, instant booking
📋 Booking History	View all past and current bookings
📱 Responsive UI	Fully mobile-friendly design

🏢 Owner Features

Feature	Description
🔑 Owner Login	Dedicated owner authentication portal
📊 Dashboard	Revenue stats, total bookings, active listings
➕ Add Car	List car with images, specs, price & category
🔧 Manage Cars	Edit, toggle availability, delete listings
📂 Manage Bookings	View & manage all customer bookings
🖼️ Profile Image	Upload & update owner profile picture via ImageKit

---

🛠️ Tech Stack

🖥️ Frontend

Technology	Version	Purpose
React	19.x	UI Framework
Vite	6.x	Build Tool & Dev Server
Tailwind CSS	3.x	Utility-First Styling
React Router DOM	7.x	Client-Side Routing
Axios	Latest	HTTP API Requests
React Hot Toast	Latest	Toast Notifications

⚙️ Backend

Technology	Version	Purpose
Node.js	18+	Runtime Environment
Express.js	5.x	Web Framework
MongoDB	Atlas	NoSQL Database
Mongoose	Latest	ODM for MongoDB
JWT	Latest	Authentication & Authorization
ImageKit	Latest	Image Upload & CDN Delivery
Multer	Latest	Multipart File Handling
bcrypt	Latest	Password Hashing
dotenv	Latest	Environment Variables
cors	Latest	Cross-Origin Resource Sharing

---

📁 Project Structure

car-rental-booking-app/
│
├── 📂 frontend/
│ ├── 📂 public/
│ ├── 📂 src/
│ │ ├── 📂 assets/ # Images, icons, static files
│ │ ├── 📂 components/ # Reusable UI components
│ │ │ ├── Navbar.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── CarCard.jsx
│ │ │ └── Loader.jsx
│ │ ├── 📂 context/ # Global state (AuthContext)
│ │ │ └── AuthContext.jsx
│ │ ├── 📂 pages/
│ │ │ ├── 📂 Auth/ # Login & Register pages
│ │ │ │ ├── Login.jsx
│ │ │ │ └── Register.jsx
│ │ │ ├── 📂 Home/ # User-facing pages
│ │ │ │ ├── Home.jsx
│ │ │ │ ├── CarListing.jsx
│ │ │ │ ├── CarDetails.jsx
│ │ │ │ └── MyBookings.jsx
│ │ │ └── 📂 Dashboard/ # Owner panel pages
│ │ │ ├── Dashboard.jsx
│ │ │ ├── AddCar.jsx
│ │ │ ├── ManageCars.jsx
│ │ │ └── ManageBookings.jsx
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── .env
│ ├── index.html
│ ├── tailwind.config.js
│ ├── vite.config.js
│ └── package.json
│
├── 📂 backend/
│ ├── 📂 configs/
│ │ ├── db.js # MongoDB connection
│ │ └── imagekit.js # ImageKit configuration
│ ├── 📂 controllers/
│ │ ├── userController.js # User auth & data logic
│ │ ├── ownerController.js # Owner operations logic
│ │ └── bookingController.js # Booking logic
│ ├── 📂 middleware/
│ │ ├── authMiddleware.js # JWT verification
│ │ └── multer.js # File upload middleware
│ ├── 📂 models/
│ │ ├── User.js # User schema
│ │ ├── Car.js # Car schema
│ │ └── Booking.js # Booking schema
│ ├── 📂 routes/
│ │ ├── userRoutes.js # User API routes
│ │ └── ownerRoutes.js # Owner API routes
│ ├── .env
│ └── server.js # Express app entry point
│
├── 📂 screenshots/ # App screenshots for README
├── .gitignore
├── LICENSE
└── README.md

---

⚙️ Installation & Setup

✅ Prerequisites

Make sure you have the following installed:

• 
• 
• 
• 

---

🔽 Step 1 — Clone the Repository

git clone https://github.com/ARQUM21/car-rental-booking-app.git
cd car-rental-booking-app

🖥️ Step 2 — Backend Setup

cd backend
npm install

📄 Create a .env file inside the backend/ folder:

# ================================
# SERVER CONFIGURATION
# ================================
PORT=5000

# ================================
# DATABASE
# ================================
MONGO_URI=your_mongodb_atlas_connection_string

# ================================
# AUTHENTICATION
# ================================
JWT_SECRET=your_super_secret_jwt_key_here

# ================================
# IMAGEKIT (Image CDN)
# ================================
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id

# ================================
# CLIENT URL (CORS)
# ================================
CLIENT_URL=http://localhost:5173

▶️ Start the backend server:

npm run dev

✅ Backend running at: http://localhost:5000

🌐 Step 3 — Frontend Setup

cd ../frontend
npm install

📄 Create a .env file inside the frontend/ folder:

# ================================
# API BASE URL
# ================================
VITE_BASE_URL=http://localhost:5000

# ================================
# CURRENCY SYMBOL
# ================================
VITE_CURRENCY=Rs

▶️ Start the frontend development server:

npm run dev

✅ Frontend running at: http://localhost:5173

🔗 API Endpoints

🔐 User Auth Routes — /api/user

Method	Endpoint	Auth	Description
POST	/api/user/register	❌	Register new user
POST	/api/user/login	❌	Login & get JWT token
GET	/api/user/data	✅	Get logged-in user data
GET	/api/user/bookings	✅	Get user booking history

🏢 Owner Routes — /api/owner

Method	Endpoint	Auth	Description
POST	/api/owner/add-car	✅	Add a new car listing
GET	/api/owner/cars	✅	Get all owner cars
POST	/api/owner/toggle-car	✅	Toggle car availability
POST	/api/owner/delete-car	✅	Delete a car listing
GET	/api/owner/dashboard	✅	Get dashboard stats & revenue
POST	/api/owner/update-image	✅	Update owner profile image
GET	/api/owner/bookings	✅	Get all bookings for owner

🚗 Car Routes — /api/cars

Method	Endpoint	Auth	Description
GET	/api/cars	❌	Get all available cars
GET	/api/cars/:id	❌	Get single car details

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! 🎉

1. Fork the repository

2. Clone your fork:

    git clone https://github.com/ARQUM21/car-rental-booking-app.git

3. Create your feature branch:

    git checkout -b feature/amazing-feature

4. Commit your changes:

    git commit -m "feat: add amazing feature"

5. Push to the branch:

    git push origin feature/amazing-feature

6. Open a Pull Request 🚀

📌 Commit Convention

    feat:     New feature
    fix:      Bug fix
    docs:     Documentation update
    style:    Code formatting
    refactor: Code refactoring
    test:     Adding tests
    chore:    Maintenance tasks

---

📄 License

    MIT License
    
    Copyright (c) 2025 Muhammad Arqum Tariq
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software — to use, copy, modify, merge, publish, distribute freely.

See the full [LICENSE](https://arena.ai/c/LICENSE) file for details.

---

👨‍💻 Author

Muhammad Arqum Tariq

Full Stack Developer | MERN Stack

* * *

⭐ Support the Project

If you found this project helpful, please give it a ⭐ Star!
It motivates me to build more amazing projects.

---

_{Built with ❤️ by Muhammad Arqum Tariq
⭐ Star this repo if you found it helpful!}