Smart Menu & Order System

A modern, multilingual café menu and ordering system built with Next.js, featuring QR code table integration and WhatsApp ordering.

Features

• ▸Multilingual Support: English, French, and Arabic with RTL support
• ▸QR Code Table Integration: Generate unique QR codes for each table
• ▸WhatsApp Ordering: Send orders directly to WhatsApp
• ▸Responsive Design: Works seamlessly on mobile, tablet, and desktop
• ▸Dark Mode Support: Automatic theme switching based on system preferences
• ▸Shopping Cart: Add items, adjust quantities, and manage orders
• ▸Category Filtering: Browse menu items by category

Tech Stack

• ▸Framework: Next.js 16
• ▸Styling: Tailwind CSS 4
• ▸UI Components: shadcn/ui
• ▸Icons: Lucide React
• ▸QR Codes: react-qr-code
• ▸Language: TypeScript

Getting Started Prerequisites: Node.js 18+, pnpm (recommended) or npm/yarn

Installation:

pnpm install
pnpm dev

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

Build for Production:

pnpm build
pnpm start

Project Structure

smart-menu-and-order/
├── src/
│   ├── app/              # Next.js app directory
│   ├── components/       # React components
│   │   ├── features/    # Feature-specific components
│   │   └── ui/          # shadcn/ui components
│   ├── lib/             # Utility libraries and contexts
│   └── globals.css      # Global styles
├── public/              # Static assets
└── package.json

Usage For Customers:

• ▸Scan the QR code at your table
• ▸Browse the menu and select items
• ▸Add items to your cart
• ▸Review your order and send via WhatsApp

For Staff:

• ▸Click the QR code icon (bottom right) to access the admin panel
• ▸Enter a table number to generate a unique QR code
• ▸Download and print the QR code for table placement

Configuration

• ▸WhatsApp Number: Update in src/lib/data.ts
• ▸Menu Items: Add or modify in src/lib/data.ts
• ▸Languages: Translations managed in src/lib/translations.ts (English, French, Arabic)