Ride-hailing app

The editor writes a real app. The app talks to its own Supabase backend, and the same code runs on phones and the web.

12 tables, linked the way the app works. Riders read and write their own rides, cards, places and tickets; approved drivers read open requests and their assigned rides; admins read and write everything; nobody changes their own role or admin flag.

Slices of this template's own files. Your copy is a standard Expo project: change it in the editor, by prompt or by hand, or, on a paid plan, download it and keep going in your own editor.

21export function useProfile() {
22  const { client } = useApp();
23  const { user, isAuthenticated } = useAuth();
24  const id = user?.id ?? null;
25
26  return useQuery({
27    queryKey: profileKeys.byId(id ?? 'anon'),
28    queryFn: async () => {
29      if (!id) return null;
30      const { data, error } = await client
31        .from('profiles')
32        .select('id, full_name, phone, role, is_admin, avatar_color, rating, created_at')
33        .eq('id', id)
34        .maybeSingle();
35      if (error) throw error;
36      return (data as Profile) ?? null;
37    },
38    enabled: !!isAuthenticated && !!id,
39  });
40}

2create policy payment_methods_admin_select on payment_methods for select using (is_admin());

46export const lightTheme = vars({
47  "--radius": "16",
48
49  "--background": "255 255 255",
50  "--foreground": "0 0 0",
51
52  "--card": "246 246 246",
53  "--card-foreground": "0 0 0",
54
55  "--popover": "255 255 255",
56  "--popover-foreground": "0 0 0",
57
58  "--primary": "0 0 0",
59  "--primary-foreground": "255 255 255",
60
61  "--secondary": "246 246 246",
62  "--secondary-foreground": "0 0 0",
63
64  "--muted": "240 240 240",
65  "--muted-foreground": "107 107 107",
66
67  "--accent": "22 163 74",
68  "--accent-foreground": "255 255 255",
69
70  "--destructive": "239 68 68",
71
72  "--border": "230 230 230",
73  "--input": "230 230 230",
74  "--ring": "0 0 0",
75
76  "--chart-1": "0 0 0",
77  "--chart-2": "22 163 74",
78  "--chart-3": "120 120 120",
79  "--chart-4": "180 180 180",

Sample data: Seattle, with 16 invented places on real coordinates. Demo accounts (password rapidnative-demo): demo@rapidnative.com (Alex Rivera: rider, driver and admin, so every screen opens in the preview), rider@rapidnative.com (Priya Nair), driver@rapidnative.com (Sam Okafor), admin@rapidnative.com (Jordan Lee). 3 more riders, 8 more drivers (online, offline, pending and suspended) with vehicles and documents, 3 busy zones, 3 promo codes, payment methods, about 60 rides with fares, tips, ratings and comments, open requests and trips in progress. Good to know: GPS and live location: the rider's position is simulated (the Home saved place, or the nearest place to a fixed point) and the driver's car moves along the route by time ("Simulated GPS" on every map). Device location (expo-location) and real driver positions plug in at src/lib/currentLocation.ts and src/lib/simulateTrip.ts. Dispatch: requests reach drivers signed in on the driver side; when none is connected, "Demo controls · simulated driver" on the live trip plays the driver's part (src/lib/simulateDispatch.ts). In production, move status changes to a server function. Payments: cards store only brand and last 4 digits and nothing is charged. Stripe plugs in at the payment screen and the receipt. Calls, messages and trip sharing: buttons open a note that they are simulated. Twilio or a chat service plugs in there. Routing: the public OSRM demo server; use your own routing service (or Mapbox Directions) in production. Notifications: none are sent; trip status refreshes every few seconds.