Scan
The guest scans the QR code assigned to the table.
← Our Work
PRODUCT DEMO · HOSPITALITY
QR Ordering System.
A connected café ordering flow that starts with a table QR code and continues through menu browsing, cart, live order status and a secure staff dashboard.
PROJECT TYPEFunctional product demo
USE CASECafé self-ordering
PLATFORMResponsive web application
CORE STACKHTML · CSS · JS · Supabase
THE CHALLENGE
Ordering should feel faster than calling a waiter.
A useful QR menu can do more than replace a printed menu. The goal was to create a complete table ordering flow without requiring customers to install an app or create an account.
At the same time, staff needed a clear way to receive new orders, move them through preparation and control which drinks were currently available.
THE FLOW
From scan to served in one connected system.
Each table gets its own QR code. The table number travels with the order automatically, while customer and staff interfaces stay synchronized through Supabase.
Browse
The drinks menu opens instantly on the customer's phone.
Order
Items, quantities and an optional note are sent securely.
Prepare
Staff receive the order and update its preparation status.
Follow
The guest sees live status changes until the order is served.
CUSTOMER MENU
The menu opens where the customer already is — on their phone.
The customer side is mobile-first and table-aware. A single café website can serve every table by reading the table number from the QR code URL.
- Automatic table identification
- Menu categories and filtering
- Live drink availability
- No account or app installation required
CART & ORDER
A short path from choice to confirmed order.
The cart keeps the process simple while still giving the customer enough control before sending the order.
- Quantity controls
- Optional order note
- Clear order summary
- Multiple orders during the same visit
STAFF DASHBOARD
Incoming orders stay visible, organized and actionable.
The staff side is built for day-to-day operation. Authorized team members sign in, see new orders and move each one through a clear workflow.
- Secure staff authentication
- Sound and visual alerts for new orders
- Active orders and order history
- Live menu availability controls
ORDER STATUS
One order. Four clear states.
The same status is reflected across staff and customer views, so both sides know what is happening without extra messages.
The order reaches the staff dashboard.
Staff starts preparing the drinks.
The order is ready to be served.
The completed order moves to history.
TABLE QR LOGIC
One menu. A different identity for every table.
The café does not need a separate page for every table. The same customer interface reads the table number from the URL and attaches it to every order.
- Easy to add new tables
- No code changes for each QR code
- Table number travels with every order
- Works with printed QR cards or stickers
TABLE 07Scan to order?table=7BUILT FOR REAL USE
Simple on the surface. Structured underneath.
The interface stays lightweight, while Supabase handles authentication, database access, live updates and the trusted order workflow behind the scenes.
Supabase
Orders, menu availability and live status updates stay connected in one backend.
Secure pricing
Trusted database prices are used when the final order total is calculated.
Staff access
Only authorized staff accounts can access the operational dashboard.
Mobile-first
The customer experience is designed for the device used at the table: the phone.
THE RESULT
More than a QR menu. A complete ordering workflow.
This demo shows how a simple QR code can become the entry point to a connected digital product for both customers and staff — without forcing either side into unnecessary complexity.