Public
Like
canteen
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
index.ts
https://Pratham211--5274bfb83eef11f0b41a76b3cceeab13.web.val.run
A modern web-based canteen management system with QR code ordering for college canteens.
- π± 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
- π Real-time order dashboard
- π Menu management (add/edit/delete items)
- πͺ Table management with QR code generation
- π Order status management
- π° Basic sales tracking
- 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
βββ 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
- The system will automatically set up the database on first run
- Access the admin panel at
/admin
to set up menu items and tables - Generate QR codes for tables from the admin panel
- Print and place QR codes on tables
- Customers scan QR codes to access the ordering interface
GET /api/menu
- Get all menu itemsPOST /api/menu
- Add new menu itemPUT /api/menu/:id
- Update menu itemDELETE /api/menu/:id
- Delete menu item
GET /api/orders
- Get all orders (admin)POST /api/orders
- Place new orderPUT /api/orders/:id/status
- Update order status
GET /api/tables
- Get all tablesPOST /api/tables
- Add new tableGET /api/tables/:id/qr
- Get QR code for table
- 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
- pending - Order placed, waiting for confirmation
- confirmed - Order confirmed by admin
- preparing - Order being prepared
- ready - Order ready for pickup
- completed - Order delivered/completed
- cancelled - Order cancelled