CASE STUDY — FULL-STACK WEB APPLICATIONMenu QR

What it is

Key challenges

1. 01Letting several guests share one cart and place orders in rounds without duplicate submissions, using client-generated round IDs.
2. 02Modeling per-branch menus and prices on top of one shared catalog, with price levels and per-branch not-sold-here and sold-out exceptions.
3. 03Keeping 12 modules independent: separate PostgreSQL schemas, no cross-module foreign keys, and layer boundaries checked in lint rather than by convention.

Key achievements

1. 01Guest app (Next.js): QR table sessions with leader approval, a shared cart, order rounds protected against double submission, and bill requests. It talks to the API server-to-server, so the app key never reaches the browser.
2. 02Staff app (React + Vite): one app for cashier, waiter and kitchen work, with screens and actions gated by 14 staff permissions: order register, tables board with session accept, pay and close, and a kitchen display.
3. 03Manager dashboard (React + Vite, 66 screens): catalog with variations and add-ons, per-branch menus and sold-out control, price levels with bulk updates, tables and areas with printable QR sheets, employees and roles.
4. 04NestJS API with 12 modules, each layered into domain, application, infrastructure and presentation, with the boundaries enforced by ESLint; one PostgreSQL schema per module and no cross-module foreign keys.
5. 05Access control: JWT access tokens with database-backed refresh sessions, Argon2 password hashing, 44 permission keys, a role hierarchy where staff can only grant permissions they hold, and per-employee branch scoping.
6. 06Quality gates: 495 API test files (unit and integration) and CI that runs lint, type checks, migrations, tests, and drift checks for the committed OpenAPI spec and the database migrations.

Technologies used

• React
• Next.js
• TypeScript
• Tailwind CSS
• shadcn/ui
• TanStack Table
• React Query
• React Hook Form
• Zod
• Vitest
• GitHub Actions
• Vite
• REST API design
• OpenAPI
• Clean Architecture
• RBAC
• RTL/Arabic interfaces
• Node.js
• PostgreSQL
• NestJS
• JWT
• Redis
• Drizzle
• Docker