How to Build a Ride Hailing Platform with Lovable

1Set up a ride-hailing platform schema in Supabase with PostGIS.
2
3First, enable PostGIS: CREATE EXTENSION IF NOT EXISTS postgis;
4
5Tables:
6
71. driver_profiles: id (references auth.users), vehicle_make, vehicle_model, vehicle_plate, license_number, is_online (bool default false), average_rating (numeric default 5.0), total_rides (int default 0), created_at
8
92. driver_locations: id, driver_id (references driver_profiles, UNIQUE), location (geography(Point, 4326)), heading (int), speed_kmh (int), updated_at
10
113. rides: id, rider_id (references auth.users), driver_id (references driver_profiles, nullable), pickup_address (text), pickup_location (geography(Point, 4326)), destination_address (text), destination_location (geography(Point, 4326)), status (text: searching|driver_assigned|en_route|arrived|in_progress|completed|cancelled), fare_cents (int), surge_multiplier (numeric default 1.0), distance_km (numeric), duration_minutes (int), rider_rating (int nullable), driver_rating (int nullable), requested_at, accepted_at, started_at, completed_at
12
134. surge_config: id, area_name (text), multiplier (numeric default 1.0), updated_at
14
15RLS:
16- driver_profiles: public SELECT, own UPDATE
17- driver_locations: public SELECT (riders need to see driver positions), driver own INSERT/UPDATE
18- rides: rider can SELECT and INSERT their own rides; driver can SELECT rides assigned to them or searching rides; driver can UPDATE status on their assigned ride
19
20Index: CREATE INDEX ON driver_locations USING GIST(location);
21Index: CREATE INDEX ON rides(status, requested_at DESC);

1// src/hooks/useDriverLocationBroadcast.ts
2// Runs in the DRIVER's app — sends location every 3 seconds
3import { useEffect, useRef } from 'react'
4import { supabase } from '@/lib/supabase'
5import { useAuth } from '@/hooks/useAuth'
6
7export function useDriverLocationBroadcast(rideId: string | null, isOnline: boolean) {
8  const { user } = useAuth()
9  const channelRef = useRef<ReturnType<typeof supabase.channel> | null>(null)
10  const intervalRef = useRef<ReturnType<typeof setInterval>>()
11
12  useEffect(() => {
13    if (!rideId || !isOnline || !user?.id) return
14
15    const channel = supabase.channel(`ride:${rideId}:location`)
16    channelRef.current = channel
17    channel.subscribe()
18
19    intervalRef.current = setInterval(() => {
20      if (!navigator.geolocation) return
21      navigator.geolocation.getCurrentPosition((pos) => {
22        channel.send({
23          type: 'broadcast',
24          event: 'location',
25          payload: {
26            driver_id: user.id,
27            lat: pos.coords.latitude,
28            lng: pos.coords.longitude,
29            heading: pos.coords.heading ?? 0,
30            timestamp: Date.now(),
31          },
32        })
33      })
34    }, 3000)
35
36    return () => {
37      clearInterval(intervalRef.current)
38      supabase.removeChannel(channel)
39    }
40  }, [rideId, isOnline, user?.id])
41}
42
43// src/hooks/useRiderLocationSubscription.ts
44// Runs in the RIDER's app — receives driver location
45import { useEffect, useState } from 'react'
46import { supabase } from '@/lib/supabase'
47
48type DriverLocation = { driver_id: string; lat: number; lng: number; heading: number }
49
50export function useRiderLocationSubscription(rideId: string | null) {
51  const [driverLocation, setDriverLocation] = useState<DriverLocation | null>(null)
52
53  useEffect(() => {
54    if (!rideId) return
55    const channel = supabase
56      .channel(`ride:${rideId}:location`)
57      .on('broadcast', { event: 'location' }, (payload) => {
58        setDriverLocation(payload.payload as DriverLocation)
59      })
60      .subscribe()
61    return () => { supabase.removeChannel(channel) }
62  }, [rideId])
63
64  return { driverLocation }
65}

