A comprehensive, full-stack web application designed to manage high-throughput operations for a retail boba shop. This platform provides a complete ecosystem including a self-service Customer Kiosk, a streamlined Cashier POS panel, and a secure Manager Admin Dashboard.
The entire application is powered by a PostgreSQL database with live, bidirectional updates, ensuring that orders, inventory changes, and analytics are instantly synchronized across all active interfaces.
- Multi-Step Ordering Interface: A dynamic, state-driven UI guiding users through flavor selection, sub-flavors, and custom drink configurations (sweetness, ice levels, toppings).
- Live Checkout Subtotals: Real-time price calculations that dynamically adjust based on base prices and premium topping additions.
- Instant Order Modifications: Allows cashiers to seamlessly update customer names, cancel items, or modify orders on the fly without page reloads.
- Throughput Optimization: Structured data payloads and optimized frontend/backend connectivity ensure fast checkout times during peak hours.
- Live Store Analytics: A comprehensive dashboard tracking critical business metrics in real-time, including:
- Weekly & Seasonal Revenue tracking
- Top-selling menu items and combinations
- Top-performing employees
- Automated Reporting: Generate detailed store reports for business auditing and performance reviews.
- Bidirectional Inventory Tracking: Automated backend algorithms intercept order confirmations to instantly decrement raw material stock (e.g., milk, tapioca pearls, cups). If an order is canceled, the system autonomously replenishes the exact raw ingredients.
- Menu Management: Managers can dynamically add, remove, or update menu items, toppings, and pricing directly from the dashboard. Changes are instantly pushed to the Kiosk and Cashier POS.
- Employee Management: Secure admin portal to manage employee roles, access permissions, and track shift performance.
- Inclusive Design: The customer-facing kiosk and staff interfaces are built with integrated accessibility features (WCAG compliance, screen-reader support, high-contrast modes, and keyboard navigability) to ensure ease of use for all users.
- Front-End: React.js, Next.js, HTML/CSS, Tailwind CSS / Bootstrap
- Back-End: Next.js API Routes, Node.js
- Language: TypeScript
- Database: PostgreSQL (Bidirectional live syncing)
- ORM: Prisma ORM
The system relies on a strictly typed, relational database schema to ensure transactional integrity during busy retail hours. Everything is updated live and bidirectionally, meaning a change in the manager panel instantly reflects on the cashier screen.
Key relationships include:
Orders&OrderItems: Tracks timestamps, employees, totals, and specific drink configurations.Inventory&ItemIngredients: Maps specific menu drinks to the exact raw materials required to make them, allowing for autonomous stock deduction.Toppings: Tracks available add-ons and their dynamic price impacts.Employees: Manages staff authentication, roles, and performance metrics.