Food Delivery Platform

Build a delicious food delivery platform with Lovable that makes ordering irresistible:

Home/Discovery Page

Hero Section

• Location input: Large, prominent "Enter delivery address"
• Current location: Use geolocation with permission
• Popular searches: Quick chips (Pizza, Sushi, Burgers, etc.)
• Hero image: Appetizing food photography or video

Restaurant Categories

• Horizontal scroll: Category chips with icons
  • All Restaurants
  • Pizza
  • Burgers
  • Asian
  • Mexican
  • Healthy
  • Desserts
  • Vegan
• Active state: Highlighted selection
• Filter restaurants: By category

Featured Restaurants Banner

• Auto-rotating carousel: 4-5 featured restaurants
• High-quality images: Restaurant or signature dishes
• Overlay info: Name, rating, delivery time
• CTA: "Order Now"

Restaurant Grid

Restaurant Cards:

• Image: Restaurant or food photo
• Restaurant name: Bold, prominent
• Cuisine types: Tags (Italian, Fast Food)
• Rating: ⭐ 4.5 (1,234 reviews)
• Delivery info:
  • Delivery time: 25-35 min
  • Delivery fee: $2.99 or Free delivery
  • Minimum order: $15
• Promo badge: "20% OFF" if applicable
• Heart icon: Add to favorites
• Hover effect: Lift with shadow

Filters & Sort

Filter Panel (Sidebar or bottom sheet on mobile):

• Dietary: Vegetarian, Vegan, Gluten-free
• Price range: $, $$, $$$, $$$$
• Rating: 4+ stars, 4.5+ stars
• Delivery time: Under 30 min, 30-45 min
• Delivery fee: Free delivery only
• Offers: Promotions & discounts

Sort Options:

• Relevance
• Delivery time (fastest first)
• Rating (highest first)
• Distance (nearest first)
• Minimum order (lowest first)

Restaurant Detail Page

Restaurant Header

• Cover image: Large hero image
• Restaurant info:
  • Name and logo
  • Cuisine type(s)
  • Rating: ⭐ 4.7 (2,456 reviews)
  • Price range: $$
  • Delivery: 25-35 min, $2.99 fee
  • Distance: 1.2 miles away
• Actions:
  • Favorite (heart icon)
  • Share
  • Info (hours, address, phone)
• Status: Open now (closes at 10 PM) with green dot

Menu Navigation

• Sticky tabs: Scroll with page
• Categories: Popular, Appetizers, Main Course, Sides, Drinks, Desserts
• Search menu: Find specific items
• Dietary filters: Toggle vegetarian, vegan options

Menu Items

Item Cards:

• Item image: Appetizing photo
• Name: Clear, bold
• Description: Brief, enticing (2 lines)
• Price: Prominent
• Dietary badges: 🌱 Vegan, 🌶️ Spicy, ⚠️ Contains nuts
• Customization indicator: "Customizable"
• Popular badge: "Most ordered"
• Add button: + icon with quantity selector on click

Item Modal (When clicked):

• Large image: Full-width photo
• Name and description: Detailed info
• Price: Starting price if customizable
• Required selections:
  • Size (Small, Medium, Large)
  • Base (Rice, Noodles, etc.)
• Optional add-ons:
  • Extra cheese (+$1.50)
  • Extra protein (+$3.00)
  • Toppings (checkboxes)
• Special instructions: Textarea for notes
• Quantity selector: - and + buttons
• Add to cart: Large CTA with total price

Restaurant Information Tab

• About: Restaurant description
• Hours: Opening/closing times for each day
• Location: Map with pin
• Contact: Phone, website
• Reviews section: Recent customer reviews

Cart (Slide-in Panel or Bottom Sheet)

Cart Header

• Restaurant name: Where order is from
• Item count: X items
• Close button: X to dismiss

Cart Items

• Item listing:
  • Name
  • Customizations (size, add-ons)
  • Quantity with -/+ buttons
  • Price per item and total
  • Remove button (trash icon)
• Edit item: Click to modify
• Empty cart: "Your cart is empty" with illustration

Order Summary

• Subtotal: Sum of items
• Delivery fee: $2.99 or Free
• Service fee: $1.50
• Taxes: Calculated amount
• Tip: Dropdown or buttons (10%, 15%, 20%, Custom, No tip)
• Promo code: Input field with "Apply" button
  • Success: Show discount amount
