How to Build Ride hailing platform with V0

1// Paste this prompt into V0's AI chat:
2// Build a ride-hailing platform. First, enable PostGIS:
3// CREATE EXTENSION IF NOT EXISTS postgis;
4//
5// Create a Supabase schema with:
6// 1. riders: id (uuid PK), user_id (uuid FK UNIQUE), first_name (text), last_name (text), phone (text), payment_method_id (text), rating (numeric DEFAULT 5.0), created_at (timestamptz)
7// 2. drivers: id (uuid PK), user_id (uuid FK UNIQUE), first_name (text), last_name (text), phone (text), vehicle_make (text), vehicle_model (text), vehicle_plate (text), license_number (text), status (text CHECK offline/available/busy), current_location (geography(Point, 4326)), rating (numeric DEFAULT 5.0), created_at (timestamptz)
8//    Add a spatial index: CREATE INDEX idx_drivers_location ON drivers USING GIST (current_location)
9// 3. rides: id (uuid PK), rider_id (uuid FK), driver_id (uuid FK), pickup_location (geography(Point, 4326)), dropoff_location (geography(Point, 4326)), pickup_address (text), dropoff_address (text), status (text CHECK requested/matching/accepted/arriving/in_progress/completed/cancelled), fare_estimate (integer), fare_final (integer), distance_meters (integer), duration_seconds (integer), requested_at (timestamptz), completed_at (timestamptz)
10// 4. ride_ratings: id (uuid PK), ride_id (uuid FK), from_user_id (uuid FK), to_user_id (uuid FK), rating (integer CHECK 1-5), comment (text), created_at (timestamptz)
11// Enable Supabase Realtime on rides and drivers tables.
12// RLS: riders see own rides, drivers see assigned rides, driver location updates only by self.
13// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a rider page at app/ride/page.tsx.
3// Requirements:
4// - Interactive map using @vis.gl/react-google-maps showing the rider's current location
5// - Tap or search to set pickup and dropoff locations (markers on map)
6// - Card at bottom showing pickup/dropoff addresses, estimated fare, estimated time
7// - "Request Ride" Button that calls POST /api/rides/request
8// - After requesting: Skeleton loading state while matching
9// - Once matched: show driver Card with Avatar, name, vehicle info, rating Badge
10// - Live driver location on map via Supabase Realtime subscription on drivers table
11// - Ride status Badge (matching → accepted → arriving → in_progress → completed)
12// - "Cancel Ride" Button with AlertDialog confirmation (only before in_progress)
13// - On completion: rating Dialog with 1-5 stars and optional comment
14// - 'use client' for the map and Realtime listener
15// - Use shadcn/ui Card, Badge, Avatar, Button, AlertDialog, Skeleton, Toast, Sheet

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4
5export async function requestRide(formData: FormData) {
6  const supabase = await createClient()
7  const { data: { user } } = await supabase.auth.getUser()
8  if (!user) throw new Error('Must be logged in')
9
10  const pickupLat = parseFloat(formData.get('pickup_lat') as string)
11  const pickupLng = parseFloat(formData.get('pickup_lng') as string)
12  const dropoffLat = parseFloat(formData.get('dropoff_lat') as string)
13  const dropoffLng = parseFloat(formData.get('dropoff_lng') as string)
14
15  // Find nearest available driver within 5km and atomically set to busy
16  const { data: driver, error: matchError } = await supabase.rpc(
17    'match_nearest_driver',
18    {
19      p_pickup_lng: pickupLng,
20      p_pickup_lat: pickupLat,
21      p_radius_meters: 5000,
22    }
23  )
24
25  if (matchError || !driver) {
26    throw new Error('No drivers available nearby')
27  }
28
29  const { data: ride } = await supabase
30    .from('rides')
31    .insert({
32      rider_id: user.id,
33      driver_id: driver.id,
34      pickup_location: `POINT(${pickupLng} ${pickupLat})`,
35      dropoff_location: `POINT(${dropoffLng} ${dropoffLat})`,
36      pickup_address: formData.get('pickup_address') as string,
37      dropoff_address: formData.get('dropoff_address') as string,
38      fare_estimate: parseInt(formData.get('fare_estimate') as string),
39      status: 'accepted',
40      requested_at: new Date().toISOString(),
41    })
42    .select()
43    .single()
44
45  return ride
46}

1// Paste this prompt into V0's AI chat:
2// Build a driver page at app/driver/page.tsx and a ride completion API.
3// Driver page requirements:
4// - Map showing current location and active ride route
5// - When offline: Toggle Switch to go online (sets status to 'available', starts location broadcasting)
6// - When available: waiting Card with Skeleton
7// - Incoming ride: Card showing rider Avatar, pickup address, estimated fare, distance
8//   - Accept Button and Reject Button with 15-second auto-reject countdown
9// - During ride: navigation view with pickup/dropoff markers, status progression Buttons
10//   - "Arrived at Pickup" → "Start Ride" → "Complete Ride"
11// - Supabase Realtime subscription on rides table filtered by driver_id
12// - Location update: broadcast driver position every 5 seconds via /api/rides/[id]/update-location
13//
14// Ride completion API at app/api/rides/[id]/complete/route.ts:
15// - Calculate final fare from distance_meters and duration_seconds
16// - Create Stripe PaymentIntent with rider's payment_method_id
17// - Update ride with fare_final and status 'completed'
18// - Return ride summary
19//
20// Stripe webhook at app/api/webhooks/stripe/route.ts:
21// - Verify signature using request.text() for raw body
22// - Handle payment_intent.succeeded — confirm ride payment
23//
24// Use shadcn/ui Card, Badge, Avatar, Button, Switch, AlertDialog, Toast, Skeleton