MERN-PH

GARIWALA - Premium Car Rental Platform

Live Demo React Tailwind CSS Firebase

A modern, full-stack MERN car rental platform that connects users with premium vehicle providers across Bangladesh. Built with React 19, featuring stunning animations and seamless user experience.

🌐 Live Link

✨ Main Features

🔐 Secure Authentication System

🚘 Complete Car Management

📚 Smart Booking System

🔍 Advanced Search & Filtering

🎨 Beautiful UI/UX

📱 Fully Responsive

🛠️ Tech Stack

Core Technologies

Authentication

HTTP & State Management

Animation Libraries

UI Enhancements

📁 Project Structure

gariwala-frontend/
├── public/
│   ├── _redirects              # Netlify routing config
│   └── logo.png
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   ├── Navbar.jsx          # Navigation with auth dropdown
│   │   ├── Footer.jsx          # Footer with links & social media
│   │   ├── CarCard.jsx         # Reusable car card with animations
│   │   └── LoadingSpinner.jsx  # Loading state component
│   │   └── ThemeToggle.jsx     # Theme Toggle
│   ├── pages/
│   │   ├── Home.jsx            # Landing page with hero & featured cars
│   │   ├── Login.jsx           # Login with email/Google
│   │   ├── Register.jsx        # Registration with validation
│   │   ├── BrowseCars.jsx      # All cars with filters
│   │   ├── CarDetails.jsx      # Detailed car view with booking
│   │   ├── AddCar.jsx          # Add new car form
│   │   ├── MyListings.jsx      # User's car listings (CRUD)
│   │   ├── MyBookings.jsx      # User's booking history
│   │   └── ErrorPage.jsx       # Custom 404 page
│   │   └── BookCar.jsx         # Car Booking Page
│   │   └── ContactUs.jsx       # Custom Contact Us Page
│   │   └── Dashboard.jsx       # Custom Dashboard Page
│   ├── routes/
│   │   ├── router.jsx          # Route configuration
│   │   └── PrivateRoute.jsx    # Protected route wrapper
│   ├── context/
│   │   └── AuthContext.jsx     # Authentication context
│   ├── firebase/
│   │   └── firebase.config.js  # Firebase initialization
│   ├── App.jsx                 # Main app component
│   ├── main.jsx               # Entry point
│   └── index.css              # Global styles with custom gradients
├── .env                        # Environment variables (not in repo)
├── .gitignore
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md

🚀 Installation & Setup

Prerequisites

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/gariwala-frontend.git
cd gariwala-frontend

2. Install Dependencies

npm install

3. Environment Variables

Create a .env file in the root directory:

# Firebase Configuration
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_project.firebaseapp.com
VITE_projectId=your_project_id
VITE_storageBucket=your_project.appspot.com
VITE_messagingSenderId=123456789
VITE_appId=1:123456:web:abc123

# API Base URL
VITE_API_BASE_URL=https://gariwala-server.vercel.app

⚠️ Important: Never commit .env file to Git!

4. Run Development Server

npm run dev

Visit http://localhost:5173 in your browser.

5. Build for Production

npm run build

🔥 Firebase Setup

1. Create Firebase Project

  1. Go to Firebase Console
  2. Click “Add project”
  3. Enter project name: “gariwala”
  4. Disable Google Analytics (optional)
  5. Click “Create project”

2. Enable Authentication

  1. In Firebase Console, click “Authentication”
  2. Click “Get started”
  3. Enable Email/Password sign-in method
  4. Enable Google sign-in method
  5. Add your email as authorized domain

3. Get Configuration

  1. Go to Project Settings (⚙️ icon)
  2. Scroll to “Your apps”
  3. Click web icon </>
  4. Register app: “gariwala-web”
  5. Copy firebaseConfig values to .env

4. Add Authorized Domains

  1. Go to Authentication → Settings
  2. Scroll to “Authorized domains”
  3. Add:
    • localhost (for development)
    • Your Netlify domain (after deployment)

📦 Key Dependencies

