Scan to Order · Walkthrough

How Scan to Order works

Guests scan a QR code at their restaurant table, then order, track their food and pay from their own phone. There is nothing to install and no waiting for a menu or a bill.

Try the live app

What it is and who it is for

Scan to Order is a mobile web app for restaurant guests. A guest sits down, scans the QR code on the table and lands in the restaurant's ordering flow (the demo restaurant is called Golden Bistro). From there they can browse the menu, send dishes to the kitchen, watch each dish's progress, call staff to the table and pay with the method they prefer.

It is built with React, TypeScript, Vite and Ant Design, implemented from Figma designs and tuned for a 375 px mobile viewport. The interface is in Vietnamese; the captions below quote the on-screen labels and translate them.

This is a working front-end demo. The menu is sample data and orders and payments are simulated in the browser. Nothing is sent to a real restaurant or payment provider. Every screenshot below was captured by an automated script that drives the real app through this flow in a 375 px viewport, so each image is the app's actual output.

The ordering flow, step by step

  1. Landing screen of the Golden Bistro restaurant with a photo of the dining room and two buttons: “Tôi đã đặt bàn trước” (I booked ahead) and “Mở bàn mới (Chưa đặt)” (open a new table), with a “How it works” link underneath.
    Step 1. Choose how you are seated. Pick “Tôi đã đặt bàn trước” (I booked ahead) or “Mở bàn mới” (open a new table).
  2. Table information form showing table A12, the current date and time, a name field filled in with “Minh Quang”, an optional phone number field and a green “Bắt đầu chọn món” (start choosing dishes) button.
    Step 2. Enter your name. Add a name, and optionally a phone number, to start the session for your table.
  3. Menu screen listing starter dishes such as Roasted Chicken Gristle for 149,000 đ and Camembert Cheese Truffle and Honey for 179,000 đ, each with a photo and a green plus button. The header has a cart button and a “Kiểm tra món” (check orders) button.
    Step 3. Browse the menu. Every dish shows a photo, a short description and a price, with a + button to add it.
  4. Dish detail sheet for Roasted Chicken Gristle (Sụn gà rang muối) at 149,000 đ, with a large photo, a special-notes text box, a quantity stepper and a “Thêm vào giỏ” (add to cart) button showing the price.
    Step 4. Open a dish and add it. Leave a note for the kitchen, set the quantity and tap “Thêm vào giỏ” (add to cart).
  5. Cart screen for table A12 with one item, Roasted Chicken Gristle at 149,000 đ, with Delete, Edit and quantity controls, and a “Xác nhận gọi món” (confirm order) button beside the total of 149,000 đ.
    Step 5. Review the cart. Delete, edit or change quantities, then tap “Xác nhận gọi món” (confirm order).
  6. Confirmation dialog titled “Xác nhận gọi món?” (confirm your order?) saying the order will be sent straight to the restaurant's kitchen, with “Hủy” (cancel) and “Gọi ngay” (order now) buttons.
    Step 6. Send the order to the kitchen. One confirmation dialog, then “Gọi ngay” (order now) places the order.
  7. Order tracking screen titled “Kiểm tra món” (check dishes) with tabs “Đang chuẩn bị (1)” (preparing) and “Đã hoàn tất (0)” (completed). It lists Roasted Chicken Gristle ordered by Minh Quang, with “Gọi thêm món” (order more) and “Gọi thanh toán” (request payment) buttons above a running total of 149,000 đ.
    Step 7. Track your food. Each dish moves from “preparing” to “completed”, and you can order more at any time.
  8. Dialog “Yêu cầu thanh toán” (payment request) explaining that the system will call a staff member to the table to help with payment, with “Hủy” (cancel) and “Xác nhận” (confirm) buttons.
    Step 8. Ask for the bill. “Gọi thanh toán” (request payment) opens a dialog saying staff will come to the table.
  9. Payment screen with a five-step progress bar (three steps done, the fourth active) and seven payment method cards: Cash, Napas247 (selected), Zalopay, Momo, Shopee Pay, Payoo and Payme. Below is a payment summary with a total of 160,920 đ.
    Step 9. Choose how to pay. After confirming the items and the optional VAT invoice details, pick a method (Napas247 is selected here).
  10. Payment success screen with all five progress steps checked, a 3D illustration of a phone, a receipt and a cup, the message “Thanh toán thành công” (payment successful) and a summary with transaction code, time, table A12 and a total of 160,920 đ.
    Step 10. Done. The success screen confirms the payment with a transaction reference, the table and the total.

Try it yourself

Open the live app and tap “Mở bàn mới (Chưa đặt)”. Enter any name, add a dish and follow the steps above. On a desktop browser the app appears inside a phone-sized frame; open it on your phone, or narrow the window, for the full-screen mobile layout.