🍽️ Restaurant Management Platform

A modern, full-featured restaurant application with integrated ordering system, table reservations, and admin dashboard. Built with React, FastAPI, TypeScript, Prisma, and PostgreSQL.

🚀 Features

Restaurant Operations

Landing Site (restaurant.com): Marketing and conversion-focused landing page
Restaurant App (app.restaurant.com): Menu browsing, ordering, reservations, and admin dashboard
Unified Backend: FastAPI serving both landing and web applications
Mobile-First Design: Optimized for mobile ordering experience

Core Restaurant Features

Online Food Ordering: Complete cart, checkout, and order tracking system
Table Reservations: Real-time availability and booking management
Takeaway Orders: Scheduled pickup with time slot selection
Catering Services: Event catering requests and management
Food Planner: Meal planning with nutritional tracking
Menu Management: Dynamic menu with categories, variants, and add-ons
Order Processing: Real-time kitchen display and order tracking
Customer Management: Profiles, order history, and loyalty program
Analytics Dashboard: Sales reports, popular items, and performance metrics
Payment Processing: Multiple payment methods with Stripe integration

📋 Prerequisites

Node.js 18+ and npm/yarn/pnpm (for frontend)
Python 3.11+ (for backend)
Docker and Docker Compose (for database)
Git

🛠️ Tech Stack

Restaurant Frontend (React + Vite)

Landing Site (apps/landing/) - Marketing website with React + Vite
Web Application (apps/web/) - Main restaurant app with React + Vite
React 18 - UI library with TypeScript
Vite - Lightning-fast build tool and dev server
shadcn/ui - Accessible and customizable component library
Tailwind CSS - Utility-first CSS framework
React Router v6 - Client-side routing for SPA
Clerk React - Authentication UI components
Framer Motion - Smooth animations and transitions
React Hook Form + Zod - Form handling and validation
TanStack Query - Data fetching, caching, and synchronization
Zustand - State management for cart and user data
Axios - HTTP client for API communication

Restaurant Backend (FastAPI)

FastAPI - High-performance Python web framework
Pydantic - Data validation and settings management
Prisma - Type-safe database ORM (Python client)
PostgreSQL - Relational database for restaurant data
Python-Jose[cryptography] - JWT token verification
HTTPX - HTTP client for external API integration
Python-Multipart - File uploads for menu images
Pillow - Image processing and optimization
Uvicorn - ASGI server for production
Python-dotenv - Environment variables management
WebSockets - Real-time order updates and notifications

Payment & External Services

Stripe - Payment processing for orders
Twilio - SMS notifications for order updates
SendGrid - Email notifications and confirmations
Google Maps API - Delivery zone mapping and distance calculation

DevOps & Development

Docker - Containerization for consistent environments
Docker Compose - Multi-container orchestration
Nginx - Reverse proxy and static file serving
pnpm - Efficient package management for monorepo
ESLint + Prettier - Code quality and formatting
Husky - Git hooks for code quality
GitHub Actions - CI/CD pipeline automation

🚀 Quick Start

1. Clone the repository

git clone https://github.com/yourusername/restaurant-app.git
cd restaurant-app

2. Install dependencies

Using pnpm (Recommended)

# Install all dependencies
pnpm install

Or install individually

Landing Site

cd apps/landing
npm install

Restaurant Web App

cd apps/web
npm install

Restaurant Backend

cd apps/backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

3. Set up environment variables

# Copy environment files
cp .env.example .env
cp apps/landing/.env.example apps/landing/.env.local
cp apps/web/.env.example apps/web/.env.local
cp apps/backend/.env.example apps/backend/.env

Restaurant Apps .env.local (both landing and web):

VITE_API_URL=http://localhost:5000/api/v1
VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_key
VITE_GOOGLE_MAPS_API_KEY=your_maps_api_key

Restaurant Backend .env:

DATABASE_URL="postgresql://postgres:password@localhost:5432/restaurant_db"
PORT=5000
SECRET_KEY="your-super-secret-jwt-key"
CLERK_JWKS_URL=https://your-restaurant.clerk.accounts.dev/.well-known/jwks.json
STRIPE_SECRET_KEY=sk_test_your_stripe_secret
TWILIO_ACCOUNT_SID=your_twilio_sid
SENDGRID_API_KEY=your_sendgrid_key

4. Start the database

# From project root - start PostgreSQL with Docker
docker-compose up -d postgres

# Wait for database to be ready
sleep 30

5. Set up the database

cd apps/backend
# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev --name restaurant_init

