Servio
Servio is a full-stack restaurant management system that runs front-of-house and back-of-house operations from a single platform. It coordinates the entire service lifecycle — seating a table, opening an order session, sending tickets to the kitchen, serving, and settling the bill — across dedicated interfaces for admins, waiters, kitchen staff, and cashiers. A React and Vite front end talks to a TypeScript Express API backed by Supabase (PostgreSQL with Row Level Security), with online payments handled through the Midtrans payment gateway and confirmed via webhook.
Dashboard Analytics
Try It Live
Explore the live deployment
Servio is running in production with pre-seeded demo data. Sign in with any of the role accounts below — each one unlocks a different set of tools, from the admin dashboard to the kitchen display.
The Challenge
Restaurant service is a high-pressure, multi-role choreography: waiters take orders at the table, the kitchen works a queue of tickets, and cashiers close out bills — often all at once during a busy hour. Generic point-of-sale tools rarely model these handoffs cleanly, leaving staff to reconcile state by shouting across the pass. Servio needed to give each role a purpose-built view while maintaining a single, authoritative order state that everyone can trust.
The system is organised around an explicit order lifecycle — Pending → Preparing → Ready → Completed, with Cancelled as an escape hatch — enforced by the Express API. Each interface polls for the latest order and payment state on a short interval, so the kitchen, waiter, and cashier screens stay current through a busy shift. Access is scoped by role through Supabase Row Level Security, online checkout runs through the Midtrans payment gateway with server-side webhook confirmation before an order is marked paid, and the stack is containerised with Docker behind an Nginx reverse proxy for consistent, reproducible deployments.
System Architecture
Role-Based Operations
Purpose-built interfaces for admins, waiters, kitchen, and cashiers — from a touch-first POS and table floor plan to a kitchen display — each surfacing only what that role needs to keep service moving.
Orders & Payments
A server-enforced order lifecycle (Pending → Preparing → Ready → Completed) drives the floor, with checkout handled through the Midtrans payment gateway and confirmed by webhook before an order is marked paid.
Data & Infrastructure
A TypeScript Express API on Supabase PostgreSQL with Row Level Security, containerised with Docker behind an Nginx reverse proxy for a reproducible production deployment.
Key Results
Tech Stack Deep Dive
React + Vite
A component-driven front end with role-based routing, a touch-first point-of-sale, an interactive table floor plan, and operational dashboards — bundled with Vite for fast builds and a lean static production output.
Express.js
A TypeScript Express API owns business logic and the order state machine, exposing REST endpoints for menus, orders, tables, payments, and staff while gating actions by role. Client screens poll these endpoints to stay current during a shift.
Supabase / PostgreSQL
Cloud-hosted PostgreSQL via Supabase provides the relational data model and authentication, with Row Level Security policies enforcing role-scoped access to orders, inventory, and reports.
Midtrans
Online payments are processed through the Midtrans payment gateway: the cashier initiates a transaction and the backend confirms settlement via a server-side webhook before the order is marked paid.
Docker & Nginx
The frontend and backend are containerised and served behind an Nginx reverse proxy that routes traffic between the React app and the Express API, giving a consistent, reproducible production deployment.