It is a full-stack ride-booking web application inspired by Uber, built using the MERN stack. It offers a seamless experience for both riders and drivers with real-time tracking, Google Maps integration, and secure authentication.
| Layer | Technology |
|---|---|
| Frontend | React.js, Tailwind CSS |
| Backend | Node.js, Express.js |
| Database | MongoDB |
| Real-time | Socket.io |
| Maps | Google Maps API |
- User & Captain (driver) authentication with JWT
- Live location suggestions powered by Google Maps
- Distance & time calculation between pickup and drop
- Real-time ride tracking with Socket.io
- Clean and responsive UI for both riders and drivers
- Separate flows for Riders and Captains
Uber_clone/
├── nextTrip/
│ ├── Backend/
│ │ ├── controllers/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── middlewares/
│ │ └── server.js
│ ├── frontend/
│ │ ├── src/
│ │ │ ├── pages/
│ │ │ ├── context/
│ │ │ └── main.jsx
│ │ └── vite.config.js
├── .gitignore
├── package.json
└── README.md
- Node.js installed
- MongoDB connection (local or Atlas)
- Google Maps API Key
git clone https://github.com/anushkaasarraf/NextTrip-MERN-Stack.git
cd NextTrip-MERN-Stackcd nextTrip/Backend
npm installCreate a .env file in the Backend folder:
PORT=4000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
GOOGLE_MAPS_API_KEY=your_google_maps_key
Start the backend:
npx nodemon server.jscd nextTrip/frontend
npm install
npm run dev| Page | Description |
|---|---|
| Start | Landing/welcome page |
| User Login / Signup | Rider authentication |
| Captain Login / Signup | Driver authentication |
| Home | Ride booking screen |
| Riding | Active ride screen for user |
| Captain Home | Driver dashboard |
| Captain Riding | Active ride screen for captain |
Built by following the Sheryians Coding School MERN Stack Masterclass. Extended and customized independently as a personal project — nextTrip.
This project is licensed under the MIT License.