# Seed with sample restaurant data (optional)
python -m scripts.seed_restaurant_data

6. Start the development servers

Option A: Start all services with pnpm

# From project root
pnpm dev

Option B: Start services individually

Terminal 1 - Restaurant Backend

cd apps/backend
source venv/bin/activate  # On Windows: venv\Scripts\activate
uvicorn main:app --reload --port 5000

Terminal 2 - Landing Site

cd apps/landing
npm run dev  # Runs on port 3000

Terminal 3 - Restaurant Web App

cd apps/web
npm run dev  # Runs on port 5173

Access Your Restaurant App

Landing Site: http://localhost:3000
Restaurant App: http://localhost:5173
Menu & Ordering: http://localhost:5173/menu
Admin Dashboard: http://localhost:5173/admin
API Documentation: http://localhost:5000/docs
Alternative API Docs: http://localhost:5000/redoc

📁 Project Structure

restaurant-app/
├── apps/                          # Restaurant applications
│   ├── landing/                   # Marketing/Landing site
│   │   ├── src/
│   │   │   ├── components/        # Landing page components
│   │   │   │   ├── Hero.tsx      # Hero section
│   │   │   │   ├── Features.tsx  # Features section
│   │   │   │   ├── Pricing.tsx   # Pricing section
│   │   │   │   └── CTA.tsx       # Call-to-action
│   │   │   ├── pages/            # Page components
│   │   │   └── styles/           # Landing-specific styles
│   │   └── public/               # Static assets
│   │
│   ├── web/                       # Main restaurant application
│   │   ├── src/
│   │   │   ├── components/        # UI components
│   │   │   │   ├── common/       # Shared UI components
│   │   │   │   ├── menu/         # Menu browsing components
│   │   │   │   ├── cart/         # Shopping cart components
│   │   │   │   ├── order/        # Order management components
│   │   │   │   ├── reservation/  # Table reservation components
│   │   │   │   └── admin/        # Admin dashboard components
│   │   │   ├── pages/            # Page components
│   │   │   │   ├── dashboard/    # User dashboard
│   │   │   │   ├── menu/         # Menu pages
│   │   │   │   ├── order/        # Order pages
│   │   │   │   ├── reservation/  # Reservation pages
│   │   │   │   └── admin/        # Admin pages
│   │   │   ├── hooks/            # Custom React hooks
│   │   │   ├── services/         # API services
│   │   │   ├── stores/           # Zustand state stores
│   │   │   └── types/            # TypeScript definitions
│   │   └── public/               # Static assets
│   │
│   └── backend/                   # Restaurant API server
│       ├── app/
│       │   ├── api/              # API route handlers
│       │   │   ├── menu/         # Menu management endpoints
│       │   │   ├── orders/       # Order processing endpoints
│       │   │   ├── reservations/ # Reservation endpoints
│       │   │   ├── admin/        # Admin-only endpoints
│       │   │   └── auth/         # Authentication endpoints
│       │   ├── core/             # Core configuration
│       │   ├── models/           # Pydantic data models
│       │   └── services/         # Business logic services
│       ├── prisma/               # Database schema & migrations
│       ├── scripts/              # Database seeding scripts
│       └── main.py               # FastAPI entry point
├── docs/                          # Documentation
│   ├── restaurant/               # Restaurant-specific docs
│   │   ├── PROJECT_OVERVIEW.md   # Architecture overview
│   │   ├── FEATURES.md           # Feature specifications
│   │   ├── RESTAURANT_DATABASE.md # Database schema
│   │   ├── RESTAURANT_API.md     # API documentation
│   │   ├── UI_COMPONENTS.md      # Component library
│   │   ├── ADMIN_FEATURES.md     # Admin dashboard guide
│   │   ├── IMPLEMENTATION_GUIDE.md # Step-by-step guide
│   │   └── QUICK_START.md        # Rapid setup guide
│   └── original/                 # Original template docs
├── docker/                        # Docker configurations
│   ├── nginx/                    # Nginx reverse proxy
│   └── volumes/                  # Persistent data storage
├── docker-compose.yml             # Development orchestration
└── pnpm-workspace.yaml           # Monorepo configuration

📝 Available Scripts

Monorepo Scripts (from root)

pnpm dev - Start all restaurant services (landing + web + backend)
pnpm build - Build all applications for production
pnpm lint - Run ESLint on all projects
pnpm format - Format all code with Prettier
pnpm test - Run tests across all packages

Landing Site (apps/landing)

