# How to Build a Food Delivery Ordering System in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 35-40 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A food delivery system in Bubble uses Data Types for restaurants, menu items, orders, and drivers. Customers browse restaurant menus, add items with customizations to a cart, enter a delivery address with map integration, and track order status. Restaurant owners manage menus and accept orders, while drivers see assigned deliveries with pickup and delivery addresses. This tutorial covers the multi-role ordering flow.

## Overview: Food Delivery Ordering System in Bubble

This tutorial guides you through building a food delivery platform with three user roles: customers, restaurant owners, and delivery drivers. You will create the data model, build ordering flows, and implement status tracking.

## Before you start

- A Bubble app with user authentication and role management
- Google Maps API key for address/map features
- Understanding of multi-step workflows and Repeating Groups
- Stripe plugin for payment processing (optional)

## Step-by-step guide

### 1. Create the food delivery Data Types

Create 'Restaurant' with: name, description, address (geographic), logo, cuisine_type, is_open (yes/no), owner (User). Create 'MenuItem' with: name, description, price, image, category, restaurant, is_available. Create 'Order' with: customer (User), restaurant, items (list of OrderItems), delivery_address (geographic), status (pending/accepted/preparing/picked_up/delivered), driver (User), total, created_date. Create 'OrderItem' with: menu_item, quantity, special_instructions, subtotal.

**Expected result:** Complete data model for restaurants, menus, orders, and order items.

### 2. Build the restaurant browsing and menu page

Create a browse page with a Repeating Group of Restaurants filtered by is_open = yes. Add location-based sorting using the user's location. Each card shows restaurant logo, name, cuisine type, and estimated delivery time. Clicking a restaurant opens a menu page. The menu page shows the restaurant details and a Repeating Group of MenuItems grouped by category (appetizers, mains, desserts, drinks). Each item shows name, description, price, and an 'Add' button.

**Expected result:** Customers can browse open restaurants and view their menus organized by category.

### 3. Implement the cart with item customizations

When 'Add' is clicked on a menu item, show a popup for quantity and special instructions (e.g., 'no onions'). Create an OrderItem and add it to a cart stored in page custom states (list of OrderItems). Display a cart sidebar or bottom bar showing item count and total. The cart shows each item with name, quantity, instructions, subtotal, and remove button. Allow quantity editing. Calculate the total dynamically.

> Pro tip: Store the cart in custom states (client-side) until checkout to avoid creating database records for abandoned carts. Only create Order records when the customer confirms.

**Expected result:** Customers can add items to a cart with customizations, view and edit the cart, and see the running total.

### 4. Build the checkout with delivery address

The checkout page shows the cart summary, a delivery address input (Search Box with geographic places), a Map element showing the delivery location, an optional tip selector, and the order total breakdown (subtotal + delivery fee + tip). Add a 'Place Order' button. The workflow: create the Order record with all details, status = 'pending', and process payment if Stripe is integrated. Send the order to the restaurant dashboard.

**Expected result:** Customers enter a delivery address, review the total, and place the order with confirmation.

### 5. Create the restaurant owner dashboard

Build a 'restaurant-dashboard' page accessible to restaurant owners. Show incoming orders (status = pending) with an 'Accept' or 'Reject' button. Accepted orders move to a 'Preparing' queue. Each order shows customer name, items with quantities and instructions, delivery address, and total. Add a 'Ready for Pickup' button that changes status to 'ready' and notifies the assigned driver. Include a menu management section where owners can add, edit, and toggle item availability.

**Expected result:** Restaurant owners see incoming orders, manage preparation status, and maintain their menu.

### 6. Implement order tracking for customers

Create an 'order-status' page that shows the current order's progress. Display a visual status bar with steps: Pending → Accepted → Preparing → Picked Up → Delivered. Show the driver's name and location on a map when assigned (using the driver's current_location field). Use Bubble's live data to auto-update the status display when changes occur. Add estimated delivery time based on distance calculation.

**Expected result:** Customers see real-time order progress with a visual status bar and driver location on a map.

## Complete code example

File: `Workflow summary`

```text
FOOD DELIVERY — WORKFLOW SUMMARY
===================================

DATA TYPES:
  Restaurant: name, address, logo, cuisine, is_open, owner
  MenuItem: name, price, image, category, restaurant, available
  Order: customer, restaurant, items, delivery_address,
    status, driver, total, created_date
  OrderItem: menu_item, quantity, instructions, subtotal

CUSTOMER FLOW:
  Browse restaurants → Select → View menu
  Add items to cart (custom states)
  Checkout: address + payment → Create Order (pending)

RESTAURANT FLOW:
  Dashboard: incoming orders (pending)
  Accept → status = 'accepted' → 'preparing'
  Ready → status = 'ready', notify driver
  Menu management: add/edit/toggle items

DRIVER FLOW:
  Available orders (ready for pickup)
  Accept delivery → status = 'picked_up'
  Complete → status = 'delivered'
  Location updates via backend API

ORDER TRACKING:
  Visual status bar: pending → delivered
  Live map with driver location
  Auto-updating via Bubble live data
```

## Common mistakes

- **Creating Order records for every cart addition instead of at checkout** — Abandoned carts create thousands of incomplete order records, cluttering the database and confusing restaurant dashboards Fix: Store cart items in custom states (client-side) and only create the Order record when the customer confirms checkout
- **Not handling restaurant closure or item unavailability during ordering** — Customers place orders for closed restaurants or unavailable items, leading to rejected orders and bad experiences Fix: Check is_open and is_available in real-time, with conditionals that disable ordering for closed restaurants or unavailable items
- **Not separating the restaurant owner and customer user roles** — Without role separation, any user can access the restaurant dashboard or modify menus Fix: Add a 'role' field to the User type and use page-level redirects and Privacy Rules to enforce role-based access

## Best practices

- Store cart in custom states until checkout to avoid abandoned order records
- Use role-based access for customer, restaurant, and driver dashboards
- Check restaurant status and item availability in real-time during ordering
- Send notifications at each status change to keep customers informed
- Calculate delivery fees based on distance between restaurant and delivery address
- Add order ratings after delivery for quality feedback
- Implement a cancellation window (e.g., 5 minutes) for customer-initiated cancellations

## Frequently asked questions

### How do I calculate delivery fees based on distance?

Use Bubble's geographic distance calculation between the restaurant address and delivery address. Multiply the distance by a per-km rate. Display the fee on the checkout page.

### Can I add real-time driver tracking?

Yes. Drivers update their location via a backend API workflow from their mobile browser. The customer's order tracking page shows the driver's position on a map with live data updates.

### How do I handle multiple items from different restaurants?

Most food delivery apps restrict orders to one restaurant at a time. Add a check: if the cart has items from restaurant A and the user adds from restaurant B, prompt to clear the cart or switch restaurants.

### Can I add estimated delivery times?

Yes. Calculate based on preparation time (set per restaurant) plus delivery time (distance / average speed). Display as 'Estimated delivery: 30-45 minutes'.

### Can RapidDev build a complete food delivery platform in Bubble?

Yes. RapidDev can build full food delivery platforms with multi-restaurant support, driver management, real-time tracking, payment processing, and analytics in Bubble.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-food-delivery-ordering-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-food-delivery-ordering-system-in-bubble