This example demonstrates how to build a complete restaurant ordering application using CraveJS components, including menu browsing, cart management, checkout flow, and order tracking. ## Overview We'll build "Bella Vista Pizzeria" - a complete pizza restaurant ordering system with: - **Menu browsing** with categories and search - **Item customization** with modifiers and options - **Cart management** with quantity controls - **Checkout flow** with delivery/pickup options - **Order tracking** and status updates - **User authentication** and order history ## Project Structure ``` src/ ├── components/ │ ├── restaurant/ │ │ ├── menu/ │ │ ├── cart/ │ │ ├── checkout/ │ │ └── order/ │ ├── layout/ │ └── ui/ ├── pages/ │ ├── menu/ │ ├── cart/ │ ├── checkout/ │ └── orders/ ├── hooks/ ├── lib/ └── types/ ``` ## Setup ### 1. Install Dependencies ```bash npm install @cravejs/restaurant @cravejs/ui npm install @tanstack/react-query zustand react-hook-form npm install lucide-react class-variance-authority ``` ### 2. Configure State Management ```tsx title="lib/store.ts" import { create } from 'zustand' import { persist } from 'zustand/middleware' interface CartItem { id: string name: string price: number quantity: number modifiers: Record specialInstructions?: string } interface RestaurantStore { // Cart state cartItems: CartItem[] cartTotal: number // Menu state selectedCategory: string searchQuery: string // Order state currentOrder: any orderHistory: any[] // Actions addToCart: (item: CartItem) => void removeFromCart: (itemId: string) => void updateQuantity: (itemId: string, quantity: number) => void clearCart: () => void setSelectedCategory: (category: string) => void setSearchQuery: (query: string) => void } export const useRestaurantStore = create()( persist( (set, get) => ({ cartItems: [], cartTotal: 0, selectedCategory: 'all', searchQuery: '', currentOrder: null, orderHistory: [], addToCart: (item) => set((state) => { const existingItem = state.cartItems.find(i => i.id === item.id && JSON.stringify(i.modifiers) === JSON.stringify(item.modifiers) ) if (existingItem) { return { cartItems: state.cartItems.map(i => i === existingItem ? { ...i, quantity: i.quantity + item.quantity } : i ) } } return { cartItems: [...state.cartItems, { ...item, id: `${item.id}-${Date.now()}` }] } }), removeFromCart: (itemId) => set((state) => ({ cartItems: state.cartItems.filter(item => item.id !== itemId) })), updateQuantity: (itemId, quantity) => set((state) => ({ cartItems: quantity <= 0 ? state.cartItems.filter(item => item.id !== itemId) : state.cartItems.map(item => item.id === itemId ? { ...item, quantity } : item ) })), clearCart: () => set({ cartItems: [] }), setSelectedCategory: (category) => set({ selectedCategory: category }), setSearchQuery: (query) => set({ searchQuery: query }), }), { name: 'restaurant-store', partialize: (state) => ({ cartItems: state.cartItems, orderHistory: state.orderHistory }), } ) ) ``` ### 3. Menu Data Structure ```tsx title="lib/menu-data.ts" export interface MenuItem { id: string name: string description: string price: number category: string image: string calories?: number allergens?: string[] modifierGroups?: ModifierGroup[] popular?: boolean spicy?: number } export interface ModifierGroup { id: string name: string required?: boolean min?: number max?: number options: ModifierOption[] } export interface ModifierOption { id: string name: string price?: number calories?: number isDefault?: boolean } export const menuData: MenuItem[] = [ { id: 'margherita-pizza', name: 'Margherita Pizza', description: 'Fresh mozzarella, tomato sauce, and basil', price: 16.99, category: 'pizza', image: '/images/margherita.jpg', calories: 280, popular: true, modifierGroups: [ { id: 'size', name: 'Size', required: true, max: 1, options: [ { id: 'small', name: 'Small (10")', price: 0, isDefault: true }, { id: 'medium', name: 'Medium (14")', price: 4.00 }, { id: 'large', name: 'Large (18")', price: 8.00 } ] }, { id: 'crust', name: 'Crust', required: true, max: 1, options: [ { id: 'thin', name: 'Thin Crust', price: 0, isDefault: true }, { id: 'thick', name: 'Thick Crust', price: 1.50 }, { id: 'stuffed', name: 'Stuffed Crust', price: 3.00 } ] }, { id: 'toppings', name: 'Extra Toppings', max: 6, options: [ { id: 'pepperoni', name: 'Pepperoni', price: 1.50 }, { id: 'mushrooms', name: 'Mushrooms', price: 1.00 }, { id: 'olives', name: 'Black Olives', price: 1.00 }, { id: 'peppers', name: 'Bell Peppers', price: 1.00 } ] } ] }, // More menu items... ] export const menuCategories = [ { id: 'all', name: 'All Items', count: menuData.length }, { id: 'pizza', name: 'Pizza', count: 12 }, { id: 'appetizers', name: 'Appetizers', count: 8 }, { id: 'salads', name: 'Salads', count: 6 }, { id: 'desserts', name: 'Desserts', count: 5 }, { id: 'beverages', name: 'Beverages', count: 10 } ] ``` ## Main Components ### 1. Restaurant Layout ```tsx title="components/layout/restaurant-layout.tsx" 'use client' import { useState } from 'react' import { ShoppingCart, Menu, Search, User, Phone } from 'lucide-react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Badge } from '@/components/ui/badge' import { useRestaurantStore } from '@/lib/store' import { CartSidebar } from '@/components/restaurant/cart/cart-sidebar' export function RestaurantLayout({ children }) { const [isCartOpen, setIsCartOpen] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const { cartItems, searchQuery, setSearchQuery } = useRestaurantStore() const cartItemCount = cartItems.reduce((sum, item) => sum + item.quantity, 0) return (

