Skip to content

Sarg3n7/Uber-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš– MERN Ride Booking Application

A full-fledged Uber-like ride booking application built with the MERN stack, featuring real-time ride updates with Socket.IO and Google Maps integration for location search and live tracking.


✨ Features

  • πŸ‘€ User & Captain Authentication (JWT-based login/signup/logout).
  • πŸš— Ride Booking System with live ride status (Looking, Waiting, Riding, Finished).
  • πŸ—ΊοΈ Google Maps API Integration for location search, suggestions, and live tracking.
  • πŸ”„ Real-Time Communication between user and captain using Socket.IO.
  • πŸ›‘οΈ Protected Routes for both users and captains.
  • πŸ“± Modern React frontend styled with Tailwind CSS.
  • 🌐 REST APIs with Express.js backend & MongoDB as database.

πŸ› οΈ Tech Stack

Frontend

  • React 19
  • Vite
  • Tailwind CSS
  • Socket.IO Client
  • @react-google-maps/api

Backend

  • Node.js + Express.js
  • MongoDB + Mongoose
  • Socket.IO
  • JWT Authentication
  • Axios

πŸ“‚ Project Structure

Backend (/Backend)

controllers/     β†’ Handles request/response logic
db/              β†’ Database connection (MongoDB)
middlewares/     β†’ Authentication middleware
models/          β†’ Mongoose schemas for User, Captain, Ride
routes/          β†’ API routes (User, Captain, Ride, Maps)
services/        β†’ Business logic & third-party integrations
socket.js        β†’ Socket.IO setup
app.js           β†’ Express app config
server.js        β†’ Entry point (runs server)
.env             β†’ Environment variables

Frontend (/frontend)

components/      β†’ Reusable UI components
context/         β†’ React Contexts (User, Captain, Socket)
pages/           β†’ Pages for Users & Captains
App.jsx          β†’ Routing setup
main.jsx         β†’ Entry point
.env             β†’ Frontend environment variables

βš™οΈ Installation & Setup

1. Clone the Repository

git clone https://github.com/Sarg3n7/Uber-Clone.git
cd Uber-Clone

2. Install Dependencies

Backend

cd Backend
npm install

Frontend

cd ../frontend
npm install

3. Setup Environment Variables

Both Backend and frontend have a .env.example file.

  1. Copy .env.example β†’ .env
    cp .env.example .env
  2. Update your .env with actual values. Example:

Backend/.env

PORT=5000
MONGO_URI=for example : mongodb://0.0.0.0/uber-clone
JWT_SECRET=your_secret_key
GOOGLE_MAPS_API=your_google_maps_api_key

frontend/.env

VITE_BASE_URL=http://localhost:4000
VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

🌍 How to Generate Google Maps API Key

  1. Go to Google Cloud Console.
  2. Create a new project (or select an existing one).
  3. Navigate to APIs & Services β†’ Credentials.
  4. Click Create Credentials β†’ API Key.
  5. Copy the generated key and paste it into your .env files.
  6. Enable the following APIs:
    • Maps JavaScript API
    • Places API
    • Geocoding API

⚠️ Ensure that billing is enabled on your Google Cloud account.


🚦 Running the Application

Start Backend

cd Backend
npx nodemon

Start Frontend

cd frontend
npm run dev

Open the frontend in your browser β†’ http://localhost:5173 (default Vite port). Go to console and change the dimensions to a mobile screen.


πŸ”„ Workflow of Routes & Services

πŸ§‘ User Flow

  • Signup/Login β†’ user.routes.js β†’ user.controller.js β†’ user.service.js
  • Book Ride β†’ ride.routes.js β†’ ride.controller.js β†’ ride.service.js
  • Get Suggestions β†’ maps.routes.js β†’ map.controller.js β†’ maps.service.js

πŸš– Captain Flow

  • Signup/Login β†’ captain.routes.js β†’ captain.controller.js β†’ captain.service.js
  • Accept Ride β†’ ride.routes.js β†’ ride.controller.js β†’ ride.service.js

🌍 Maps Service

  • Autocomplete & Place Details β†’ maps.service.js (Google Maps API)

πŸ”Œ Socket.IO Flow

  • socket.js manages real-time ride updates.
  • Used in UserContext and CaptainContext to emit/listen to ride events.

πŸ“Έ Screenshots

🏠 Home Page

Home Page

πŸš— Captain SignIn

Captain SignIn

πŸ“ Captain Live Tracking

Caprain Live Tracking

🀝 Contributing

  1. Fork the repo
  2. Create your feature branch (git checkout -b feature/foo)
  3. Commit changes (git commit -m 'Add foo')
  4. Push to branch (git push origin feature/foo)
  5. Create a Pull Request

πŸ“œ License

MIT License

Copyright (c) 2025 Sarg3n7

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

πŸš– A full-stack ride booking app built with MERN, featuring real-time ride updates with Socket.IO and Google Maps integration for location search & live tracking. Includes JWT-based auth for users & captains, secure APIs, and a modern React + Tailwind frontend.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages