Urbik - Modern Ride-Sharing Platform

DOCUMENTATION- Notion Doc DEPLOYMENT- Deployed on Vercel

Hi, I’m Shivam Swaroop, a passionate Full-Stack Software Engineer with hands-on experience in building scalable, real-time applications. I have a strong foundation in the MERN stack, cloud integration and modern development practices. My work blends clean architecture, intuitive UI/UX, and high-performance backend systems.

Urbik is my full-stack ride-sharing application built with the MERN stack designed to provide a seamless experience, featuring real-time communication, Google Maps integration, and comprehensive ride management for both passengers and drivers.

Features

User Features

Secure Authentication: JWT-based registration and login system
Ride Booking: Book rides with multiple vehicle options (Car, Bike, Auto, E-Rickshaw)
Real-time Tracking: Live location tracking during rides
Fare Estimation: Dynamic fare calculation based on distance and time
Location Search: Google Maps autocomplete for pickup and destination
Ride History: Track completed and ongoing rides
OTP Verification: Secure ride start verification system
Payment integration: Upcoming feature

Captain (Driver) Features

Driver Registration: Complete profile setup with vehicle details
Real-time Location Updates: Live location broadcasting to the system
Ride Management: Accept, start, and complete ride requests
Earnings Tracking: Monitor ride earnings and statistics
Vehicle Management: Manage multiple vehicle types and details
Status Control: Toggle between active/inactive status

Technical Features

Real-time Communication: Socket.io for live updates and notifications
Google Maps Integration: Geocoding, distance calculation, and autocomplete
Responsive Design: Mobile-first design with Tailwind CSS
Protected Routes: Secure authentication for both users and captains
Token Management: Secure JWT handling with blacklist functionality
Database Optimization: Efficient MongoDB queries with geospatial indexing

Architecture

Urbik/
├── Frontend/                 # React.js Frontend Application
│   ├── src/
│   │   ├── components/      # Reusable UI Components
│   │   │   ├── CaptainDetails.jsx
│   │   │   ├── ConfirmRide.jsx
│   │   │   ├── LiveTracking.jsx
│   │   │   ├── LocationSearchPanel.jsx
│   │   │   ├── RidePopUp.jsx
│   │   │   ├── VehiclePanel.jsx
│   │   │   └── WaitingForDriver.jsx
│   │   ├── context/         # Global State Management
│   │   │   ├── CaptainContext.jsx
│   │   │   ├── SocketContext.jsx
│   │   │   └── UserContext.jsx
│   │   ├── pages/           # Route Components
│   │   │   ├── Home.jsx
│   │   │   ├── Riding.jsx
│   │   │   ├── CaptainHome.jsx
│   │   │   ├── CaptainRiding.jsx
│   │   │   └── Authentication Pages
│   │   └── assets/          # Static Assets
│   └── package.json
│
├── Backend/                  # Node.js Backend API
│   ├── controllers/         # Request Handlers
│   │   ├── user.controller.js
│   │   ├── captain.controller.js
│   │   ├── ride.controller.js
│   │   └── map.controller.js
│   ├── models/              # Database Schemas
│   │   ├── user.model.js
│   │   ├── captain.model.js
│   │   ├── ride.model.js
│   │   └── blacklistToken.model.js
│   ├── routes/              # API Route Definitions
│   │   ├── user.routes.js
│   │   ├── captain.routes.js
│   │   ├── ride.routes.js
│   │   └── maps.routes.js
│   ├── services/            # Business Logic
│   │   ├── user.service.js
│   │   ├── captain.service.js
│   │   ├── ride.service.js
│   │   └── maps.service.js
│   ├── middlewares/         # Custom Middleware
│   │   └── auth.middleware.js
│   ├── db/                  # Database Configuration
│   │   └── db.js
│   ├── app.js               # Express App Configuration
│   ├── server.js            # Server Entry Point
│   ├── socket.js            # Socket.io Configuration
│   └── package.json
│
└── README.md                # Project Documentation

Tech Stack

Frontend

React 19.1.0 - Modern UI library with latest features
Vite - Fast build tool and development server
React Router DOM - Client-side routing
Tailwind CSS 4.1.10 - Utility-first CSS framework
Axios - HTTP client for API communication
Socket.io Client - Real-time communication
Google Maps API - Maps integration and location services
GSAP - High-performance animations
Remixicon - Beautiful icon library

Backend

Node.js - JavaScript runtime environment
Express.js 5.1.0 - Web application framework
MongoDB - NoSQL database
Mongoose 8.16.3 - MongoDB object modeling
Socket.io 4.8.1 - Real-time bidirectional communication
JWT - JSON Web Token authentication
bcrypt - Password hashing
Express Validator - Input validation middleware
Google Maps API - Geocoding and distance services

Development Tools

ESLint - Code linting and formatting
Nodemon - Development server auto-restart
CORS - Cross-origin resource sharing
Cookie Parser - Cookie handling middleware

Quick Start

Prerequisites

Node.js (v16 or higher)
MongoDB (local or cloud instance)
Google Maps API key

Installation

Clone the repository

git clone https://github.com/yourusername/urbik.git
cd urbik

Backend Setup

cd Backend
npm install

# Create .env file
cp .env.example .env
# Add your environment variables:
# MONGODB_URI=mongodb://localhost:27017/urbik
# JWT_SECRET=your_jwt_secret_key
# GOOGLE_MAPS_API_KEY=your_google_maps_api_key
# PORT=4000
# FRONTEND_URL=http://localhost:5173

# Start the backend server
npm run dev

Frontend Setup

cd ../Frontend
npm install

# Create .env file
echo "VITE_BASE_URL=http://localhost:4000" > .env

# Start the frontend development server
npm run dev

Access the Application
- Frontend: http://localhost:5173
- Backend API: http://localhost:4000

Application Flow

User Journey

Registration/Login → User creates account or signs in
Location Selection → Choose pickup and destination locations
Vehicle Selection → Select from available vehicle types
Fare Confirmation → Review and confirm ride fare
Driver Matching → System finds nearby available drivers
Real-time Tracking → Track driver location and ride progress
Ride Completion → Complete ride with OTP verification

Captain Journey

Registration → Register with vehicle details and documents
Go Online → Set status to active and start receiving requests
Ride Requests → Receive and accept ride requests
Navigation → Navigate to pickup location
Ride Start → Verify OTP and start the ride
Ride Completion → Complete ride and receive payment

Authentication & Security

JWT Authentication

Secure token-based authentication for both users and captains
Tokens stored in HTTP-only cookies and localStorage
Automatic token refresh and validation
Token blacklisting for secure logout

Security Features

Password hashing with bcrypt (salt rounds: 10)
Input validation and sanitization
Protected API endpoints with middleware
CORS configuration for secure cross-origin requests
Rate limiting and request validation

Database Schema

User Model

{
  fullName: {
    firstName: String (required, min: 3),
    lastName: String (min: 3)
  },
  email: String (required, unique, validated),
  password: String (required, hashed),
  socketId: String (for real-time communication)
}

Captain Model

{
  fullName: {
    firstName: String (required, min: 3),
    lastName: String (min: 3)
  },
  email: String (required, unique),
  password: String (required, hashed),
  socketId: String,
  status: String (active/inactive),
  vehicle: {
    color: String (required),
    plate: String (required, unique),
    capacity: Number (required),
    vehicleType: String (car/bike/auto/eRikshaw)
  },
  location: {
    lat: Number,
    lng: Number,
    coordinates: [Number] (GeoJSON format)
  }
}

Ride Model

{
  user: ObjectId (ref: User),
  captain: ObjectId (ref: Captain),
  pickup: String (required),
  destination: String (required),
  fare: Number (required),
  status: String (pending/accepted/ongoing/completed/cancelled),
  duration: Number (seconds),
  distance: Number (meters),
  otp: String (6-digit verification),
  paymentId: String,
  orderId: String,
  signature: String
}

API Endpoints

User Endpoints

POST /users/register - User registration
POST /users/login - User authentication
GET /users/profile - Get user profile
GET /users/logout - User logout

Captain Endpoints

POST /captains/register - Captain registration
POST /captains/login - Captain authentication
GET /captains/profile - Get captain profile
GET /captains/logout - Captain logout

Ride Endpoints

POST /rides/create - Create new ride request
GET /rides/get-fare - Calculate ride fare
POST /rides/confirm - Captain confirms ride
GET /rides/start-ride - Start ride with OTP
POST /rides/end-ride - Complete ride

Maps Endpoints

GET /maps/get-coordinates - Get location coordinates
GET /maps/get-distance-time - Calculate distance and time
GET /maps/get-suggestions - Location autocomplete

Real-time Features

Socket.io Events

User Events: join, ride-request, ride-cancelled
Captain Events: join, update-location-captain, ride-accepted
System Events: ride-confirmed, ride-started, ride-ended

Live Tracking

Real-time location updates for captains
Live ride tracking for users
Automatic driver-user matching based on proximity
Dynamic ETA calculations

UI/UX Features

Responsive Design

Mobile-first approach with Tailwind CSS
Optimized for all screen sizes
Touch-friendly interface elements
Fast loading with optimized assets

Interactive Components

Smooth animations with GSAP
Real-time map integration
Dynamic fare calculator
Location search with autocomplete
Loading states and error handling

Deployment

Environment Variables

Backend (.env)

MONGODB_URI=mongodb://localhost:27017/urbik
JWT_SECRET=your_super_secret_jwt_key
GOOGLE_MAPS_API_KEY=your_google_maps_api_key
PORT=4000
FRONTEND_URL=http://localhost:5173
NODE_ENV=development

Frontend (.env)

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

Production Build

# Backend
cd Backend
npm start

# Frontend
cd Frontend
npm run build
npm run preview

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

This project has no license file for details.

Acknowledgments

Google Maps API for location services
Socket.io for real-time communication
MongoDB for flexible data storage
React and Node.js communities for excellent documentation

Support

Regarding any query, email shivamswaroop89@gmail.com or connect me on linkedIn https://www.linkedin.com/in/shivam-swaroop-60083017a or X https://x.com/shivamswaroop89.

Built with ❤️ by Shivam Swaroop

Latest commit

History

Folders and files

Repository files navigation