Introduction
Smart Restaurant is a modern, comprehensive restaurant management system designed to meet the digitization and automation needs of the contemporary food service industry. Built with a robust Client-Server architecture and a microservices-ready approach, it provides a seamless experience for customers, staff, and management alike.
Summary (Project Highlights)
- Multi-tenant Architecture: Isolated data management for multiple restaurants on a single SaaS platform.
- Real-time Synchronization: Instant updates via WebSockets for the Kitchen Display System (KDS) and order tracking.
- VNPAY Integration: Secure online payment processing using Instant Payment Notification (IPN).
- Responsive UI/UX: Mobile-first design utilizing TailwindCSS, Radix UI, and Zustand for state management.
Technical Architecture
The system is designed with a clear separation of concerns, ensuring high maintainability and scalability.
Note (Technology Stack)
- Frontend: Next.js 14 (App Router), React 18, TailwindCSS, Zustand, Radix UI.
- Backend: NestJS 10, TypeScript, Passport + JWT for Authentication.
- Database: PostgreSQL hosted on Supabase with Row-Level Security (RLS).
- Deployment: Vercel (Serverless Functions) with automated CI/CD pipelines.
Core Modules
The backend is modularized to handle complex business logic efficiently:
- Identity & Auth: Manages JWT-based authentication and Role-Based Access Control (RBAC) for Super Admins, Admins, Kitchen staff, and Waiters.
- Catalog & Operations: Handles menus, dynamic modifier groups (sizes, toppings), table management (QR code generation), and the smart cart.
- Finance & Analytics: Processes bills, integrates with the VNPAY gateway, and generates real-time reports and revenue dashboards.
- Realtime Gateway: Uses
Socket.ioto emit events instantly to the Kitchen Display System when orders are placed or updated.
Database Design (EER Schema)
The database strictly adheres to the Third Normal Form (3NF) to ensure data integrity and performance.
- UUID Primary Keys: Used across all tables to obscure the actual data scale and ensure global uniqueness.
- Price Snapshots: The
order_itemstable stores theunit_priceat the exact moment of ordering to guarantee financial report accuracy, even if menu prices change later. - Soft Deletes: Implementing
is_deletedflags instead of physical deletion to maintain referential integrity for historical orders.
-- Ensuring users can only access data within their tenantCREATE POLICY "tenant_isolation_policy" ON orders FOR ALL USING (tenant_id = current_setting('app.current_tenant_id')::uuid);Payment Integration (VNPAY)
Integrating a payment gateway requires a highly secure and reliable flow. We implemented the standard IPN (Instant Payment Notification) process.
Warning (Security Measure)
The payment flow relies on server-to-server communication (IPN) rather than the client-side redirect URL to confirm payment success. This prevents vulnerabilities where a user might close the browser before the redirect completes. The backend verifies the HMAC-SHA512 signature before updating the bill status.
User Interfaces
We prioritized a Mobile-first approach, acknowledging that most customers will browse the menu and order via their smartphones using QR codes.
- Customer Mobile: A clean, responsive grid layout for the menu, with a sticky bottom bar for quick access to the cart and checkout.
- Admin Dashboard: Provides a comprehensive view of real-time KPIs (revenue, active tables, popular items) with a clean, card-based layout.
- Kitchen Display System (KDS): Optimized for fast-paced kitchen environments, allowing chefs to see pending orders and mark them as ‘Ready’ with a single tap, instantly notifying the waitstaff.
Tip (Optimization)
We used Anti-aliased Blur Pooling and Attention Pooling concepts from modern CV to ensure our image uploads (menu items) remain crisp and clear across all device resolutions without causing layout shifts (using skeleton screens).
