QuickRide
QuickRide is a MERN Stack based ride booking web application that replicates the core functionalities of Uber, OLA, etc. This app includes user and captain registration and login, ride requests, real-time geolocation, fare calculation, and ride management.
Install / Use
/learn @asif-khan-2k19/QuickRideREADME
QuickRide - Full Stack Ride Booking Application
QuickRide is a feature-rich project built using modern web technologies. It replicates the core features and functionalities of the existing ride booking platforms, including user authentication, ride booking, real-time location tracking, fare calculation and real-time communication. The application features a clean and responsive user interface, ensuring an intuitive user experience. Designed as a learning and portfolio project, it showcases skills in frontend and backend development, API integration, and real-time features.
⭐ If you found this project helpful or interesting, please consider giving it a star on GitHub! It helps others discover the project and keeps me motivated to improve it. ⭐
📚 Table of Contents
⚙️ Tech Stack
<p align="center"> <img src="https://skillicons.dev/icons?i=html,css,js,react,nodejs,express,mongo,tailwind,gcp,npm,vercel,git,gmail,postman&perline=7" /> </p>| Category | Technologies / Tools | | ------------------ | --------------------------------------------------------------------- | | Frontend | HTML, CSS, React.js, Tailwind CSS, Google Maps | | Backend | Node.js, Express.js, MongoDB, Socket IO, NodeMailer, Google Maps APIs | | Authentication | JWT (JSON Web Token), bcrypt | | Deployment | Vercel, Render | | Dev Tools | Postman, npm, Nodemon, ESLint, Custom Logger |
✨ Features
🔐 Authentication & Authorization
- Secure email/password login with full form validation
- Email verification and logout functionality
- Forgot and change password support
- Role-based access control (User and Captain)
- Session handling and route protection (unauthorized access is blocked)
🧑🏻 User Management
- Edit personal profile details (name, email, phone)
- Ride history tracking
- Form validation for all user inputs
📍 Location & Mapping
- Pickup and destination selection with address auto-complete
- Real-time location tracking on interactive maps
- Route visualization with distance and estimated time calculation
🚖 Ride Booking System
- Supports multiple ride types: Car, Bike, and Auto
- Live ride status updates: Pending, Accepted, Ongoing, Completed, Cancelled
- Concurrency control: A ride request can only be accepted by one captain
- Automatic ride cancellation after timeout
- Accurate fare estimation based on distance and time
🔄 Real-Time Updates
- Socket-based updates for ride status and live locations
- Real-time in-app chat between rider and captain
- Chat messages are stored in the database with timestamps
- Access control ensures only assigned rider and captain can view the conversation
👨✈️ Captain (Driver) Interface
- Accept or reject incoming ride requests
- Real-time updates for trip progress
- Role-specific access to ride-related actions
🧰 System Utilities
- Custom logger to persist frontend and backend logs in the database
- Force reset feature to clear all local app data and recover from unstable states
- Popup alert system for immediate feedback (success, error, warning)
🖼️ Screenshots
<details> <summary>Authentication</summary>
⚡ Quick Start
📁 Project Structure
📂 Backend // Node.js + Express server
📂 Frontend // React.js application
1. Clone the Repository
git clone https://github.com/asif-khan-2k19/QuickRide.git
cd QuickRide
2. Install Dependencies
Frontend
cd Frontend
npm install
Backend
cd ../Backend
npm install
3. Run the Application
Frontend (React + Vite)
npm run dev
Backend (Node.js + Express)
npm run dev
4. Open the App
- Frontend: http://localhost:5173
- Backend: http://localhost:3000
🌐 Environment Variables
Create .env files in both Frontend/ and Backend/ directories.
.env.example files are already present in the folders.
Frontend .env
VITE_SERVER_URL=http://localhost:3000
VITE_ENVIRONMENT=development
VITE_RIDE_TIMEOUT=90000
Backend .env
PORT=3000
RELOAD_INTERVAL = 10
SERVER_URL=http://localhost:3000
CLIENT_URL=http://localhost:5173
ENVIRONMENT=development
MONGODB_PROD_URL=<your-mongodb-atlas-url>
MONGODB_DEV_URL=mongodb://127.0.0.1:27017/quickRide
JWT_SECRET=<your-jwt-secret>
GOOGLE_MAPS_API=<your-google-maps-api-key>
MAIL_USER=<your-gmail-id>
MAIL_PASS=<your-app-password>
🤝 Contributing
We welcome community contributions! To contribute:
- Star this repository
- Fork this repository
- Create a new branch (
git checkout -b feature/YourFeature) - Commit your changes (
git commit -m 'Add your feature description...') - Push to the branch (
git push origin feature/YourFeature) - Create a Pull Request
📝 License
This project is licensed under the MIT License.
Ready to contribute? Let’s build something amazing together.
