WeGo Ride Hailing SaaS

WeGo is a comprehensive ride-sharing platform that combines the convenience of modern ride-hailing services with robust SaaS capabilities. The platform features real-time ride tracking, subscription management, and a complete admin dashboard for fleet operations.

Features

For Riders

• Real-time Ride Booking: Instant ride requests with live driver tracking
• Multiple Payment Options: Secure payment processing with subscription plans
• Ride History: Complete trip history with receipts and ratings
• Live Tracking: Real-time GPS tracking of your ride
• Driver Ratings: Rate and review drivers after each trip

For Drivers

• Driver Dashboard: Comprehensive earnings and trip management
• Real-time Notifications: Instant ride requests and updates
• Route Optimization: Efficient navigation and route suggestions
• Earnings Analytics: Detailed income tracking and analytics
• Profile Management: Driver verification and document upload

For Admins

• Fleet Management: Complete oversight of drivers and vehicles
• Analytics Dashboard: Revenue, trip, and user analytics
• Subscription Management: Handle user subscriptions and billing
• Real-time Monitoring: Live view of all active rides
• User Management: Admin controls for riders and drivers

Architecture

Frontend

• Next.js 14: React framework with App Router for optimal performance
• Tailwind CSS: Utility-first CSS framework for responsive design
• Zustand: Lightweight state management for real-time data
• TypeScript: Type-safe development across the entire application

Backend & Database

• Supabase: Backend-as-a-Service for real-time database and authentication
• Prisma: Type-safe database ORM with automatic migrations
• PostgreSQL: Robust relational database for complex queries

Authentication & Security

• Kinde: Modern authentication with social login support
• Row Level Security: Database-level security policies
• API Route Protection: Secure server-side API endpoints

Real-time Features

• WebSocket Connections: Live ride tracking and notifications
• Real-time Database: Instant updates for ride status changes
• Push Notifications: Real-time alerts for riders and drivers

Tech Stack

Core Technologies

• Next.js 14 – Full-stack React framework with App Router
• TypeScript – Static type checking for reliable code
• Tailwind CSS – Utility-first CSS framework
• Prisma – Next-generation ORM for type-safe database access

Database & Backend

• Supabase – Open source Firebase alternative
• PostgreSQL – Advanced open source relational database
• Real-time Subscriptions – Live data synchronization

Authentication & Security

• Kinde – Modern authentication platform
• JWT Tokens – Secure user session management
• API Security – Protected routes and data validation

State Management & UI

• Zustand – Lightweight state management
• React Hook Form – Performant forms with validation
• Radix UI – Accessible component primitives
• Lucide React – Beautiful icon library

Deployment & DevOps

• Vercel – Deployment and hosting platform
• GitHub Actions – CI/CD pipeline
• Environment Variables – Secure configuration management

Installation

Clone the repository:

git clone https://github.com/yethuhlaing/ride-sharing-web-application.git
cd ride-sharing-web-application

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account
• Kinde account

Environment Setup

1. Install dependencies:

npm install

2. Copy environment variables:

cp .env.example .env.local

3. Configure your .env.local file:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
 
# Kinde Authentication
KINDE_CLIENT_ID=your_kinde_client_id
KINDE_CLIENT_SECRET=your_kinde_client_secret
KINDE_ISSUER_URL=your_kinde_issuer_url
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard
 
# Database
DATABASE_URL=your_database_url
 
# Payment Processing (if applicable)
STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key

4. Set up the database:

npx prisma generate
npx prisma db push

5. Run the development server:

npm run dev

Visit http://localhost:3000 to see the application.

Project Structure

├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication pages
│   ├── (dashboard)/       # Protected dashboard routes
│   ├── api/               # API routes
│   └── globals.css        # Global styles
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components
│   ├── forms/            # Form components
│   └── dashboard/        # Dashboard-specific components
├── lib/                  # Utility functions and configurations
│   ├── db.ts            # Database configuration
│   ├── auth.ts          # Authentication helpers
│   └── utils.ts         # General utilities
├── prisma/              # Database schema and migrations
├── store/               # Zustand state management
└── types/               # TypeScript type definitions

Key Features Implementation

Real-time Ride Tracking

• WebSocket connections for live location updates
• Real-time driver-rider matching algorithm
• Live ride status updates and notifications

Subscription Management

• Flexible subscription tiers for riders and drivers
• Automated billing and payment processing
• Usage-based pricing models

Admin Dashboard

• Comprehensive analytics and reporting
• Fleet management and driver onboarding
• Real-time system monitoring and alerts