QR-Based Restaurant Ordering App
Scan a QR at the table, browse a live menu with images & categories, place orders tied to that table, track status in real-time, and call a waiter when ready to pay. Admins manage items, images, and orders with bulk cleanup.
- Express + SQLite (schema-aware SQL)
- Static uploads via Multer
- React + Axios + Context
- Socket.IO realtime events
- QR tokens per table
How it works
Open /menu?t=< token>
Token → { table_id }
Images, categories, cart
Status: pending → served
Customer flow
- QR points to /menu?t=< token> li>
- Create items with image & category
- Live board for status changes
- Cleanup served/cancelled or all orders
- Stations page lists table QR links
Key features
Menu with images & categories
Uploads via Multer → static hosting at /uploads. Category chips for quick filtering.
Table-scoped orders
Each QR embeds a token; the app resolves it to a table and scopes orders accordingly.
Order status lifecycle
PATCH /api/order/:id enforces valid transitions: pending → accepted → preparing → served.
Realtime updates
Socket.IO emits order:new and order:status so admins and customers see instant changes.
End-of-day cleanup
Bulk delete served/cancelled orders via DELETE /api/order/cleanup to keep the board tidy.
Schema-aware SQL
Detects available columns/tables with PRAGMA, avoiding “no such column” errors during incremental migrations.
Architecture & tech
Client (React) - Vite, Axios - Context cart - Socket.IO client - Image prefix: VITE_API_URL Server (Express) - Routers: /menu, /order, /table, /media - Multer uploads → /uploads - Socket.IO emits: order:new, order:status, table:call SQLite (file, single connection) - menu_items (image_url, category/category_id) - orders (table_id, item_id, quantity, status) - tables (id, number, token) - categories (optional)
Stack
Security & DX
- One DB connection; absolute paths
- CORS configured for dev
- Static hosting for media
- Robust error handling & logging
API overview
Key endpoints
- GET /api/menu
- POST /api/menu
- PATCH /api/menu/:id
- POST /api/media/upload
- POST /api/order
- PATCH /api/order/:id
- DELETE /api/order/cleanup?status=served,cancelled
- GET /api/table/resolve/:token
Sample request
POST /api/order
Content-Type: application/json
{
"table_id": 12,
"items": [
{ "item_id": 1, "quantity": 2 },
{ "item_id": 7, "quantity": 1 }
]
}
UI preview
Customer: Menu & Cart
Admin: Orders Board
Admin: New Item
Highlights
- UX Clear separation of token resolution vs data fetching; robust error paths.
- Perf useMemo for derived UI (categories), optimistic UI for status changes.
- Maintainability Schema-aware SQL avoids brittle migrations.
- Ops End-of-day cleanup endpoints; static media hosting.
- Realtime Socket.IO events for new orders and status changes.