Skip to content

README.md

Latest commit

 

History

History
150 lines (108 loc) · 3.82 KB

README.md

File metadata and controls

150 lines (108 loc) · 3.82 KB

Ride-Sharing Application (Uber-like)

A full-stack ride-sharing application with real-time ride tracking, driver-user matching, fare calculation, and authentication. Built with MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for real-time communication.

📑 Table of Contents

  1. 📸 UI Screenshots
  2. ✨ Key Features
  3. 🛠️ Installation
  4. 🚀 Usage
  5. 🔒 Protected Routes
  6. 🌐 Real-Time Features
  7. 🛠️ Technologies Used
  8. 📄 License

UI Screenshots

User Login User Signup Ride Booking
Login Signup Booking
Active Ride (User) Driver Home Driver Ride Panel
Riding Driver Home Driver Riding

✨ Key Features

User Features

  • ✅ User registration/login/logout
  • 📍 Address autocomplete suggestions
  • 🚗 Ride booking with fare estimation
  • 🗺️ Real-time ride tracking
  • 🔒 Protected routes with JWT authentication

Driver Features

  • ✅ Driver registration/login/logout
  • 📍 Real-time location sharing (every 10 seconds)
  • 🔔 Ride request notifications
  • 🛣️ Ride confirmation/start/end workflows
  • 💵 Fare calculation based on distance

🛠️ Installation

Backend Setup

  1. Clone repo:

    git clone https://github.com/WizardOfDigits/Uber_Like_App.git

  2. Create .env file:

    # Backend env
 PORT=<your port>
 DB_CONNECT=<mongodb:url>
 JWT_SECRET=<JWT_SECRET_KEY>
 MAPS_API=<Map api / or other map api>

    # frontend env
 VITE_BASE_URL=<Base Url>
 VITE_MAP_API_URL=<Enter Map API URL here>

🚀 Usage

User Flow

  1. Sign Up/Login at /login
  2. Enter pickup/destination addresses
  3. Select vehicle type (Auto/Car/Motorcycle)
  4. Confirm fare and request ride
  5. Track driver in real-time

Driver Flow

  1. Sign Up/Login at /driver-login
  2. Receive ride requests via Socket.IO
  3. Confirm/Reject rides
  4. Start/End rides with OTP verification
  5. Update location automatically

🔒 Protected Routes

User Protection

// Usage in React Router
<Route element={<UserProtectWrapper />}>
  <Route path="/home" element={<Home />} />
  <Route path="/riding" element={<Riding />} />
</Route>

Driver Protection

<Route element={<DriverProtectWrapper />}>
  <Route path="/driver-home" element={<DriverHome />} />
  <Route path="/driver-riding" element={<DriverRiding />} />
</Route>

🌐 Real-Time Features

  • Socket.IO Events:

    // User receives updates
socket.on("ride-confirmed", (ride) => {...});
socket.on("ride-started", (ride) => {...});

// Driver receives requests
socket.on("new-ride", (data) => {...});

🛠️ Technologies Used

  • Frontend: React, GSAP (animations), Socket.IO Client
  • Backend: Express.js, MongoDB, Mongoose, JWT
  • Mapping: Google Maps API
  • Real-Time: Socket.IO

📄 License

MIT License - see LICENSE for details.