1Create two Edge Functions:
2
31. supabase/functions/calculate-fare/index.ts
4- Accept POST: { pickup_lat, pickup_lng, dest_lat, dest_lng }
5- Calculate straight-line distance using ST_Distance via Supabase query: SELECT ST_Distance(ST_Point(pickup_lng, pickup_lat)::geography, ST_Point(dest_lng, dest_lat)::geography) / 1000 AS distance_km
6- Fetch current surge_multiplier from surge_config (latest row)
7- Fare formula: base_fare (2.50) + (distance_km * rate_per_km (1.20)) + (estimated_minutes * rate_per_min (0.25)) * surge_multiplier
8- Estimated minutes: distance_km / 0.4 (average 24km/h urban speed)
9- Return: { fare_cents: Math.round(fare * 100), distance_km, estimated_minutes, surge_multiplier, breakdown: { base, distance_charge, time_charge } }
10
112. supabase/functions/request-ride/index.ts
12- Accept POST: { pickup_lat, pickup_lng, pickup_address, dest_lat, dest_lng, dest_address }
13- Call calculate-fare internally to get fare details
14- INSERT into rides with status='searching'
15- Call find_nearby_drivers() Supabase RPC to get online drivers within 5km
16- If no drivers found, return { status: 'no_drivers' }
17- Insert a driver_requests row for the top 3 nearest drivers (first one to accept gets the ride)
18- Return { ride_id, fare_cents, distance_km, drivers_notified: count }

1Build a RideMap component at src/components/RideMap.tsx using Leaflet.js.
2
3Requirements:
4- Import Leaflet via CDN link in index.html (add the CSS and JS links, not npm — Lovable handles external scripts more reliably this way)
5- Create a div with id='map' and className='w-full h-64 rounded-lg'
6- Initialize the Leaflet map in a useEffect on mount, centered on the pickup coordinates
7- Three markers:
8  - Pickup: green circle marker with a 'P' label
9  - Destination: red circle marker with a 'D' label
10  - Driver: a car icon custom marker (use a DivIcon with a car emoji character)
11- Subscribe to useRiderLocationSubscription(rideId) and update the driver marker position when driverLocation changes: driverMarker.setLatLng([lat, lng])
12- Smooth animation: use Leaflet's marker.setLatLng with a pan animation when the driver is within view
13- Show a polyline from the driver's current position to the pickup point using L.polyline([driverPos, pickupPos], { color: 'blue', dashArray: '5, 10' })
14- Props: pickupLat, pickupLng, destLat, destLng, rideId (nullable)
15- When rideId is null, show only pickup and destination markers

1Build the post-ride rating flow.
2
3Requirements:
4
51. Subscribe to Realtime UPDATE events on rides for the active ride_id. When status changes to 'completed', open a Rating Dialog automatically.
6
72. Rating Dialog component (src/components/RatingDialog.tsx):
8   - Star rating input: 5 star icons, clicking fills stars 1 through N. Use a HoverCard or simple onClick handler to track selected star count.
9   - Optional text comment textarea (max 200 chars)
10   - 'Submit Rating' Button
11   - 'Skip' Button (sets a default 5-star rating)
12
133. On submit:
14   - For rider rating the driver: UPDATE rides SET driver_rating = stars WHERE id = rideId
15   - For driver rating the rider: UPDATE rides SET rider_rating = stars WHERE id = rideId
16   - After both ratings are submitted, recalculate the driver's average_rating: call an RPC function update_driver_rating(driver_id) that recomputes the average from all completed rides
17
184. RPC function update_driver_rating(p_driver_id uuid):
19   UPDATE driver_profiles
20   SET average_rating = (
21     SELECT AVG(driver_rating)::numeric(3,1)
22     FROM rides
23     WHERE driver_id = p_driver_id AND driver_rating IS NOT NULL
24   ), total_rides = (SELECT COUNT(*) FROM rides WHERE driver_id = p_driver_id AND status = 'completed')
25   WHERE id = p_driver_id
26
275. Show the driver's average_rating Badge (a star icon + number) on the driver card during the ride