How to Build a Food Delivery Backend with Lovable

1Create a food delivery app with Supabase. Set up these tables:
2
3- profiles: id (references auth.users), role (customer|restaurant|driver), display_name, avatar_url, phone
4- restaurants: id (references profiles), name, description, cuisine_type, address, city, is_open (bool), delivery_fee (numeric), min_order (numeric), image_url, created_at
5- menu_categories: id, restaurant_id (references restaurants), name, position (int)
6- menu_items: id, category_id (references menu_categories), restaurant_id, name, description, price (numeric), image_url, is_available (bool default true), created_at
7- menu_item_modifiers: id, menu_item_id, name, type (single|multiple), required (bool), options (jsonb: [{label, price_add}])
8- customer_addresses: id, customer_id (references profiles), label (Home|Work|Other), street, city, state, zip, is_default (bool)
9- orders: id, customer_id, restaurant_id, driver_id (nullable), status (placed|confirmed|preparing|ready|picked_up|delivered|cancelled), items (jsonb snapshot), subtotal, delivery_fee, tip, total, stripe_payment_intent_id, delivery_address (jsonb), special_instructions, estimated_delivery_at, created_at, updated_at
10- driver_locations: id, driver_id (unique — one per driver), lat (numeric), lng (numeric), updated_at
11
12RLS:
13- profiles: users can read/update their own profile; restaurants and drivers are readable by all authenticated users
14- restaurants: anyone can read open restaurants; restaurant owners can update their own row
15- menu_items/categories: anyone can read; restaurant owner can CRUD for their restaurant
16- orders: customers see their own orders; restaurants see orders for their restaurant_id; drivers see orders assigned to them or with status=ready
17- driver_locations: drivers can update their own location; customers with an active order can read the driver_location for their assigned driver

1Build a restaurant dashboard at src/pages/RestaurantDashboard.tsx.
2
3Requirements:
4- Sidebar navigation with tabs: Orders, Menu, Settings.
5- Menu tab:
6  - List menu_categories for this restaurant sorted by position. Each is a collapsible AccordionItem.
7  - Inside each category, list menu_items as rows: image thumbnail, name, price, an available/unavailable Toggle switch.
8  - Toggling the switch calls supabase.from('menu_items').update({ is_available }).eq('id', itemId).
9  - 'Add Category' Button opens a Dialog with a name Input and saves to menu_categories.
10  - 'Add Item' Button inside each category opens a Sheet with fields: name (Input), description (Textarea), price (Input number), image upload (file Input to Supabase Storage bucket 'menu'), is_available (Switch).
11  - Drag-to-reorder categories using position integer (show drag handle icon, update position on drop).
12- Orders tab:
13  - Four columns (kanban-style): Placed, Confirmed, Preparing, Ready.
14  - Each order is a Card showing: order ID, customer name, item count, total, time elapsed since placed.
15  - Buttons on each card: 'Confirm', 'Mark Preparing', 'Mark Ready' — each calls the order-transition Edge Function.
16  - Subscribe to Realtime inserts on orders WHERE restaurant_id = this restaurant to show new orders instantly.
17  - New order cards slide in with a brief highlight animation using Tailwind transition.