{/* Header */}

{/* Logo */}

🍕

Bella Vista

{/* Desktop Navigation */} {/* Search Bar */}

setSearchQuery(e.target.value)} className="pl-8" />

{/* Right Actions */}

{/* Phone Number */}

(555) 123-PIZZA

{/* User Account */} {/* Cart */} {/* Mobile Menu */}

{/* Main Content */}

{children}

{/* Footer */} {/* Cart Sidebar */} setIsCartOpen(false)} />

) } ``` ### 2. Menu Page ```tsx title="pages/menu.tsx" 'use client' import { useState, useMemo } from 'react' import { MenuItemCard } from '@cravejs/restaurant' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { useRestaurantStore } from '@/lib/store' import { menuData, menuCategories } from '@/lib/menu-data' import { MenuItemModal } from '@/components/restaurant/menu/menu-item-modal' export default function MenuPage() { const { selectedCategory, setSelectedCategory, searchQuery } = useRestaurantStore() const [selectedItem, setSelectedItem] = useState(null) // Filter menu items const filteredItems = useMemo(() => { let items = menuData // Filter by category if (selectedCategory !== 'all') { items = items.filter(item => item.category === selectedCategory) } // Filter by search if (searchQuery) { items = items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()) || item.description.toLowerCase().includes(searchQuery.toLowerCase()) ) } return items }, [selectedCategory, searchQuery]) // Group items by category for display const groupedItems = useMemo(() => { const groups = {} filteredItems.forEach(item => { if (!groups[item.category]) { groups[item.category] = [] } groups[item.category].push(item) }) return groups }, [filteredItems]) return (

{/* Hero Section */}

Our Menu

Discover our delicious selection of authentic Italian pizzas, fresh salads, and mouth-watering appetizers made with the finest ingredients.

{/* Category Filter */}

{menuCategories.map(category => ( ))}

{/* Search Results */} {searchQuery && (

Found {filteredItems.length} items matching "{searchQuery}"

)} {/* Menu Items */} {Object.entries(groupedItems).map(([category, items]) => (

{category.replace('-', ' ')}

{items.map(item => ( setSelectedItem(item)} showAddButton showCalories className="cursor-pointer hover:shadow-lg transition-shadow" /> ))}

))} {/* No Results */} {filteredItems.length === 0 && (

No menu items found. Try adjusting your search or category filter.

)} {/* Menu Item Modal */} {selectedItem && ( setSelectedItem(null)} /> )}

) } ``` ### 3. Menu Item Modal with Customization ```tsx title="components/restaurant/menu/menu-item-modal.tsx" 'use client' import { useState } from 'react' import { ModifierSelector, QuantitySelector } from '@cravejs/restaurant' import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Textarea } from '@/components/ui/textarea' import { Label } from '@/components/ui/label' import { Badge } from '@/components/ui/badge' import { useRestaurantStore } from '@/lib/store' export function MenuItemModal({ item, isOpen, onClose }) { const [quantity, setQuantity] = useState(1) const [selectedModifiers, setSelectedModifiers] = useState({}) const [specialInstructions, setSpecialInstructions] = useState('') const { addToCart } = useRestaurantStore() // Calculate total price including modifiers const calculateTotalPrice = () => { let total = item.price * quantity // Add modifier prices Object.entries(selectedModifiers).forEach(([groupId, selection]) => { const group = item.modifierGroups?.find(g => g.id === groupId) if (!group) return const selections = Array.isArray(selection) ? selection : [selection] selections.forEach(optionId => { const option = group.options.find(o => o.id === optionId) if (option?.price) { total += option.price * quantity } }) }) return total } const handleAddToCart = () => { const cartItem = { id: item.id, name: item.name, price: calculateTotalPrice() / quantity, // Price per item including modifiers quantity, modifiers: selectedModifiers, specialInstructions: specialInstructions.trim() || undefined } addToCart(cartItem) onClose() // Reset form setQuantity(1) setSelectedModifiers({}) setSpecialInstructions('') } const totalPrice = calculateTotalPrice() return (

Complete Restaurant Example