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.
Prerequisites
- 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
Create the food delivery Data Types
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.
Build the restaurant browsing and menu page
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.
Implement the cart with item customizations
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.
Build the checkout with delivery address
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.
Create the restaurant owner dashboard
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.
Implement order tracking for customers
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 working example
1FOOD DELIVERY — WORKFLOW SUMMARY2===================================34DATA TYPES:5 Restaurant: name, address, logo, cuisine, is_open, owner6 MenuItem: name, price, image, category, restaurant, available7 Order: customer, restaurant, items, delivery_address,8 status, driver, total, created_date9 OrderItem: menu_item, quantity, instructions, subtotal1011CUSTOMER FLOW:12 Browse restaurants → Select → View menu13 Add items to cart (custom states)14 Checkout: address + payment → Create Order (pending)1516RESTAURANT FLOW:17 Dashboard: incoming orders (pending)18 Accept → status = 'accepted' → 'preparing'19 Ready → status = 'ready', notify driver20 Menu management: add/edit/toggle items2122DRIVER FLOW:23 Available orders (ready for pickup)24 Accept delivery → status = 'picked_up'25 Complete → status = 'delivered'26 Location updates via backend API2728ORDER TRACKING:29 Visual status bar: pending → delivered30 Live map with driver location31 Auto-updating via Bubble live dataCommon mistakes when building a Food Delivery Ordering System in Bubble
Why it's a problem: Creating Order records for every cart addition instead of at checkout
How to avoid: Store cart items in custom states (client-side) and only create the Order record when the customer confirms checkout
Why it's a problem: Not handling restaurant closure or item unavailability during ordering
How to avoid: Check is_open and is_available in real-time, with conditionals that disable ordering for closed restaurants or unavailable items
Why it's a problem: Not separating the restaurant owner and customer user roles
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a food delivery app in Bubble.io with restaurant browsing, menu ordering, cart, delivery address with map, order tracking, and separate dashboards for restaurants and drivers. What is the data model?
Build a food delivery system with Restaurant, MenuItem, Order, and OrderItem data types. Create a customer ordering flow with menu browsing, cart, and checkout. Build a restaurant dashboard for order management. Add order status tracking with a visual progress bar.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation