College Canteen Management System

A modern web-based canteen management system with QR code ordering for college canteens.

Features

Customer Features

  • šŸ“± QR code scanning for table identification
  • šŸ½ļø Browse menu with categories and prices
  • šŸ›’ Add items to cart with quantity selection
  • šŸ“ Place orders with customer details
  • ā±ļø Real-time order status updates

Admin Features

  • šŸ“Š Real-time order dashboard
  • šŸ• Menu management (add/edit/delete items)
  • šŸŖ‘ Table management with QR code generation
  • šŸ“ˆ Order status management
  • šŸ’° Basic sales tracking

Technology Stack

  • Frontend: React 18 with TypeScript
  • Backend: Hono.js API framework
  • Database: SQLite for data persistence
  • Styling: TailwindCSS
  • QR Codes: QR code generation and scanning
  • Real-time: Polling-based updates

Project Structure

ā”œā”€ā”€ backend/
│   ā”œā”€ā”€ database/
│   │   ā”œā”€ā”€ migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database query functions
│   ā”œā”€ā”€ routes/
│   │   ā”œā”€ā”€ admin.ts         # Admin panel routes
│   │   ā”œā”€ā”€ menu.ts          # Menu management routes
│   │   ā”œā”€ā”€ orders.ts        # Order management routes
│   │   └── tables.ts        # Table management routes
│   └── index.ts             # Main API entry point
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/
│   │   ā”œā”€ā”€ Admin/           # Admin panel components
│   │   ā”œā”€ā”€ Customer/        # Customer interface components
│   │   └── Shared/          # Shared UI components
│   ā”œā”€ā”€ index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared TypeScript types

Getting Started

  1. The system will automatically set up the database on first run
  2. Access the admin panel at /admin to set up menu items and tables
  3. Generate QR codes for tables from the admin panel
  4. Print and place QR codes on tables
  5. Customers scan QR codes to access the ordering interface

API Endpoints

  • GET /api/menu - Get all menu items
  • POST /api/menu - Add new menu item
  • PUT /api/menu/:id - Update menu item
  • DELETE /api/menu/:id - Delete menu item

Order Management

  • GET /api/orders - Get all orders (admin)
  • POST /api/orders - Place new order
  • PUT /api/orders/:id/status - Update order status

Table Management

  • GET /api/tables - Get all tables
  • POST /api/tables - Add new table
  • GET /api/tables/:id/qr - Get QR code for table

Database Schema

Tables

  • menu_items: id, name, description, price, category, available
  • tables: id, number, name, qr_code, active
  • orders: id, table_id, customer_name, customer_phone, items, total, status, created_at
  • order_items: id, order_id, menu_item_id, quantity, price

Order Status Flow

  1. pending - Order placed, waiting for confirmation
  2. confirmed - Order confirmed by admin
  3. preparing - Order being prepared
  4. ready - Order ready for pickup
  5. completed - Order delivered/completed
  6. cancelled - Order cancelled