{
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-router-dom": "^7.9.5",
    "firebase": "^12.5.0",
    "axios": "^1.13.2",
    "framer-motion": "^11.x.x",
    "react-simple-typewriter": "^5.x.x",
    "react-tooltip": "^5.x.x",
    "lottie-react": "^2.x.x",
    "sweetalert2": "^11.x.x",
    "react-hot-toast": "^2.6.0",
    "react-icons": "^5.5.0",
    "swiper": "^12.0.3",
    "tailwindcss": "^4.1.17",
    "daisyui": "^5.4.7"
  }
}

🌐 Deployment (Netlify)

Method 1: Drag & Drop

  1. Run npm run build
  2. Go to Netlify
  3. Drag dist folder to deploy zone
  1. Push code to GitHub
  2. Go to Netlify → “Add new site”
  3. Import from Git → Select repository
  4. Build settings:
    • Build command: npm run build
    • Publish directory: dist
  5. Add environment variables:
    • Go to Site settings → Environment variables
    • Add all VITE_* variables
  6. Click “Deploy site”

Important: Configure Redirects

Create public/_redirects:

/*    /index.html   200

This prevents 404 errors on page refresh.

Update Firebase

Add your Netlify domain to Firebase authorized domains:

https://your-app.netlify.app

🎯 Features Breakdown

Home Page

Browse Cars

Car Details (Private)

Add Car (Private)

My Listings (Private)

My Bookings (Private)

🎨 Custom Styling

Gradient Buttons

.btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%);
}

Animations

🔒 Security Features

📊 Performance

🙏 Acknowledgments

🔗 Related Links

🚗 GARIWALA - Car Rental API Server

Live API Node.js Express MongoDB

RESTful API backend for GARIWALA car rental platform. Built with Node.js, Express.js & MongoDB Atlas, providing secure endpoints for car management, user bookings & real-time availability tracking.

🌐 Live Links

✨ Key Features

🚗 Car Management System

📚 Smart Booking System

🔒 Security & Validation

⚡ Performance Features

🛠️ Tech Stack

Technology Version Purpose
Node.js 20.x Runtime environment
Express.js 5.1.0 Web framework
MongoDB 7.0.0 NoSQL database
Mongoose 8.19.3 MongoDB ODM (optional)
CORS 2.8.5 Cross-origin requests
dotenv 17.2.3 Environment variables
bcryptjs 3.0.3 Password hashing (future auth)
jsonwebtoken 9.0.2 JWT tokens (future auth)
firebase-admin 13.6.0 Admin SDK (optional)
nodemon 3.1.10 Development auto-reload

📁 Project Structure

gariwala-server/
├── index.js              # Main server file with all routes
├── vercel.json          # Vercel serverless configuration
├── package.json         # Dependencies and scripts
├── .env                 # Environment variables (not in repo)
├── .gitignore          # Git ignore file
└── README.md           # This file

🚀 Quick Start

Prerequisites

1️⃣ Clone Repository

git clone https://github.com/Taoshif1/PH-A10-Server.git
cd PH-A10-Server

2️⃣ Install Dependencies

npm install

3️⃣ Environment Setup

Create .env file in root directory:

# MongoDB Atlas Connection
DB_USER=your_mongodb_username
DB_PASS=your_mongodb_password

# Server Configuration
PORT=3000

# Optional: Future Authentication
JWT_SECRET=your_super_secret_jwt_key_here

⚠️ NEVER commit .env file to GitHub!

4️⃣ Run Development Server

npm start

Server will run on: http://localhost:3000

You should see:

🚀 GARIWALA Server running on port 3000
✅ MongoDB Connected Successfully!

🗄️ Database Setup (MongoDB Atlas)

Step 1: Create MongoDB Cluster

  1. Go to MongoDB Atlas
  2. Sign in or create free account
  3. Click “Build a Database”
  4. Choose M0 Free tier
  5. Select region closest to you (Singapore for Bangladesh)
  6. Name cluster: Cluster0
  7. Click “Create”

Step 2: Database User

  1. Go to Database Access (left sidebar)
  2. Click “Add New Database User”
  3. Choose Password authentication
  4. Set username: gariwala_admin
  5. Click “Autogenerate Secure Password” (save it!)
  6. Database User Privileges: “Atlas admin”
  7. Click “Add User”

Step 3: Network Access

  1. Go to Network Access (left sidebar)
  2. Click “Add IP Address”
  3. Click “Allow Access from Anywhere”
  4. IP Address: 0.0.0.0/0 (automatically filled)
  5. Click “Confirm”

⚠️ Note: For production, whitelist specific IPs only.

Step 4: Get Connection String

  1. Go to Database (left sidebar)
  2. Click “Connect” on your cluster
  3. Choose “Connect your application”
  4. Driver: Node.js, Version: 5.5 or later
  5. Copy connection string: 
    mongodb+srv://gariwala_admin:<password>@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority
  6. Replace <password> with your actual password
  7. Add to .env: 
    DB_USER=gariwala_admin
DB_PASS=your_actual_password

Step 5: Database Structure

Database Name: gariwalaDB

Collections:

  1. cars - Car listings
  2. bookings - User bookings

📊 Database Schema

Cars Collection

{
  _id: ObjectId("69134b560448341e1c0a985d"),
  name: "Tesla Model 3",                        // Car name
  description: "Luxury electric sedan...",      // Detailed description
  category: "Electric",                         // Sedan|SUV|Luxury|Electric|Hatchback
  price: 120,                                   // Per day price (number)
  location: "Dhaka",                            // City/location
  image: "https://images.unsplash.com/...",    // Car image URL
  providerName: "Elite Motors",                // Owner/provider name
  providerEmail: "elite@example.com",          // Provider email
  status: "available",                          // available|booked
  rating: 4.9,                                  // 1-5 rating (auto: 4.5)
  createdAt: ISODate("2025-01-10T00:00:00Z")  // Auto-generated
}

Bookings Collection

{
  _id: ObjectId("691abc123..."),
  carId: "69134b560448341e1c0a985d",           // Reference to car
  carName: "Tesla Model 3",                    // Stored for quick access
  carImage: "https://...",                     // Car image
  rentPrice: 120,                              // Stored price
  userName: "John Doe",                        // User's name
  userEmail: "john@example.com",               // User's email
  userPhoto: "https://...",                    // User's profile photo
  status: "confirmed",                          // confirmed|cancelled
  createdAt: ISODate("2025-01-13T10:30:00Z")  // Booking timestamp
}

📡 API Endpoints

🏠 Root Endpoint

GET /

Response:

{
  "message": "🚗 GARIWALA Server is Running!",
  "status": "active",
  "endpoints": {
    "allCars": "GET /cars",
    "featuredCars": "GET /cars/featured",
    "singleCar": "GET /cars/:id",
    "userCars": "GET /cars/user/:email",
    "addCar": "POST /cars",
    "updateCar": "PUT /cars/:id",
    "deleteCar": "DELETE /cars/:id",
    "userBookings": "GET /bookings/user/:email",
    "createBooking": "POST /bookings",
    "cancelBooking": "DELETE /bookings/:id"
  }
}

🚗 Car Endpoints

1. Get All Cars

GET /cars

Query Parameters:

Examples:

GET /cars
GET /cars?search=tesla
GET /cars?category=Luxury
GET /cars?category=SUV&sort=price-low

GET /cars/featured

Returns 6 newest cars for homepage display.

Success Response (200):

{
  "success": true,
  "count": 6,
  "cars": [...]
}

3. Get Single Car

GET /cars/:id

Parameters:

Example:

GET /cars/69134b560448341e1c0a985d

Success Response (200):

{
  "success": true,
  "car": {
    "_id": "69134b560448341e1c0a985d",
    "name": "Tesla Model 3",
    "description": "Luxury electric sedan...",
    "category": "Electric",
    "price": 120,
    "location": "Dhaka",
    "image": "https://...",
    "providerName": "Elite Motors",
    "providerEmail": "elite@example.com",
    "status": "available",
    "rating": 4.9,
    "createdAt": "2025-01-10T00:00:00.000Z"
  }
}

Error Response (404):

{
  "success": false,
  "message": "Car not found"
}

4. Get User’s Cars

GET /cars/user/:email

Returns all cars listed by a specific provider.

Example:

GET /cars/user/elite@example.com

Success Response (200):

{
  "success": true,
  "count": 3,
  "cars": [...]
}

5. Add New Car

POST /cars

Auto-Added Fields:

6. Update Car

PUT /cars/:id

Protected Fields (cannot be updated):

7. Delete Car

DELETE /cars/:id

Example:

DELETE /cars/69134b560448341e1c0a985d

📚 Booking Endpoints

1. Get User Bookings

GET /bookings/user/:email

Example:

GET /bookings/user/john@example.com

2. Create Booking

POST /bookings

Automatic Actions:

  1. ✅ Validates car exists
  2. ✅ Checks car is available (not already booked)
  3. ✅ Creates booking record
  4. ✅ Updates car status to “booked”
  5. ✅ Stores car details in booking

Success Response (201):

{
  "success": true,
  "message": "Booking confirmed!",
  "bookingId": "691abc123..."
}

Error Response (400) - Already Booked:

3. Cancel Booking

DELETE /bookings/:id

Example:

DELETE /bookings/691abc123...

Automatic Actions:

  1. ✅ Finds booking
  2. ✅ Deletes booking record
  3. ✅ Updates car status back to “available”

🧪 Testing the API

Using Postman

  1. Import collection or create manually
  2. Set base URL: https://gariwala-server.vercel.app
  3. Test all endpoints
  4. Save responses

Using Thunder Client (VS Code)

  1. Install Thunder Client extension
  2. Create new request
  3. Set URL and method
  4. Test API endpoints

🌐 Deployment (Vercel)

Step 1: Create vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]
    }
  ]
}

Step 2: Install Vercel CLI

npm install -g vercel

Step 3: Login

vercel login

Step 4: Deploy

vercel --prod

Step 5: Add Environment Variables

  1. Go to Vercel Dashboard
  2. Select project
  3. Settings → Environment Variables
  4. Add:
    • DB_USER = your MongoDB username
    • DB_PASS = your MongoDB password
    • PORT = 3000

Step 6: Redeploy

vercel --prod

Your API is now live! 🎉

🔒 CORS Configuration

The server allows requests from:

origin: [
  "http://localhost:5173",           // Local development
  "https://gariwala.netlify.app"    // Production frontend
]

To add more origins:

app.use(cors({
  origin: [
    "http://localhost:5173",
    "https://gariwala.netlify.app",
    "https://your-new-domain.com"     // Add new domain here
  ],
  credentials: true
}));

🐛 Troubleshooting

Issue: MongoDB connection fails

Solution:

  1. Check .env credentials are correct
  2. Verify IP whitelist: 0.0.0.0/0 in MongoDB Atlas
  3. Check MongoDB user has proper permissions
  4. Ensure connection string format is correct

Issue: CORS errors

Solution: Add your frontend URL to CORS origins in index.js:

origin: ["http://localhost:5173", "https://your-app.netlify.app"]

Issue: Vercel deployment fails

Solutions:

  1. Ensure vercel.json exists
  2. Check index.js is the entry point
  3. Verify all dependencies in package.json
  4. Check build logs for specific errors

Issue: API returns 500 error

Check:

  1. MongoDB connection is active
  2. Environment variables are set in Vercel
  3. Check Vercel function logs
  4. Verify request body format

📊 Error Response Format

All errors return consistent structure:

{
  "success": false,
  "message": "Human-readable error message",
  "error": "Technical error details (optional)"
}

HTTP Status Codes

Code Meaning
200 Success
201 Created
400 Bad Request (invalid data)
404 Not Found
500 Internal Server Error

📦 Dependencies Explained

{
  "express": "^5.1.0",           // Web framework
  "mongodb": "^7.0.0",           // Database driver
  "mongoose": "^8.19.3",         // ODM (optional)
  "cors": "^2.8.5",              // Cross-origin requests
  "dotenv": "^17.2.3",           // Environment variables
  "bcryptjs": "^3.0.3",          // Password hashing (future)
  "jsonwebtoken": "^9.0.2",      // JWT auth (future)
  "firebase-admin": "^13.6.0",   // Admin SDK (optional)
  "nodemon": "^3.1.10"           // Dev auto-reload
}

🚀 Performance Optimizations

🔐 Security Best Practices

Implemented ✅

📈 Future Enhancements

📝 Scripts

# Start development server with nodemon
npm start

# Run tests (not implemented yet)
npm test

# Manual start (no auto-reload)
node index.js

🙏 Acknowledgments

📊 Project Stats

Made with ❤️ in Bangladesh 🇧🇩

Live API: GARIWALA SERVER