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.
- πΈ UI Screenshots
- β¨ Key Features
- π οΈ Installation
- π Usage
- π Protected Routes
- π Real-Time Features
- π οΈ Technologies Used
- π License
User Login | User Signup | Ride Booking |
---|---|---|
![]() |
![]() |
![]() |
Active Ride (User) | Driver Home | Driver Ride Panel |
---|---|---|
![]() |
![]() |
![]() |
- β User registration/login/logout
- π Address autocomplete suggestions
- π Ride booking with fare estimation
- πΊοΈ Real-time ride tracking
- π Protected routes with JWT authentication
- β Driver registration/login/logout
- π Real-time location sharing (every 10 seconds)
- π Ride request notifications
- π£οΈ Ride confirmation/start/end workflows
- π΅ Fare calculation based on distance
-
Clone repo:
git clone https://github.com/WizardOfDigits/Uber_Like_App.git
-
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>
- Sign Up/Login at
/login
- Enter pickup/destination addresses
- Select vehicle type (Auto/Car/Motorcycle)
- Confirm fare and request ride
- Track driver in real-time
- Sign Up/Login at
/driver-login
- Receive ride requests via Socket.IO
- Confirm/Reject rides
- Start/End rides with OTP verification
- Update location automatically
// Usage in React Router
<Route element={<UserProtectWrapper />}>
<Route path="/home" element={<Home />} />
<Route path="/riding" element={<Riding />} />
</Route>
<Route element={<DriverProtectWrapper />}>
<Route path="/driver-home" element={<DriverHome />} />
<Route path="/driver-riding" element={<DriverRiding />} />
</Route>
-
Socket.IO Events:
// User receives updates socket.on("ride-confirmed", (ride) => {...}); socket.on("ride-started", (ride) => {...}); // Driver receives requests socket.on("new-ride", (data) => {...});
- Frontend: React, GSAP (animations), Socket.IO Client
- Backend: Express.js, MongoDB, Mongoose, JWT
- Mapping: Google Maps API
- Real-Time: Socket.IO
MIT License - see LICENSE for details.