A modern, full-stack restaurant management system featuring digital menus, QR code ordering, real-time order tracking, and comprehensive analytics.

• QR Code Digital Menus - Contactless menu access via customized QR codes
• Real-time Ordering - Place orders directly from tables without waiter intervention
• Menu Categories & Search - Easy navigation with categorized items and search functionality
• Order Tracking - Real-time order status updates (Pending → Preparing → Ready)
• Responsive Design - Optimized for mobile, tablet, and desktop devices

• Menu Management - Create, update, and organize menu items with images
• Order Management - Track and manage customer orders in real-time
• Table Management - Generate unique QR codes for each table
• Analytics Dashboard - Insights into orders, revenue, and popular items
• Staff Management - Role-based access control (Admin/Waiter)
• Receipt Generation - Automatic receipt generation for completed orders

• Next.js 14 (App Router) - React framework for production
• TypeScript - Type-safe code
• TailwindCSS - Utility-first CSS framework
• shadcn/ui - Re-usable component library
• Lucide Icons - Beautiful icon set

• Next.js API Routes - Serverless API endpoints
• NextAuth.js - Authentication solution
• Prisma ORM - Type-safe database client
• MongoDB - NoSQL database

• Cloudinary - Image upload and storage
• QR Code Generator - Dynamic QR code generation
• React Hook Form - Form validation
• Zod - Schema validation

• Node.js 18+ and npm/pnpm
• MongoDB database (local or MongoDB Atlas)
• Cloudinary account (for image uploads)

1. Clone the repository

git clone https://github.com/g1mishra/byte-eat-ui.git
cd byte-eat-ui

2. Install dependencies

pnpm install
# or
npm install

3. Environment Configuration

Create a .env file in the root directory:

# Database
DATABASE_URL="mongodb+srv://<username>:<password>@cluster.xxxxx.mongodb.net/byte_eat_db"

# Cloudinary (Image Upload)
CLOUDINARY_CLOUD_NAME="your_cloud_name"
CLOUDINARY_API_KEY="your_api_key"
CLOUDINARY_API_SECRET="your_api_secret"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# App Configuration
NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. Database Setup

pnpm migrate
# or
npm run migrate

5. Run the development server

pnpm dev
# or
npm run dev

Open http://localhost:3000 to see the application.

byte_eat_ui/
├── app/                      # Next.js app directory
│   ├── [slug]/              # Dynamic customer-facing routes
│   │   └── view-cart/       # Order placement logic
│   ├── manage/              # Restaurant management dashboard
│   │   └── restaurant/      
│   │       └── [restroId]/  
│   │           ├── manual-order/  # Manual order creation
│   │           ├── menu/          # Menu management
│   │           └── orders/        # Order management
│   ├── api/                 # API routes
│   └── onboarding/          # User onboarding
├── components/              # React components
│   ├── home/               # Landing page components
│   └── ui/                 # Reusable UI components
├── services/               # API service functions
│   ├── order.services.ts   # Order-related operations
│   ├── menu.services.ts    # Menu management
│   └── helper.service.ts   # Helper functions
├── lib/                    # Utility functions
├── prisma/                 # Database schema
│   └── schema.prisma       # Prisma schema definition
├── public/                 # Static assets
├── styles/                 # Global styles
└── types/                  # TypeScript type definitions

• app/[slug]/view-cart/page.tsx - Customer order placement
• app/manage/restaurant/[restroId]/manual-order/QuickOrder.tsx - Manual order creation
• services/order.services.ts - Core order service functions

• services/helper.service.ts - Menu item CRUD operations
• services/menu.services.ts - Menu service functions

# Development
pnpm dev          # Start development server

# Build
pnpm build        # Build for production

# Production
pnpm start        # Start production server

# Database
pnpm migrate      # Push database schema changes

# Code Quality
pnpm lint         # Run ESLint
pnpm prettier     # Format code with Prettier

The application uses 15+ database models including:

• User, Restaurant, MenuItem, Category
• Order, OrderItem, PriceItemMap
• Table, Waiter, Analytics
• And more...

See prisma/schema.prisma for the complete schema.

1. Push your code to GitHub
2. Import project to Vercel
3. Add environment variables
4. Deploy

The application can be deployed to any platform supporting Next.js:

• Netlify
• Railway
• AWS
• DigitalOcean

Check out the live demo: https://byteeat.vercel.app

Contributions are welcome! Please feel free to submit a Pull Request.

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

This project is open source and available under the MIT License.

Jeevan Mishra

• GitHub: @g1mishra
• LinkedIn: Jeevan Mishra

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide
• Hosted on Vercel

⭐ Star this repository if you find it helpful!