1Create a Supabase Edge Function at supabase/functions/order-transition/index.ts.
2
3Receives: { order_id: string, new_status: string, metadata?: object } in body.
4Requires authentication.
5
6Valid transitions map:
7const TRANSITIONS: Record<string, string[]> = {
8  placed: ['confirmed', 'cancelled'],
9  confirmed: ['preparing', 'cancelled'],
10  preparing: ['ready'],
11  ready: ['picked_up'],
12  picked_up: ['delivered'],
13  delivered: [],
14  cancelled: [],
15}
16
17Logic:
181. Fetch the order by order_id using service role key.
192. Get the caller's profile to verify they are allowed to make this transition:
20   - Restaurant can transition: placed→confirmed, confirmed→preparing, preparing→ready
21   - Driver can transition: ready→picked_up, picked_up→delivered (only if order.driver_id = caller's id)
22   - Customer can transition: placed→cancelled, confirmed→cancelled
23   - Admin can do any transition
243. If transition is invalid (not in TRANSITIONS[current_status]), return 400 error.
254. If caller role doesn't match allowed transitions, return 403.
265. Build update object: { status: new_status, updated_at: new Date().toISOString() }
27   - If new_status === 'confirmed': set estimated_delivery_at = NOW() + 40 minutes
28   - If new_status === 'picked_up': set driver_id = caller's id (for drivers accepting from ready queue)
296. Update orders row.
307. Broadcast to Supabase Realtime channel 'order-{order_id}': { type: 'status_change', status: new_status, timestamp }
318. Return { success: true, new_status }

1import { useEffect, useState } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Badge } from '@/components/ui/badge'
4import { Progress } from '@/components/ui/progress'
5import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
6
7const STATUS_STEPS = ['placed', 'confirmed', 'preparing', 'ready', 'picked_up', 'delivered'] as const
8type OrderStatus = typeof STATUS_STEPS[number]
9
10const STATUS_LABELS: Record<OrderStatus, string> = {
11  placed: 'Order Placed',
12  confirmed: 'Restaurant Confirmed',
13  preparing: 'Preparing Your Food',
14  ready: 'Ready for Pickup',
15  picked_up: 'Driver Picked Up',
16  delivered: 'Delivered',
17}
18
19export function OrderTracker({ orderId }: { orderId: string }) {
20  const [status, setStatus] = useState<OrderStatus>('placed')
21  const [estimatedAt, setEstimatedAt] = useState<string | null>(null)
22  const [driverLocation, setDriverLocation] = useState<{ lat: number; lng: number } | null>(null)
23
24  useEffect(() => {
25    supabase.from('orders').select('status, estimated_delivery_at, driver_id').eq('id', orderId).single()
26      .then(({ data }) => {
27        if (data) {
28          setStatus(data.status as OrderStatus)
29          setEstimatedAt(data.estimated_delivery_at)
30        }
31      })
32
33    const orderChannel = supabase
34      .channel(`order-${orderId}`)
35      .on('broadcast', { event: 'status_change' }, (payload) => {
36        setStatus(payload.payload.status as OrderStatus)
37      })
38      .subscribe()
39
40    const locationChannel = supabase
41      .channel(`driver-location-${orderId}`)
42      .on('postgres_changes', {
43        event: 'UPDATE',
44        schema: 'public',
45        table: 'driver_locations',
46      }, (payload) => {
47        setDriverLocation({ lat: payload.new.lat, lng: payload.new.lng })
48      })
49      .subscribe()
50
51    return () => {
52      supabase.removeChannel(orderChannel)
53      supabase.removeChannel(locationChannel)
54    }
55  }, [orderId])
56
57  const stepIndex = STATUS_STEPS.indexOf(status)
58  const progress = Math.round((stepIndex / (STATUS_STEPS.length - 1)) * 100)
59
60  return (
61    <Card className="w-full max-w-lg">
62      <CardHeader>
63        <CardTitle className="flex justify-between items-center">
64          <span>Order #{orderId.slice(-6).toUpperCase()}</span>
65          <Badge>{STATUS_LABELS[status]}</Badge>
66        </CardTitle>
67        {estimatedAt && (
68          <p className="text-sm text-muted-foreground">
69            Estimated delivery: {new Date(estimatedAt).toLocaleTimeString()}
70          </p>
71        )}
72      </CardHeader>
73      <CardContent className="space-y-6">
74        <Progress value={progress} className="h-2" />
75        <div className="space-y-3">
76          {STATUS_STEPS.map((step, i) => (
77            <div key={step} className={`flex items-center gap-3 ${i <= stepIndex ? 'text-foreground' : 'text-muted-foreground'}`}>
78              <div className={`w-2 h-2 rounded-full ${i < stepIndex ? 'bg-green-500' : i === stepIndex ? 'bg-primary animate-pulse' : 'bg-muted'}`} />
79              <span className="text-sm">{STATUS_LABELS[step]}</span>
80            </div>
81          ))}
82        </div>
83        {driverLocation && (
84          <p className="text-sm text-muted-foreground">Driver location updated {new Date().toLocaleTimeString()}</p>
85        )}
86      </CardContent>
87    </Card>
88  )
89}

1Build a driver dashboard at src/pages/DriverDashboard.tsx.
2
3Requirements:
4- Two tabs: Available Orders, My Active Delivery.
5
6Available Orders tab:
7- Fetch orders WHERE status = 'ready' AND driver_id IS NULL.
8- Each is a Card showing: restaurant name, delivery address, payout estimate (delivery_fee * 0.8), distance (calculate from driver's last known location if available).
9- 'Accept' Button calls order-transition Edge Function with new_status='picked_up' (which sets driver_id to this driver).
10- Realtime subscription to orders WHERE status = 'ready' for live queue updates.
11
12My Active Delivery tab:
13- Fetch the one order where driver_id = auth.uid() AND status IN ('picked_up').
14- Show order details, customer name, delivery address on a Card.
15- Large 'Mark Delivered' Button that calls order-transition Edge Function with new_status='delivered'.
16- Every 30 seconds, upsert driver_locations: { driver_id: auth.uid(), lat, lng, updated_at } using browser Geolocation API.
17  - Use navigator.geolocation.watchPosition to get the current position.
18  - Only upsert if the position changed by more than 0.001 degrees to avoid unnecessary writes.
19
20Add a location permission request banner if Geolocation is not yet granted.