npm run dev - Start landing site development server (port 3000)
npm run build - Build for production deployment
npm run preview - Preview production build locally
npm run lint - Run ESLint for code quality
npm run type-check - TypeScript type checking

Restaurant Web App (apps/web)

npm run dev - Start restaurant app development server (port 5173)
npm run build - Build for production deployment
npm run preview - Preview production build locally
npm run lint - Run ESLint for code quality
npm run type-check - TypeScript type checking

Restaurant Backend (apps/backend)

uvicorn main:app --reload - Start API development server (port 5000)
uvicorn main:app - Start production API server
pytest - Run backend tests
black . - Format Python code
ruff check . - Lint Python code
npx prisma generate - Generate Prisma client
npx prisma migrate dev - Run database migrations
npx prisma studio - Open database GUI
python -m scripts.seed_restaurant_data - Seed with sample menu data

🐳 Docker Development

Quick Start with Docker

Copy environment file

cp .env.example .env

Start all restaurant services

# From project root - starts everything
docker-compose up -d

This will start:

PostgreSQL database (port 5432) - Restaurant data storage
Redis cache (port 6379) - Session and cart caching
Restaurant Backend API (port 5000) - FastAPI server
Landing Site (port 3000) - Marketing website
Restaurant Web App (port 5173) - Main application
pgAdmin (port 5050) - Database management interface

Set up restaurant database

# Wait for services to start
sleep 30

# Run database migrations
docker-compose exec backend npx prisma migrate dev

# Seed with sample restaurant data
docker-compose exec backend python -m scripts.seed_restaurant_data

Access your restaurant app

Landing site: http://localhost:3000
Restaurant app: http://localhost:5173
Admin dashboard: http://localhost:5173/admin
API docs: http://localhost:5000/docs

Volume Management

All persistent restaurant data is stored in docker/volumes/:

PostgreSQL data: docker/volumes/postgres/ - Menu items, orders, reservations
Redis data: docker/volumes/redis/ - Session data and cart state
pgAdmin config: docker/volumes/pgadmin/ - Database GUI settings
File uploads: docker/volumes/uploads/ - Menu item images and assets

Useful Docker Commands

# Start all restaurant services
docker-compose up -d

# View real-time logs
docker-compose logs -f backend     # API server logs
docker-compose logs -f frontend    # React app logs
docker-compose logs -f postgres    # Database logs

# Stop all services
docker-compose down

# Restart specific service
docker-compose restart backend

# Clean database (careful - removes all restaurant data!)
docker-compose down -v
rm -rf docker/volumes/postgres

# Backup restaurant data
tar -czf restaurant-backup-$(date +%Y%m%d).tar.gz docker/volumes/

# Restore from backup
tar -xzf restaurant-backup-20240101.tar.gz

# Production deployment
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d

🔧 Restaurant Configuration

Database Setup

Configure your restaurant database in backend .env:

DATABASE_URL="postgresql://postgres:password@localhost:5432/restaurant_db"

Restaurant Architecture

This project uses a two-app restaurant architecture:

Landing Site (restaurant.com)
- Marketing and conversion-focused
- Fast loading single-page site
- Call-to-action for app signup
Restaurant Web App (app.restaurant.com)
- Menu browsing and online ordering
- Table reservations and takeaway orders
- User accounts and order history
- Integrated admin dashboard at /admin
Restaurant Backend API
- Unified FastAPI server serving both applications
- Menu management and order processing
- Real-time order tracking and notifications
- Payment processing and customer management

Authentication & Security

Clerk handles customer authentication with JWT verification:

Frontend Configuration:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_restaurant_key

Backend JWT Verification:

CLERK_JWKS_URL=https://your-restaurant.clerk.accounts.dev/.well-known/jwks.json
SECRET_KEY="your-super-secret-jwt-key"

Payment Processing

Stripe integration for order payments:

STRIPE_SECRET_KEY=sk_test_your_stripe_secret
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable

External Services

Configure notification services:

# SMS notifications for order updates
TWILIO_ACCOUNT_SID=your_twilio_sid
TWILIO_AUTH_TOKEN=your_twilio_token

# Email confirmations
SENDGRID_API_KEY=your_sendgrid_key

# Delivery zone mapping
GOOGLE_MAPS_API_KEY=your_maps_api_key

📚 Restaurant Documentation

🍽️ Restaurant-Specific Guides

