Project Overview

Click-n-Bite is a full-featured digital restaurant menu platform designed to bring dining experiences into the digital age. The platform empowers restaurants to create and manage interactive QR code menus, receive contactless orders, and manage their digital presence—all from a centralized CMS interface. Built with Next.js 15, Payload CMS, and TypeScript, it offers both scalability and maintainability with a strong emphasis on performance and modern architecture.

This project represents a robust, production-grade SaaS-style solution with multi-tenant support, allowing multiple restaurants to operate independently on the same infrastructure while maintaining their unique branding and data.

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript for strict type safety
• CMS & Backend: Payload CMS (self-hosted headless CMS)
• Database: PostgreSQL with Vercel Postgres adapter
• Storage: Vercel Blob for image and file management
• Styling: TailwindCSS 4 for responsive, utility-first design
• UI Components: Radix UI for accessible and composable building blocks
• Animations: Framer Motion for subtle, high-performance motion effects
• State Management: Zustand for lightweight and scalable global state
• Data Fetching: TanStack Query for efficient server state synchronization
• Email Integration: Resend for transactional emails
• Containerization: Docker for local database and environment setup
• Linting & Formatting: ESLint and Prettier for code consistency

Key Features

• 🏗️ Multi-tenant Architecture: Host and manage multiple restaurants within a single platform instance. Each tenant (restaurant) has isolated data, branding, and admin access.
• 🍽️ Digital Menu System: Build visually appealing, fully responsive menus with categories, subcategories, and menu items supporting media, tags, and descriptions.
• 🧾 Order Management: Integrated basket system with item-level customization, quantity management, and WhatsApp-based order sharing.
• 📱 QR Code Generation: Automatically generate QR codes for each restaurant or menu, enabling seamless access and contactless ordering.
• 🖥️ Admin Dashboard: Manage restaurants, categories, and menu items through a modern Payload CMS admin interface with real-time updates.
• 🌍 Multi-language Support: Integrated i18n for international restaurants with right-to-left (RTL) support.
• ⚡ Real-time Updates: Instant content synchronization powered by Payload’s modern API architecture.
• 🎨 Custom Branding: Each tenant can personalize its colors, logos, and visual identity to maintain brand consistency.

Installation

# Clone the repository
git clone https://github.com/alishour-dev/click-n-bite
cd click-n-bite

# Install dependencies
pnpm install

# Copy environment variables
cp .env.example .env.local

# Start the database (Docker)
./start-database.sh

# Run development server
pnpm dev

Access the app at http://localhost:3000

Development Process

Click-n-Bite was developed as a comprehensive full-stack project, handling both the backend CMS and the frontend client layers. The development involved:

• Architecting a multi-tenant system supporting multiple restaurants
• Implementing Payload CMS collections for categories, menu items, tenants, and users
• Designing responsive, mobile-first UI with TailwindCSS and Radix UI
• Building real-time CMS synchronization and content preview
• Integrating Framer Motion animations for smooth transitions
• Creating QR code and WhatsApp integrations for easy menu access and order sharing
• Ensuring performance optimization, SEO compliance, and accessibility
• Containerizing backend components using Docker
• Deploying the app to Vercel with production-grade environment setup

Architecture Overview

Frontend (Next.js 15)
      │
      ▼
Backend (Payload CMS)
      │
      ▼
Database (PostgreSQL) ─── Storage (Vercel Blob)
      │
      ▼
QR Codes & Order Sharing (WhatsApp Integration)

Each restaurant (tenant) operates under its own subdomain or slug, with isolated menu data, custom branding, and localized content.

Deployment

The platform is deployed on Vercel, with Payload CMS and PostgreSQL hosted using Vercel’s managed services.

Storage is handled via Vercel Blob, ensuring fast and secure delivery of images and assets.

Environment variables, build optimizations, and server-side rendering ensure the app performs seamlessly in production.

Conclusion

ClicknBite showcases a modern, scalable approach to building multi-tenant SaaS platforms with Next.js and Payload CMS. It blends elegant UI/UX design with powerful backend flexibility—providing restaurants with a future-ready digital experience.