TableOrder - Direct At-Table Ordering Application

TableOrder - Direct At-Table Ordering Application

General Introduction

In modern restaurants and cafes, the traditional ordering process often faces shortcomings like staff being overwhelmed during peak hours, long waits for customers, errors in orders, or difficulty in ordering additional items. Popular delivery apps do not solve this problem as they focus on remote ordering and delivery.

TableOrder is a web application (built with React and Next.js for SEO and user experience optimization) designed specifically for customers to order directly from their table using their mobile devices. By scanning a QR code at the table, customers can view a digital menu, customize dishes, place orders, and even pay directly on their phones, optimizing the customer experience and the restaurant's operational workflow.

Vision & Objectives

Vision:

To become the leading at-table ordering solution, bringing a convenient and modern experience to customers while optimizing efficiency for restaurants.

Objectives:

  • Reduce waiting times and increase customer satisfaction at the establishment.
  • Lessen the workload for service staff, allowing them to focus on service quality.
  • Minimize errors in orders and manage orders efficiently.
  • Provide a flexible, easy-to-update, and high-performance digital menu.
  • Increase revenue through food recommendations and a convenient ordering process.

  • Production: Azentra Team
  • Category: Office
  • Duration: 6 months

Key Features

1. Customer Application (Web App/PWA - React & Next.js):

  • Scan QR Code at Table: Customers use their phone's camera to scan a unique QR code for each table to access the menu.
  • Interactive Digital Menu (Built with React):
    • Displays the menu with high-quality food images, detailed descriptions, and prices.
    • Clear categorization of dishes (appetizers, main courses, drinks, desserts).
    • Ability to customize dishes (e.g., add/remove toppings, spiciness level, less sugar) with a flexible React-based interface.
  • Cart & Ordering:
    • Easily add/remove items from the cart with instant updates.
    • Review the total bill and order information before sending.
    • Send the order directly to the kitchen/bar system.
  • Pay at Table (Optional): Integrates with online payment gateways (MoMo, VNPay, ZaloPay, credit cards) for customers to pay directly on their phones.
  • Call for Assistance: A button to call staff (e.g., "Call for payment," "Request water," "Need help") that sends a notification to the management system.

2. Restaurant Management Portal (Web App - React & Next.js):

  • Menu Management: Add/edit/delete dishes and drinks, update prices, images, and descriptions easily through a flexible React admin interface.
  • Table Management: Generate QR codes for each table, and monitor table status (vacant, occupied, paid).
  • Order Management:
    • Displays a list of pending and completed orders in real-time.
    • Functionality to confirm, cancel, or edit orders (from the manager/staff side).
  • Staff Management: Assign permissions to staff (waiter, kitchen, bar, manager).
  • Reporting & Statistics: Daily/weekly/monthly revenue, popular dishes, and sales performance.

3. Kitchen/Bar Display System (KDS - React & Next.js):

A separate interface that displays new orders in real-time for the kitchen and bar staff. Allows kitchen/bar staff to update the status of a dish (preparing, ready) to notify servers and customers.

Role and Responsibility Allocation (Azentra Team)

Business Analyst - Thu Thao Nguyen:

  • Conducts in-depth research on restaurant service processes, the pros and cons of current methods, especially how to optimize customer and staff flows when using the application.
  • Defines core features for customers, staff, and management.
  • Designs the detailed workflow from when a customer scans a QR code and places an order to when the food is delivered and payment is made.

UI/UX Designer - Thao Le:

  • Designs an intuitive and appealing user interface for the customer application (especially the menu viewing and ordering experience), optimized for mobile touch screens.
  • Designs the menu and order management interface for the Restaurant Management Portal, along with the KDS interface for the kitchen/bar, ensuring it is easy to read and operate quickly in a busy environment.

Backend Developers - Van Hien Nguyen & Minh Duc Pham:

  • Van Hien Nguyen: Primarily responsible for designing a secure and scalable backend architecture using .NET and SQL Server. He will develop core APIs for managing menus, orders, tables, users, and integrating payment gateways.
  • Minh Duc Pham: Will participate in the Backend, supporting the development of specific API modules, especially those related to real-time order status management and communication with the KDS. This helps him gain a deep understanding of the logic to lead the Frontend.

Frontend (Web) Team - Quoc Bao Doan (Lead) & Minh Duc Pham (Consultant/Support):

  • Quoc Bao Doan: Is the primary lead for the Frontend team on this project. Bao is responsible for setting up the entire frontend architecture using React and Next.js, leveraging features like Server-Side Rendering (SSR) or Static Site Generation (SSG) from Next.js to optimize performance and SEO for the digital menu. He will build reusable components, manage state effectively, and develop interactive interfaces for the customer app, the Restaurant Management Portal, and the KDS. Bao will ensure performance, responsiveness, and a smooth user experience across all devices.
  • Minh Duc Pham: In a consulting and support role, Duc will provide his deep expertise in frontend development in general and Next.js in particular, helping Bao make critical architectural decisions, solve complex problems, and maintain code quality. He will be a strong supporter to help Bao excel in his leadership role.

Mobile Developer - Van Nhat Pham (Optional/PWA Support):

Although the main customer application is a Web App/PWA built with React/Next.js, Nhat's role could be to provide technical support to ensure the PWA runs smoothly on mobile devices, or to develop mobile-specific features if needed (e.g., advanced push notifications or specialized hardware features).