QR Menu SaaS - Restaurant QR Menu & Order Management System

လက်ရှိ Project: Next.js, PostgreSQL (Neon.tech), Vercel တို့ဖြင့် တည်ဆောက်ထားသော Multi-Tenant QR Menu System

A modern, multi-tenant QR menu management system designed specifically for restaurants. Built with Next.js, featuring QR code generation, real-time menu management, order tracking, and mobile-friendly customer interfaces.

🌟 Features

For Restaurant Owners (Admin Dashboard)

• Multi-Tenant Architecture - Manage multiple restaurants on one platform
• Authentication System - Secure login for restaurant staff and admins
• Menu Management - Full CRUD operations for categories and menu items
• Table Management - Create and manage restaurant tables with QR codes
• Order Management - Track and manage customer orders
• Out of Stock Control - Critical feature to mark menu items as unavailable
• QR Code Generation - Automatic QR code creation for each table
• Dashboard Analytics - View restaurant statistics and performance

For Customers

• Mobile-Friendly Menu - Optimized for smartphone browsing
• QR Code Scanning - Easy access to menu via QR code
• Cart Management - Add/remove items, modify quantities
• Real-time Availability - See out-of-stock items marked clearly
• Order Placement - Send orders directly to restaurant
• Multi-language Support - Myanmar (Burmese) language support

🛠️ Tech Stack

• Framework: Next.js 16.x (App Router)
• Database: PostgreSQL via Neon.tech
• ORM: Prisma
• Authentication: NextAuth.js
• Styling: Tailwind CSS
• Language: TypeScript
• QR Codes: qrcode
• Deployment: Vercel

📋 Prerequisites

Before running this project, make sure you have:

• Node.js 18.x or higher
• npm, yarn, or pnpm package manager
• PostgreSQL database (Neon.tech recommended)
• Vercel account (for deployment)

🚀 Getting Started

1. Clone the Repository

git clone <repository-url>
cd qr-menu-saas

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Environment Setup

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@hostname:port/database"

# NextAuth.js
NEXTAUTH_SECRET="your-nextauth-secret-here"
NEXTAUTH_URL="http://localhost:3000"

Database Setup with Neon.tech:

1. Create account at Neon.tech
2. Create a new project
3. Copy the connection string
4. Add to your .env file

4. Database Setup

# Generate Prisma client
npm run db:generate

# Run database migrations
npm run db:migrate

# Seed the database (optional)
npm run db:seed

5. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

📁 Project Structure

qr-menu-saas/
├── app/                          # Next.js App Router
│   ├── api/                      # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── categories/           # Category management
│   │   ├── menu-items/           # Menu item management
│   │   ├── tables/               # Table management
│   │   └── public/               # Public endpoints
│   ├── dashboard/                # Admin dashboard
│   ├── login/                    # Login page
│   ├── menu/                     # Customer menu pages
│   └── page.tsx                  # Landing page
├── prisma/                       # Database schema and migrations
│   ├── schema.prisma             # Database schema
│   ├── migrations/               # Database migrations
│   └── seed.cjs                  # Database seeding
├── scripts/                      # Utility scripts
├── types/                        # TypeScript type definitions
└── public/                       # Static assets

🗄️ Database Schema

The system uses a multi-tenant architecture with the following main models:

Core Models

• Tenant - Restaurant/business information
• User - Restaurant staff and admin accounts
• Table - Restaurant tables with QR codes
• Category - Menu item categories
• MenuItem - Individual menu items with pricing
• Order - Customer orders
• OrderItem - Items within each order

Key Features

• Multi-tenant data isolation
• Role-based access (ADMIN, STAFF)
• Out of stock management
• Order status tracking
• Cart persistence

🔧 Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run db:generate  # Generate Prisma client
npm run db:migrate   # Run database migrations
npm run db:seed      # Seed database with sample data

🎯 Key Features Deep Dive

QR Code System

Each table generates a unique QR code containing:

https://yourdomain.com/menu/[tenantId]/[tableId]

Multi-Tenancy

• Each restaurant (tenant) has isolated data
• Users belong to specific tenants
• All queries are automatically filtered by tenant
• Support for multiple restaurants on one instance

Authentication Flow

1. Admin visits /login
2. Credentials verified against database
3. JWT token created with tenant information
4. Session established with NextAuth.js
5. Redirected to /dashboard

Order Management

1. Customer scans QR code → accesses menu
2. Adds items to cart → places order
3. Order appears in admin dashboard
4. Admin updates order status
5. Customer sees real-time updates

🌐 Deployment

Deploy to Vercel

1. Connect Repository

   # Push to GitHub
   git add .
   git commit -m "Initial commit"
   git push origin main

2. Deploy to Vercel

   • Visit Vercel Dashboard
   • Import your GitHub repository
   • Configure environment variables
   • Deploy

3. Environment Variables in Vercel

   DATABASE_URL=your_postgres_connection_string
   NEXTAUTH_SECRET=your_secret_key
   NEXTAUTH_URL=https://your-domain.vercel.app
   

Database Migration in Production

# Run migrations on production database
npx prisma migrate deploy

🔐 Security Features

• Password Hashing - bcryptjs for secure password storage
• JWT Authentication - Secure session management
• Role-Based Access - ADMIN and STAFF roles
• Multi-Tenant Isolation - Data separation between restaurants
• Input Validation - Server-side validation for all inputs
• SQL Injection Protection - Prisma ORM provides built-in protection

📱 Mobile Responsiveness

The system is fully responsive and optimized for:

• Admin Dashboard - Works on tablets and desktop
• Customer Menu - Optimized for mobile devices
• QR Code Scanning - Works with all modern smartphones

🌍 Multi-Language Support

Currently supports:

• English - Default interface language
• Myanmar (Burmese) - User-facing text and descriptions

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Development Roadmap

Current development focuses on completing the core MVP features:

Phase 1: ✅ Completed

• Basic project setup with Next.js
• Database schema design and implementation
• Authentication system
• Admin dashboard structure
• Menu management (CRUD)
• Table management with QR generation

Phase 2: 🔄 In Progress

• Customer menu interface
• Order management system
• Cart functionality
• Real-time order updates

Phase 3: 📋 Planned

• Payment integration
• Analytics dashboard
• Multi-language expansion
• Mobile app
• Advanced reporting

🐛 Known Issues

• Order status updates need real-time functionality
• Mobile menu could use more responsive design improvements
• QR code generation could be optimized for faster loading

📄 License

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

🙏 Acknowledgments

• Next.js team for the amazing framework
• Prisma for the excellent ORM
• Tailwind CSS for the utility-first CSS framework
• Neon.tech for serverless PostgreSQL hosting
• Vercel for seamless deployment

📞 Support

For support and questions:

• Create an issue on GitHub
• Check the documentation in /docs
• Review the development roadmap

---

Built with ❤️ for Myanmar restaurants

This README was generated on 2025-11-15. Last updated: 2025-11-15T13:12:44.618Z