• Total: Large, bold final amount

Checkout CTA

• Large button: "Proceed to Checkout $42.50"
• Estimated time: "Delivery in 30-40 min"
• Minimum not met: Warning if below minimum order

Checkout Page

Delivery Details

• Address: Selected or enter new
• Instructions: "Leave at door", "Ring bell", etc.
• Contact: Phone number for driver
• Schedule: ASAP or schedule for later (date/time picker)

Payment Method

• Saved cards: List with last 4 digits
• Add new card: Stripe/PayPal integration
• Cash on delivery: If available
• Digital wallets: Apple Pay, Google Pay

Order Review

• Restaurant: Name and logo
• Items list: Condensed view
• Edit cart: Link back to cart
• Delivery address: Confirm location
• Payment method: Confirm selection

Place Order

• Large CTA: "Place Order $42.50"
• Terms: "By placing order you agree to..."
• Loading state: Processing spinner
• Error handling: Clear error messages

Order Tracking Page

Order Status

• Progress tracker: Visual timeline
  1. Order placed ✓
  2. Restaurant preparing (current)
  3. Out for delivery
  4. Delivered
• Estimated time: Countdown timer
• Status updates: Real-time notifications

Restaurant Info

• Name and logo
• Order items: What you ordered
• Order ID: For reference

Live Tracking (When out for delivery)

• Map: Show driver location in real-time
• Driver info:
  • Photo and name
  • Vehicle type and license plate
  • Phone/message button
• ETA: Dynamic countdown

Actions

• Contact restaurant: Phone call
• Help: Open support chat
• Cancel order: If still possible

Order History

Past Orders List

• Order cards:
  • Restaurant name and logo
  • Order date and time
  • Items summary (truncated)
  • Total amount
  • Status (Delivered, Cancelled)
  • Rating prompt if not rated
• Reorder button: Add same items to cart
• View details: Full order breakdown
• Rate & review: Star rating + text

User Profile

Account Info

• Name and email
• Phone number
• Edit profile button

Saved Addresses

• Address list:
  • Label (Home, Work, Other)
  • Full address
  • Edit/Delete buttons
• Add new address: + button

Payment Methods

• Saved cards: Masked numbers
• Set default: Radio button
• Add new payment: + button
• Delete: Trash icon

Preferences

• Dietary restrictions: Save filters
• Notifications: Email, Push, SMS toggles
• Language: Dropdown selector

Orders & Activity

• Order history: Link to past orders
• Favorites: Saved restaurants
• Reviews: Your ratings and reviews

Design & Animations

Visual Polish

• Food photography: High-quality, professional
• Appetizing colors: Warm, inviting palette
• Generous whitespace: Clean, uncluttered
• Consistent shadows: Depth and hierarchy

Animations

• Cart badge bounce: When items added
• Floating cart button: Bottom-right on mobile
• Slide-in cart: Smooth panel animation
• Item added animation: Fly to cart effect
• Skeleton loaders: While fetching data
• Shimmer effects: On placeholder cards
• Page transitions: Smooth navigation
• Map animations: Smooth panning and markers

Micro-interactions

• Button hover: Lift and shadow
• Card hover: Slight scale up
• Rating stars: Fill on hover
• Favorite heart: Beat animation
• Quantity buttons: Ripple effect
• Success checkmark: After order placed

Mobile Optimization

Mobile UI

• Bottom nav: Home, Search, Cart, Orders, Profile
• Floating cart button: Always visible with badge
• Sticky header: Collapses on scroll
• Pull to refresh: Update restaurant list
• Swipe gestures: Navigate between tabs

Native Features

• Geolocation: Auto-detect location
• Push notifications: Order updates
• Camera: Upload food photos for reviews
• Haptic feedback: On important actions

Technical Requirements

Performance

• Image optimization: WebP, lazy loading
• Infinite scroll: Restaurant listings
• Debounced search: Reduce API calls
• Optimistic updates: Instant cart changes
• Code splitting: Per route

Integrations

• Supabase: Database for orders, restaurants, users
• Stripe: Payment processing
• Google Maps: Location and tracking
• SendGrid: Email notifications
• Twilio: SMS updates
• Firebase: Push notifications

Real-time Features

• WebSockets: Live order tracking
• Driver location: Updates every 10 seconds
• Order status: Real-time updates

Generate a mouth-watering food delivery app that makes users hungry!