🚗 RideWave - Real-Time Full-Stack Car Booking Mobile Platform

RideWave is a production-ready, real-time car booking platform built with Expo React Native, TypeScript, Node.js/Express, WebSockets, and Prisma ORM. The platform enables seamless ride dispatching, instant geolocation tracking, driver request matching, and push notifications.

---

📱 Live Application Screenshots

The entire system was tested end-to-end with the backend server and mobile client running. Below is the live UI walkthrough across Rider and Driver partner apps:

👤 Rider Experience

1. Onboarding Slider	2. Phone OTP Authentication

3. Rider Home Dashboard	4. Rider Services & Options

🚘 Driver Partner Experience

5. Driver Partner Dashboard	6. Driver Earnings & Trip History

---

✨ Features Overview

👤 Rider Experience

• Interactive Onboarding Slider: Feature highlights and fast app onboarding.
• Phone OTP Authentication: Secure login via Twilio SMS OTP verification.
• Interactive Google Maps Integration: Live map view with origin/destination pins and route polylines.
• Fare & Vehicle Estimation: Dynamic ride charge calculation based on distance and driver rates.
• Real-Time Driver Tracking: Live WebSocket coordinate streaming to follow your assigned driver.

🚘 Driver Experience

• Driver Profile & Onboarding: Register vehicle details (Car, Bike, Auto), license number, and custom per-km rates.
• Online/Offline Status Toggle: Dynamic active status updating state in the database.
• Ride Request Modal: Incoming ride broadcast notifications with fare breakdowns, distance, and timer.
• Driver Dashboard: Earnings overview, total rides completed, and ride history.

⚙️ Backend & Real-Time Engine

• RESTful API: Node.js & Express endpoints built with TypeScript.
• Real-Time WebSockets: Standalone ws server handling spatial coordinate streaming and instant message broadcasting.
• Database ORM: Prisma ORM with SQLite (local development) / Neon PostgreSQL (production).
• Push Notifications: Integrated Expo Push Notifications for ride status updates.

---

🏗️ System Architecture

                       +-----------------------------+
                       |       Expo Mobile App       |
                       |  (Rider App & Driver App)   |
                       +--------------+--------------+
                                      |
                +---------------------+---------------------+
                | HTTP REST Requests  | WebSockets (ws://)  |
                v                     v                     v
      +-------------------+   +---------------+   +-------------------+
      | Express REST API  |   | Socket Server |   | Expo Push Service |
      | (Node + TS + Auth)|   | (Real-time)   |   | (APNs / FCM)      |
      +---------+---------+   +---------------+   +-------------------+
                |
                v
      +-------------------+
      |  Prisma ORM &     |
      | PostgreSQL / DB   |
      +-------------------+

---

🛠️ Tech Stack

• Mobile Frontend: Expo React Native, Expo Router v3, TypeScript, Lucide Icons, React Native Maps.
• Backend API: Node.js, Express.js, TypeScript, JWT Authentication.
• Database: Prisma ORM, SQLite / Neon PostgreSQL.
• Real-Time Messaging: Node.js ws WebSocket Server.
• SMS & Auth: Twilio SMS API for OTP verification.
• Location Services: Google Maps SDK, Google Directions API, Google Places Autocomplete.

---

📁 Repository Structure

ridewave/
├── assets/
│   └── screenshots/         # Application screenshot assets
│       ├── app_onboarding.png
│       ├── app_login.png
│       ├── rider_home.png
│       ├── rider_services.png
│       ├── driver_dashboard.png
│       └── driver_history.png
├── mobile/                  # React Native Expo Mobile App
│   ├── app/                 # Expo Router app pages & routes
│   │   ├── (auth)/          # Rider authentication screens
│   │   ├── (driver-auth)/   # Driver authentication screens
│   │   ├── (driver-tabs)/   # Driver bottom tabs navigation
│   │   ├── (tabs)/          # Rider bottom tabs navigation
│   │   ├── _layout.tsx      # Root app layout
│   │   └── index.tsx        # App entry & onboarding view
│   ├── assets/              # App images and fonts
│   ├── context/             # React context providers
│   ├── package.json
│   └── tsconfig.json
└── server/                  # Express Node.js & WebSocket Backend
    ├── prisma/              # Prisma schema & migrations
    │   └── schema.prisma
    ├── src/
    │   ├── controllers/     # API request handlers
    │   ├── routes/          # Express API endpoints
    │   ├── websocket.ts     # Real-time WebSocket server
    │   └── index.ts         # Main server entry point
    ├── .env                 # Server environment variables
    ├── package.json
    └── tsconfig.json

---

🚀 Quick Start Guide

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo Go app (for testing on physical mobile devices)

---

1️⃣ Setting Up the Backend Server

# Navigate to server directory
cd server

# Install backend dependencies
npm install

# Run database migrations / generate Prisma client
npx prisma db push

# Start backend REST server & WebSocket server in dev mode
npm run dev

Server runs on http://localhost:8000 and WebSocket listener runs on ws://localhost:8080.

---

2️⃣ Setting Up the Mobile Client

# Navigate to mobile directory
cd ../mobile

# Install mobile dependencies
npm install

# Option A: Run on Web Browser
npm run web

# Option B: Start Expo Dev Server (iOS / Android / Expo Go)
npm run start

---

🔑 Environment Variables Reference

Backend (server/.env)

PORT=8000
NODE_ENV=development
DATABASE_URL="file:./dev.db" # or "postgresql://user:pass@ep-host.neon.tech/ridewave?sslmode=require"
JWT_SECRET_KEY="your_super_secret_jwt_key"
TWILIO_ACCOUNT_SID="ACxxxxxxxxxxxxxxxxxxxxxxxx"
TWILIO_AUTH_TOKEN="your_twilio_auth_token"
TWILIO_PHONE_NUMBER="+1234567890"
WS_PORT=8080

Mobile (mobile/.env / app.json)

{
  "expo": {
    "name": "Ridewave",
    "slug": "ridewave",
    "version": "1.0.0",
    "extra": {
      "EXPO_PUBLIC_SERVER_URI": "http://192.168.1.100:8000",
      "EXPO_PUBLIC_WS_URI": "ws://192.168.1.100:8080",
      "EXPO_PUBLIC_GOOGLE_MAPS_API_KEY": "AIzaSyXxxxxxxxxxxxxxxxx"
    }
  }
}

---

📡 API Endpoints

Method	Endpoint	Description	Protected
POST	/api/v1/user/send-otp	Sends SMS OTP to rider phone	No
POST	/api/v1/user/verify-otp	Verifies OTP & returns Rider JWT token	No
POST	/api/v1/driver/send-otp	Sends SMS OTP to driver phone	No
POST	/api/v1/driver/verify-otp	Verifies OTP & returns Driver JWT token	No
PUT	/api/v1/driver/update-status	Toggles driver Online/Offline status	Yes (Bearer)
POST	/api/v1/driver/new-ride	Driver accepts ride & stores ride entry	Yes (Bearer)
GET	/api/v1/driver/get-rides	Retrieves driver completed & pending rides	Yes (Bearer)

---

📜 License

This project is licensed under the MIT License.