📋 Project Overview - Architecture and system design
🍕 Features Guide - Complete feature specifications based on Figma
🗄️ Database Schema - Restaurant-specific database design
🌐 API Documentation - All restaurant API endpoints
🎨 UI Components - Component library and design system
👨‍💼 Admin Features - Complete admin dashboard guide
🔧 Implementation Guide - Step-by-step development guide
⚡ Quick Start - 15-minute setup guide

📖 Original Template Documentation

General Architecture - System design patterns
Deployment Guide - Production deployment instructions
UI Specification - Base design system
Admin Dashboard - General admin patterns

🧪 Testing Your Restaurant App

Frontend Testing

Landing Site

cd apps/landing
npm run test
npm run test:e2e
npm run type-check

Restaurant Web App

cd apps/web
npm run test
npm run test:e2e
npm run test:coverage
npm run type-check

Backend Testing

cd apps/backend

# Run API tests
pytest

# Test specific modules
pytest tests/test_orders.py
pytest tests/test_menu.py

# Run with coverage
pytest --cov=app tests/

Manual Testing Flows

Customer Journey: Browse menu → Add to cart → Checkout → Track order
Reservation Flow: Check availability → Book table → Receive confirmation
Admin Workflow: Login → Manage menu → Process orders → View analytics

🚀 Restaurant Deployment

See Implementation Guide for detailed production deployment.

Quick Deploy Options

Frontend (Vercel)

Backend (Railway)

Full Stack (DigitalOcean)

Use Docker Compose with production configuration
Set up managed PostgreSQL database
Configure domain and SSL certificates

🤝 Contributing to Restaurant App

Fork the restaurant app repository
Create your feature branch (git checkout -b feature/new-restaurant-feature)
Make your changes following the restaurant app patterns
Test your changes with the restaurant workflows
Commit your changes (git commit -m 'Add new restaurant feature')
Push to the branch (git push origin feature/new-restaurant-feature)
Open a Pull Request with a detailed description

Development Guidelines

Follow the restaurant domain patterns established in the codebase
Add tests for new restaurant features (orders, menu, reservations)
Update relevant documentation in docs/restaurant/
Ensure mobile-first responsive design for customer experience

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Figma Design: Restaurant app design inspiration
Icons: Heroicons and Lucide React
Images: Unsplash for sample food photography
UI Components: shadcn/ui component library
Restaurant Inspiration: Modern food delivery and restaurant management platforms

📞 Restaurant Support

Documentation: Check restaurant-specific guides
Issues: Create issues for bugs or feature requests
Discussions: Use GitHub Discussions for restaurant app questions
Email: support@your-restaurant-domain.com

🚀 Ready to Build Your Restaurant App?

Quick Start: Follow the 15-minute setup guide
Full Implementation: Use the comprehensive implementation guide
Customize: Adapt the features to your restaurant's specific needs
Deploy: Launch your restaurant's digital ordering platform

Happy cooking and coding! 🍽️👨‍💻

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🍽️ Restaurant Management Platform

🚀 Features

Restaurant Operations

Core Restaurant Features

📋 Prerequisites

🛠️ Tech Stack

Restaurant Frontend (React + Vite)

Restaurant Backend (FastAPI)

Payment & External Services

DevOps & Development

🚀 Quick Start

1. Clone the repository

2. Install dependencies

Using pnpm (Recommended)

Or install individually

Landing Site

Restaurant Web App

Restaurant Backend

3. Set up environment variables

4. Start the database

5. Set up the database

6. Start the development servers

Option A: Start all services with pnpm

Option B: Start services individually

Terminal 1 - Restaurant Backend

Terminal 2 - Landing Site

Terminal 3 - Restaurant Web App

Access Your Restaurant App

📁 Project Structure

📝 Available Scripts

Monorepo Scripts (from root)

Landing Site (apps/landing)

Restaurant Web App (apps/web)

Restaurant Backend (apps/backend)

🐳 Docker Development

Quick Start with Docker

Volume Management

Useful Docker Commands

🔧 Restaurant Configuration

Database Setup

Restaurant Architecture

Authentication & Security

Payment Processing

External Services

📚 Restaurant Documentation

🍽️ Restaurant-Specific Guides

📖 Original Template Documentation

🧪 Testing Your Restaurant App

Frontend Testing

Landing Site

Restaurant Web App

Backend Testing

Manual Testing Flows

🚀 Restaurant Deployment

Quick Deploy Options

Frontend (Vercel)

Backend (Railway)

Full Stack (DigitalOcean)

🤝 Contributing to Restaurant App

Development Guidelines

📄 License

🙏 Acknowledgments

📞 Restaurant Support

🚀 Ready to Build Your Restaurant App?