Cô lập phiên bàn
Mỗi lượt khách có `tableId + sessionId` riêng để khách mới không thấy giỏ hàng, đơn hoặc thông báo của khách cũ.
Báo cáo project
Scan to Order.
Sản phẩm môn học/side project full-stack cho quán ăn: khách quét QR tại bàn để gọi món, bếp và phục vụ nhận trạng thái realtime, thanh toán VietQR/SePay theo phiên và có chatbot RAG hỗ trợ tư vấn món.
1 thành viên (Cá nhân)React 19Express 5PostgreSQLSocket.ioQdrantBGE-M3CloudinarySePay
Cuộn xuống để khám phá
Chức năng chính
Khách quét QR tại bàn để vào đúng phiên bàn, xem menu, chọn size/topping, ghi chú món và đặt trực tiếp.
Giỏ hàng & tuỳ chỉnh món
Hỗ trợ thêm/sửa/xóa món, cộng dồn số lượng, ghi chú chế biến và tính tạm tính trước khi gửi bếp.
Cập nhật real-time
Khách, bếp, phục vụ và quản lý nhận trạng thái đơn/bàn qua Socket.io mà không cần reload.
Kitchen board cho bếp
Bếp xem hàng đợi món, nhận đơn, chuyển trạng thái confirmed/cooking/ready và báo waiter phục vụ.
Waiter dashboard
Nhân viên theo dõi sơ đồ bàn, SOS/gọi phục vụ, chi tiết đơn, chuyển/gộp bàn và xác nhận thanh toán.
Thanh toán VietQR/SePay
Tạo QR đúng số tiền, theo dõi trạng thái bằng webhook/polling và đóng phiên sau khi thanh toán xong.
AI/RAG & vận hành
Bé Bảy AI dùng Qdrant/BGE-M3 để tư vấn món, gọi nhân viên và hỗ trợ thanh toán theo phiên bàn.
Feedback & lịch sử đơn
Khách gửi đánh giá ẩn danh sau thanh toán; nhân viên có màn hình xem feedback, lịch sử đơn và doanh thu.
Admin vận hành quán
Admin theo dõi doanh thu hôm nay, bàn đang hoạt động, payment pending, backlog bếp, yêu cầu phục vụ và rating.
Chức năng chính
Khách quét QR tại bàn để vào đúng phiên bàn, xem menu, chọn size/topping, ghi chú món và đặt trực tiếp.
01
Cô lập phiên bàn
Mỗi lượt khách có `tableId + sessionId` riêng để khách mới không thấy giỏ hàng, đơn hoặc thông báo của khách cũ.
02
Giỏ hàng & tuỳ chỉnh món
Hỗ trợ thêm/sửa/xóa món, cộng dồn số lượng, ghi chú chế biến và tính tạm tính trước khi gửi bếp.
03
Cập nhật real-time
Khách, bếp, phục vụ và quản lý nhận trạng thái đơn/bàn qua Socket.io mà không cần reload.
04
Kitchen board cho bếp
Bếp xem hàng đợi món, nhận đơn, chuyển trạng thái confirmed/cooking/ready và báo waiter phục vụ.
05
Waiter dashboard
Nhân viên theo dõi sơ đồ bàn, SOS/gọi phục vụ, chi tiết đơn, chuyển/gộp bàn và xác nhận thanh toán.
06
Thanh toán VietQR/SePay
Tạo QR đúng số tiền, theo dõi trạng thái bằng webhook/polling và đóng phiên sau khi thanh toán xong.
07
AI/RAG & vận hành
Bé Bảy AI dùng Qdrant/BGE-M3 để tư vấn món, gọi nhân viên và hỗ trợ thanh toán theo phiên bàn.
08
Feedback & lịch sử đơn
Khách gửi đánh giá ẩn danh sau thanh toán; nhân viên có màn hình xem feedback, lịch sử đơn và doanh thu.
09
Admin vận hành quán
Admin theo dõi doanh thu hôm nay, bàn đang hoạt động, payment pending, backlog bếp, yêu cầu phục vụ và rating.
Situation - Bối cảnh
Tôi đặt dự án vào bối cảnh một quán ăn đông khách, nơi khách không muốn chờ nhân viên chỉ để gọi thêm món, còn bếp và phục vụ cần thấy đơn mới ngay khi phát sinh.
Không chỉ là menu online
Mục tiêu của tôi không phải làm một trang menu tĩnh. Sản phẩm phải có đủ vòng đời của một lượt ăn: quét QR, chọn món, gửi bếp, theo dõi trạng thái, gọi phục vụ, thanh toán và đánh giá.
Phạm vi môn học rõ ràng
Repo thể hiện một project full-stack dùng React 19, Express 5, PostgreSQL, Socket.IO, SePay/VietQR, Qdrant/BGE-M3 và Cloudinary; có README, API docs, cấu trúc test và mô tả deployment.
4 nhóm người dùng
Sản phẩm phục vụ khách tại bàn, waiter, nhân viên bếp và admin/chủ quán. Mỗi nhóm có màn hình và quyền thao tác riêng thay vì dùng chung một dashboard đơn giản.
Vai trò cá nhân
Tôi xử lý theo hướng full-stack: dựng frontend React/Vite, backend Express, PostgreSQL schema, Socket.IO events, staff auth, payment flow, AI assistant và tài liệu kỹ thuật.
MVP rồi mở rộng
MVP tập trung vào QR, menu, cart, order, waiter, kitchen, cash payment và realtime. Sau đó project mở rộng thêm SePay, feedback, service request, AI chatbot, loyalty và admin screens.
Chọn stack theo nghiệp vụ
PostgreSQL phù hợp cho order/payment có trạng thái; Socket.IO xử lý các sự kiện tức thời; React/Vite giúp làm nhiều màn hình nhanh; Qdrant/BGE-M3 phục vụ tìm kiếm ngữ nghĩa cho menu.
Case study Bún Bò Bà Bảy
Tôi xây sản phẩm dựa trên một quán bún bò thật ngoài đời để bài toán có menu, khách tại bàn, bếp, phục vụ và payment rõ ràng hơn một project giả lập chung chung.
Giả định vận hành nhiều chi nhánh
Tôi đặt yêu cầu như một quán đông có 100-200 khách/ngày và có thể mở nhiều branch: owner cần biết tiền đã thu, bàn nào đang kẹt, bếp có backlog không và khách có phản hồi xấu không.
2+ tháng phát triển cá nhân
Tôi làm cá nhân trong hơn 2 tháng, chưa tính thời gian viết docs và các khoảng nghỉ giữa chừng. Đây là project tôi dùng để tự luyện cách xây một SaaS vận hành đầy đủ.
Situation - Bối cảnh
Tôi đặt dự án vào bối cảnh một quán ăn đông khách, nơi khách không muốn chờ nhân viên chỉ để gọi thêm món, còn bếp và phục vụ cần thấy đơn mới ngay khi phát sinh.
01
Không chỉ là menu online
Mục tiêu của tôi không phải làm một trang menu tĩnh. Sản phẩm phải có đủ vòng đời của một lượt ăn: quét QR, chọn món, gửi bếp, theo dõi trạng thái, gọi phục vụ, thanh toán và đánh giá.
02
Phạm vi môn học rõ ràng
Repo thể hiện một project full-stack dùng React 19, Express 5, PostgreSQL, Socket.IO, SePay/VietQR, Qdrant/BGE-M3 và Cloudinary; có README, API docs, cấu trúc test và mô tả deployment.
03
4 nhóm người dùng
Sản phẩm phục vụ khách tại bàn, waiter, nhân viên bếp và admin/chủ quán. Mỗi nhóm có màn hình và quyền thao tác riêng thay vì dùng chung một dashboard đơn giản.
04
Vai trò cá nhân
Tôi xử lý theo hướng full-stack: dựng frontend React/Vite, backend Express, PostgreSQL schema, Socket.IO events, staff auth, payment flow, AI assistant và tài liệu kỹ thuật.
05
MVP rồi mở rộng
MVP tập trung vào QR, menu, cart, order, waiter, kitchen, cash payment và realtime. Sau đó project mở rộng thêm SePay, feedback, service request, AI chatbot, loyalty và admin screens.
06
Chọn stack theo nghiệp vụ
PostgreSQL phù hợp cho order/payment có trạng thái; Socket.IO xử lý các sự kiện tức thời; React/Vite giúp làm nhiều màn hình nhanh; Qdrant/BGE-M3 phục vụ tìm kiếm ngữ nghĩa cho menu.
07
Case study Bún Bò Bà Bảy
Tôi xây sản phẩm dựa trên một quán bún bò thật ngoài đời để bài toán có menu, khách tại bàn, bếp, phục vụ và payment rõ ràng hơn một project giả lập chung chung.
08
Giả định vận hành nhiều chi nhánh
Tôi đặt yêu cầu như một quán đông có 100-200 khách/ngày và có thể mở nhiều branch: owner cần biết tiền đã thu, bàn nào đang kẹt, bếp có backlog không và khách có phản hồi xấu không.
09
2+ tháng phát triển cá nhân
Tôi làm cá nhân trong hơn 2 tháng, chưa tính thời gian viết docs và các khoảng nghỉ giữa chừng. Đây là project tôi dùng để tự luyện cách xây một SaaS vận hành đầy đủ.
Task - Nhiệm vụ
Bài toán chính là giảm các điểm nghẽn quen thuộc: khách chờ gọi món, nhân viên ghi nhầm, bếp nhận đơn trễ, phục vụ không biết bàn nào cần hỗ trợ và thu ngân phải đối soát thủ công.
Cô lập phiên theo từng lượt khách
Một bàn có thể phục vụ nhiều lượt khách trong ngày. Vì vậy cùng một mã QR không được làm lẫn giỏ hàng, đơn, thanh toán hay thông báo của khách cũ sang khách mới.
Đồng bộ nhiều màn hình vận hành
Tôi cần đồng bộ realtime giữa ít nhất 3 nhóm người dùng: khách tại bàn, nhân viên bếp và waiter/admin. Mỗi nhóm nhìn một màn hình khác nhau nhưng phải cùng hiểu một trạng thái đơn.
Bao phủ nhiều chức năng hơn demo
Dự án phải vượt khỏi 2 chức năng cơ bản. README mô tả các luồng menu, cart, order item status, payment, feedback, service request, table management, AI chatbot và staff dashboard.
State machine cho món ăn
Món ăn không thể nhảy trạng thái tùy ý. Luồng hợp lệ là pending → confirmed → cooking → ready → serving → served, nên backend phải kiểm soát transition thay vì chỉ update text.
Thanh toán cần idempotent
Thanh toán có thể đến từ staff xác nhận tiền mặt, SePay webhook hoặc polling fallback. Nếu các nguồn này trùng thời điểm, hệ thống vẫn phải tránh cập nhật sai trạng thái.
AI không được bịa menu
Chatbot phải trả lời dựa trên sản phẩm thật trong database. Với câu hỏi giá/món có bán hay không, hệ thống ưu tiên DB-first thay vì để LLM tự tưởng tượng.
Dashboard dễ quá tải
Waiter và bếp phải nhìn nhiều bàn, nhiều đơn và nhiều trạng thái cùng lúc. UI cần ưu tiên thông tin hành động được ngay: món nào cần xác nhận, bàn nào SOS, payment nào đang chờ.
Cloud deployment có lỗi thật
Dự án từng phải xử lý việc Render PostgreSQL free bị giới hạn/hết hạn, chuyển hướng sang Supabase và thêm startup guard để background jobs không làm server crash/log spam khi DB lỗi.
Ảnh món phải ổn định trên cloud
Menu quán phụ thuộc ảnh món. Khi migrate ảnh sang Cloudinary, hệ thống cần verify URL và fallback ảnh cũ để tránh màn hình menu bị vỡ nếu dữ liệu chưa đồng bộ hết.
Task - Nhiệm vụ
Bài toán chính là giảm các điểm nghẽn quen thuộc: khách chờ gọi món, nhân viên ghi nhầm, bếp nhận đơn trễ, phục vụ không biết bàn nào cần hỗ trợ và thu ngân phải đối soát thủ công.
01
Cô lập phiên theo từng lượt khách
Một bàn có thể phục vụ nhiều lượt khách trong ngày. Vì vậy cùng một mã QR không được làm lẫn giỏ hàng, đơn, thanh toán hay thông báo của khách cũ sang khách mới.
02
Đồng bộ nhiều màn hình vận hành
Tôi cần đồng bộ realtime giữa ít nhất 3 nhóm người dùng: khách tại bàn, nhân viên bếp và waiter/admin. Mỗi nhóm nhìn một màn hình khác nhau nhưng phải cùng hiểu một trạng thái đơn.
03
Bao phủ nhiều chức năng hơn demo
Dự án phải vượt khỏi 2 chức năng cơ bản. README mô tả các luồng menu, cart, order item status, payment, feedback, service request, table management, AI chatbot và staff dashboard.
04
State machine cho món ăn
Món ăn không thể nhảy trạng thái tùy ý. Luồng hợp lệ là pending → confirmed → cooking → ready → serving → served, nên backend phải kiểm soát transition thay vì chỉ update text.
05
Thanh toán cần idempotent
Thanh toán có thể đến từ staff xác nhận tiền mặt, SePay webhook hoặc polling fallback. Nếu các nguồn này trùng thời điểm, hệ thống vẫn phải tránh cập nhật sai trạng thái.
06
AI không được bịa menu
Chatbot phải trả lời dựa trên sản phẩm thật trong database. Với câu hỏi giá/món có bán hay không, hệ thống ưu tiên DB-first thay vì để LLM tự tưởng tượng.
07
Dashboard dễ quá tải
Waiter và bếp phải nhìn nhiều bàn, nhiều đơn và nhiều trạng thái cùng lúc. UI cần ưu tiên thông tin hành động được ngay: món nào cần xác nhận, bàn nào SOS, payment nào đang chờ.
08
Cloud deployment có lỗi thật
Dự án từng phải xử lý việc Render PostgreSQL free bị giới hạn/hết hạn, chuyển hướng sang Supabase và thêm startup guard để background jobs không làm server crash/log spam khi DB lỗi.
09
Ảnh món phải ổn định trên cloud
Menu quán phụ thuộc ảnh món. Khi migrate ảnh sang Cloudinary, hệ thống cần verify URL và fallback ảnh cũ để tránh màn hình menu bị vỡ nếu dữ liệu chưa đồng bộ hết.
Action - Quyết định & Thực thi
Tôi chia sản phẩm thành client mobile-first cho khách, kitchen board cho bếp, waiter dashboard cho phục vụ và các màn hình quản lý như feedback, lịch sử đơn, sản phẩm.
Thiết kế realtime bằng Socket.IO
Tôi dùng Socket.IO cho các sự kiện như đơn mới, món đang nấu, món sẵn sàng, thanh toán hoàn tất, SOS và cập nhật bàn. Room theo `tableId + sessionId` giúp thông báo đi đúng phiên.
Xây session isolation
Tôi triển khai token/session cho lượt quét QR, middleware kiểm tra `tableId` và `sessionId`, cảnh báo idle, đóng phiên sau thanh toán và xoá local cart để hạn chế rò rỉ dữ liệu bàn cũ.
Hoàn thiện thanh toán VietQR/SePay
Tôi tạo luồng QR thanh toán theo đúng số tiền của đơn, có trạng thái chờ xử lý, webhook SePay và polling dự phòng để cập nhật payment status khi webhook gặp sự cố.
Đưa AI vào đúng nghiệp vụ
Tôi xây Bé Bảy AI theo hướng DB-first/RAG: hỏi giá và món thì ưu tiên dữ liệu menu thật, tư vấn thì dùng Qdrant/BGE-M3, còn action như thêm món/gọi nhân viên phải đi qua guard.
Viết tài liệu như một sản phẩm
Tôi bổ sung README chi tiết về cài đặt, biến môi trường, API endpoints, real-time events, deployment, scripts database và test rules để người khác đọc repo vẫn hiểu cách hệ thống chạy.
Tổ chức backend theo domain
Tôi chia route/controller theo domain như menu, order, staff, kitchen, payment, feedback, sepay, chatbot và client để reviewer nhìn vào biết từng phần chịu trách nhiệm gì.
Giữ backend là source of truth
Tôi không tin giá tiền, payment status hay quyền từ frontend. Backend validate sản phẩm, trạng thái phiên, quyền staff và tổng tiền trước khi tạo order hoặc hoàn tất thanh toán.
Thêm scripts vận hành dữ liệu
Tôi chuẩn bị seed staff, seed database, seed knowledge base, sync/verify database và verify/update Cloudinary image URL để việc setup không phụ thuộc thao tác thủ công.
Đưa admin vào luồng owner
Tôi xây admin overview để chủ quán thấy doanh thu hôm nay, số đơn, bàn đang hoạt động, payment pending, backlog bếp, service request và rating mà không phải mở từng màn hình riêng.
Action - Quyết định & Thực thi
Tôi chia sản phẩm thành client mobile-first cho khách, kitchen board cho bếp, waiter dashboard cho phục vụ và các màn hình quản lý như feedback, lịch sử đơn, sản phẩm.
01
Thiết kế realtime bằng Socket.IO
Tôi dùng Socket.IO cho các sự kiện như đơn mới, món đang nấu, món sẵn sàng, thanh toán hoàn tất, SOS và cập nhật bàn. Room theo `tableId + sessionId` giúp thông báo đi đúng phiên.
02
Xây session isolation
Tôi triển khai token/session cho lượt quét QR, middleware kiểm tra `tableId` và `sessionId`, cảnh báo idle, đóng phiên sau thanh toán và xoá local cart để hạn chế rò rỉ dữ liệu bàn cũ.
03
Hoàn thiện thanh toán VietQR/SePay
Tôi tạo luồng QR thanh toán theo đúng số tiền của đơn, có trạng thái chờ xử lý, webhook SePay và polling dự phòng để cập nhật payment status khi webhook gặp sự cố.
04
Đưa AI vào đúng nghiệp vụ
Tôi xây Bé Bảy AI theo hướng DB-first/RAG: hỏi giá và món thì ưu tiên dữ liệu menu thật, tư vấn thì dùng Qdrant/BGE-M3, còn action như thêm món/gọi nhân viên phải đi qua guard.
05
Viết tài liệu như một sản phẩm
Tôi bổ sung README chi tiết về cài đặt, biến môi trường, API endpoints, real-time events, deployment, scripts database và test rules để người khác đọc repo vẫn hiểu cách hệ thống chạy.
06
Tổ chức backend theo domain
Tôi chia route/controller theo domain như menu, order, staff, kitchen, payment, feedback, sepay, chatbot và client để reviewer nhìn vào biết từng phần chịu trách nhiệm gì.
07
Giữ backend là source of truth
Tôi không tin giá tiền, payment status hay quyền từ frontend. Backend validate sản phẩm, trạng thái phiên, quyền staff và tổng tiền trước khi tạo order hoặc hoàn tất thanh toán.
08
Thêm scripts vận hành dữ liệu
Tôi chuẩn bị seed staff, seed database, seed knowledge base, sync/verify database và verify/update Cloudinary image URL để việc setup không phụ thuộc thao tác thủ công.
09
Đưa admin vào luồng owner
Tôi xây admin overview để chủ quán thấy doanh thu hôm nay, số đơn, bàn đang hoạt động, payment pending, backlog bếp, service request và rating mà không phải mở từng màn hình riêng.
Result - Kết quả đạt được
Dự án bao phủ trọn vòng đời một lượt ăn: quét QR, xem menu, tuỳ chỉnh món, gửi bếp, theo dõi trạng thái, gọi phục vụ, thanh toán và đánh giá sau khi hoàn tất.
14 màn hình minh chứng
Portfolio đang có 14 ảnh cho Scan to Order: home, menu, detail món, cart, QR thanh toán, xác nhận thanh toán, đặt món thành công, chatbot, feedback, gửi yêu cầu, idle reminder, bếp và waiter.
Điểm mạnh của dự án
Dự án giúp tôi thể hiện đủ năng lực full-stack: đọc pain point vận hành, thiết kế UI theo vai trò, xây API, database, realtime, payment, AI/RAG, session security và tài liệu kỹ thuật.
Phạm vi source đủ lớn
Source có 18 route file, 22 controller file và khoảng 74 route handler. Đây là phạm vi đủ để nói về cấu trúc backend, không chỉ vài endpoint mẫu.
Database có nghiệp vụ thật
Schema SQL có 20 bảng, trong đó docs chuẩn hóa 13 bảng nghiệp vụ chính như products, tables, table_sessions, orders, order_items, payments, feedbacks và service_requests.
Có dấu vết commit kỹ thuật
GitHub có commit/PR về AI chatbot enhance, session validation, Supabase migration, Cloudinary image rendering, loyalty/voucher flow và UI polish cho waiter page.
Production demo & test nhóm nhỏ
Project đã chạy production demo trên cloud và từng được 5-6 người test cùng lúc để kiểm tra luồng order, realtime, payment, AI và dashboard staff/admin.
Limitation thực tế
Các giới hạn còn lại không phải UI demo: cold start/giới hạn free tier trên Render, rate limit/độ trễ LLM provider, WebSocket cần Redis adapter nếu scale nhiều instance và multi-branch vẫn là roadmap.
Roadmap owner SaaS
Hướng phát triển tiếp là nâng AI và admin thành công cụ cho một chủ quán quản lý nhiều chi nhánh: branch-level revenue, menu performance, staff performance, table turnover và cảnh báo vận hành.
Nhận Thức Chuyên Môn Cốt Lõi
Bài học lớn nhất là realtime không chỉ là gửi socket event; quan trọng hơn là biết event thuộc phiên nào, bàn nào, người nào và khi nào phải đóng phiên.
Kinh Nghiệm Giải Quyết Vấn Đề
Tôi học được cách tách AI ra khỏi nghiệp vụ lõi: chatbot có thể tư vấn/gợi ý/gọi action, nhưng các hành động nhạy cảm vẫn cần guard, context và validation.
Giá Trị Kỹ Năng Đúc Kết Được
Dự án giúp tôi thể hiện rõ quá trình đi từ pain point vận hành đến kiến trúc, giao diện, backend, thanh toán, dữ liệu và tài liệu kỹ thuật.
Result - Kết quả đạt được
Dự án bao phủ trọn vòng đời một lượt ăn: quét QR, xem menu, tuỳ chỉnh món, gửi bếp, theo dõi trạng thái, gọi phục vụ, thanh toán và đánh giá sau khi hoàn tất.
01
14 màn hình minh chứng
Portfolio đang có 14 ảnh cho Scan to Order: home, menu, detail món, cart, QR thanh toán, xác nhận thanh toán, đặt món thành công, chatbot, feedback, gửi yêu cầu, idle reminder, bếp và waiter.
02
Điểm mạnh của dự án
Dự án giúp tôi thể hiện đủ năng lực full-stack: đọc pain point vận hành, thiết kế UI theo vai trò, xây API, database, realtime, payment, AI/RAG, session security và tài liệu kỹ thuật.
03
Phạm vi source đủ lớn
Source có 18 route file, 22 controller file và khoảng 74 route handler. Đây là phạm vi đủ để nói về cấu trúc backend, không chỉ vài endpoint mẫu.
04
Database có nghiệp vụ thật
Schema SQL có 20 bảng, trong đó docs chuẩn hóa 13 bảng nghiệp vụ chính như products, tables, table_sessions, orders, order_items, payments, feedbacks và service_requests.
05
Có dấu vết commit kỹ thuật
GitHub có commit/PR về AI chatbot enhance, session validation, Supabase migration, Cloudinary image rendering, loyalty/voucher flow và UI polish cho waiter page.
06
Production demo & test nhóm nhỏ
Project đã chạy production demo trên cloud và từng được 5-6 người test cùng lúc để kiểm tra luồng order, realtime, payment, AI và dashboard staff/admin.
07
Limitation thực tế
Các giới hạn còn lại không phải UI demo: cold start/giới hạn free tier trên Render, rate limit/độ trễ LLM provider, WebSocket cần Redis adapter nếu scale nhiều instance và multi-branch vẫn là roadmap.
08
Roadmap owner SaaS
Hướng phát triển tiếp là nâng AI và admin thành công cụ cho một chủ quán quản lý nhiều chi nhánh: branch-level revenue, menu performance, staff performance, table turnover và cảnh báo vận hành.
09
Nhận Thức Chuyên Môn Cốt Lõi
Bài học lớn nhất là realtime không chỉ là gửi socket event; quan trọng hơn là biết event thuộc phiên nào, bàn nào, người nào và khi nào phải đóng phiên.
010
Kinh Nghiệm Giải Quyết Vấn Đề
Tôi học được cách tách AI ra khỏi nghiệp vụ lõi: chatbot có thể tư vấn/gợi ý/gọi action, nhưng các hành động nhạy cảm vẫn cần guard, context và validation.
011
Giá Trị Kỹ Năng Đúc Kết Được
Dự án giúp tôi thể hiện rõ quá trình đi từ pain point vận hành đến kiến trúc, giao diện, backend, thanh toán, dữ liệu và tài liệu kỹ thuật.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
Xem toàn màn hình
01
màn hình chính
Giao diện trang chủ chào đón thực khách ngay sau khi quét mã QR tại bàn, hiển thị lời mời món ăn đặc trưng nổi bật của quán.
Xem toàn màn hình
02
hình ảnh menu
Thực đơn trực quan dạng lưới hỗ trợ lọc theo danh mục, hiển thị món ăn đi kèm hình ảnh sắc nét, giá bán và các nhãn trạng thái món ăn.
Xem toàn màn hình
03
màn hình detail món ăn
Giao diện chi tiết món ăn cho phép thực khách tùy chỉnh kích cỡ (Size), thêm món đi kèm (Toppings) và nhập ghi chú chế biến gửi xuống bếp.
Xem toàn màn hình
04
màn hình giỏ hàng
Giỏ hàng thông minh tự động cộng dồn số lượng, tính toán tổng tiền tạm tính và cho phép cập nhật số lượng món ăn trực quan.
Xem toàn màn hình
05
màn hình qr thanh toán
Mã QR thanh toán động VietQR tự động tích hợp chính xác số tiền cần trả và mã đơn hàng của phiên (Session) hiện tại thông qua cổng SePay.
Xem toàn màn hình
06
màn hình xác nhận thanh toán
Màn hình chờ giao dịch đang được xử lý bởi backend thông qua webhook ngân hàng hoặc kiểm tra định kỳ (polling), hiển thị loader vòng tròn.
Xem toàn màn hình
07
xác nhận gọi món thành công
Màn hình xác nhận đặt món thành công đi kèm thanh tiến trình trực quan giúp thực khách dễ dàng theo dõi thời gian thực trạng thái nấu nướng.
Xem toàn màn hình
08
hình ảnh chatbot popup
Trợ lý ảo Bé Bảy (AI Chatbot) sử dụng cơ sở tri thức RAG để tư vấn món ăn phù hợp với khẩu vị, tự động bỏ giỏ và kích hoạt SOS gọi nhân viên.
Xem toàn màn hình
09
màn hình đánh giá
Trang thu thập đánh giá ẩn danh của thực khách sau khi thanh toán thành công, giúp nhà quản lý nắm bắt chất lượng món ăn và phục vụ tức thì.
Xem toàn màn hình
10
màn hình gửi yêu cầu
Giao diện gửi yêu cầu phục vụ nhanh tại bàn như gọi đá, đũa ăn, nước lọc, hoặc nút SOS hỗ trợ khẩn cấp, gửi tín hiệu Socket.io tức thời.
Xem toàn màn hình
11
màn hình nhắc nhở
Thông báo cảnh báo bàn trống tự động xuất hiện khi bàn ăn không phát sinh thao tác trong thời gian dài, bảo vệ phiên hoạt động của khách.
Xem toàn màn hình
12
cook trang chủ
Bảng điều khiển của nhà bếp hiển thị trực quan hàng đợi các món cần nấu phân chia theo thứ tự thời gian đặt, hỗ trợ cập nhật một chạm.
Xem toàn màn hình
13
waiter trang chủ
Sơ đồ bàn thời gian thực dành cho nhân viên phục vụ, hiển thị trạng thái màu sắc của bàn (đang trống, đang ăn, chờ thanh toán, SOS).
Xem toàn màn hình
14
waiter màn hình chi tiết bàn
Bảng điều khiển chi tiết bàn ăn của Waiter cho phép cộng thêm món, gộp/chuyển bàn và xác nhận phê duyệt thanh toán tiền mặt thủ công.
Mã nguồn & DemoTrải nghiệm dự án
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.
DỰ ÁN TIẾP THEO