Satenya Mama Loesye Web (SML Web) — System Architecture & Overview

1. Executive Summary

Satenya Mama Loesye Web (SML Web) is a full-stack, enterprise culinary e-commerce and operational management platform engineered for high-throughput retail satay sales, kitchen display operations, and large-scale custom catering management. Built on modern serverless-ready TypeScript architecture (Hono + Node.js/Deno, Prisma ORM, React 18, Tailwind CSS), SML Web provides a passwordless WhatsApp-first user experience, dynamic QRIS automated payment settlement, custom catering box builder engines, and comprehensive double-entry financial ledger tracking.

---

2. High-Level System Architecture

The application adheres to a multi-tiered, event-driven architecture designed for high availability, zero-friction customer authentication, and real-time operational state synchronization.

flowchart TD
    subgraph ClientLayer ["1. Client Layer (PWA & Web Store)"]
        Browser["React 18 + Vite SPA Client"]
        SW["Service Worker (PWA Caching)"]
        WebPush["Web Push API (VAPID Alerts)"]
    end

    subgraph EdgeLayer ["2. Reverse Proxy & Security Edge"]
        Apache["Apache Web Server (HTTPS / SSL)"]
        Turnstile["Cloudflare Turnstile Bot Defense"]
    end

    subgraph BackendLayer ["3. Core Backend Application Service"]
        HonoApp["Hono HTTP Router & API Engine"]
        JWTAuth["JWT & Role Authorization Guard"]
        OrderEngine["Order Lifecycle & State Machine"]
        ShippingEngine["Haversine Geo Shipping Calculator"]
        FinanceEngine["Double-Entry Financial Ledger Engine"]
        PrismaORM["Prisma ORM Client"]
    end

    subgraph GatewayLayer ["4. External Gateways & Infrastructure"]
        Wadeno["Wadeno / GoWA WhatsApp Gateway"]
        QBiz["QBiz Dynamic QRIS Payment Gateway"]
        R2["Cloudflare R2 Object Storage (S3 API)"]
        Postgres[(PostgreSQL Relational Database)]
    end

    Browser -->|HTTPS REST API| Apache
    Apache --> Turnstile
    Turnstile -->|Validated Request| HonoApp
    
    HonoApp --> JWTAuth
    JWTAuth --> OrderEngine
    JWTAuth --> ShippingEngine
    JWTAuth --> FinanceEngine

    OrderEngine --> PrismaORM
    FinanceEngine --> PrismaORM
    PrismaORM -->|TCP Connection Pool| Postgres

    OrderEngine -->|Transactional Notifications| Wadeno
    OrderEngine -->|Create Dynamic QRIS| QBiz
    HonoApp -->|Media Uploads & Proofs| R2
    HonoApp -->|Push Subscription| WebPush

---

3. Technology Stack & Runtime Matrix

Subsystem	Technology	Version	Engineering Rationale & Responsibility
Frontend Framework	React	^18.3.1	Component-driven UI rendering with Concurrent features
Build Tooling	Vite	^5.2.0	Ultra-fast module bundling, ESbuild HMR & production asset optimization
Styling Framework	Tailwind CSS	^3.4.0	Utility-first CSS engine with custom Neo-Brutalism design system tokens
State Management	Zustand	^4.5.0	Decoupled, atomic client state modules (Auth, Cart, Order, UI)
Animation Engine	Framer Motion	^11.0.0	Spring-physics layout transitions and fluid micro-interactions
Backend Framework	Hono Framework	^4.3.0	Ultra-lightweight, high-performance HTTP router compatible with Node/Deno/Bun
Database ORM	Prisma ORM	^5.14.0	Type-safe query building, migration management, and schema reflection
Database Engine	PostgreSQL	^15.0+	ACID-compliant relational database for transactional integrity
WhatsApp Gateway	Wadeno / GoWA	HonoWA v2 / Go	Passkeyless inbound authentication & outbound transactional messaging
Payment Gateway	QBiz Gateway	Dynamic QRIS API	Automated QRIS generation, HMAC webhook signature verification
Media Storage	Cloudflare R2	S3 API Standard	Scalable storage for product images and payment proof receipts
Bot Defense	Cloudflare Turnstile	v0 Siteverify API	Invisible anti-bot challenge protection for auth and order endpoints
Thermal Printer	ESC/POS Driver	WebUSB / Network	Kitchen Display System (KDS) & POS cash register receipt printing

---

4. Comprehensive Repository Anatomy

satenyamamaloesyeweb/
├── .env.example                    # Template environment configuration
├── Dockerfile                      # Multi-stage production container build spec
├── docker-compose.yml              # Service orchestration for backend & database
├── package.json                    # Dependencies, build scripts & metadata
├── tsconfig.json                   # Main TypeScript configuration
├── tsconfig.backend.json           # Server-side TypeScript compiler settings
├── vite.config.ts                  # Vite bundler, path aliases & PWA settings
├── prisma/
│   ├── schema.prisma               # Definitive PostgreSQL Schema & Relations
│   └── migrations/                 # Incremental SQL migration history
├── public/                         # Static public assets, icons & PWA manifest
├── docs/                           # VitePress developer documentation portal
├── src/                            # Complete Source Code Directory
│   ├── backend/
│   │   ├── config/                 # Database connection, env loader, event bus
│   │   │   ├── database.ts         # Prisma Client instance singleton
│   │   │   ├── env.ts              # Zod environment variable validation
│   │   │   └── events.ts           # Internal EventEmitter for async side-effects
│   │   ├── controllers/            # HTTP Request Handlers
│   │   │   ├── authController.ts   # Login token generation & status polling
│   │   │   ├── orderController.ts  # Order creation, calculation & status transitions
│   │   │   ├── paymentController.ts# QBiz webhook & manual proof upload
│   │   │   ├── menuController.ts   # Catalog retrieval & menu CRUD
│   │   │   └── financeController.ts# Journal entry logging & financial reports
│   │   ├── middleware/             # Request Interceptors
│   │   │   ├── auth.ts             # JWT token extraction & RBAC permissions
│   │   │   ├── errorHandler.ts     # Global exception mapper & response formatter
│   │   │   └── rateLimiter.ts      # Sliding-window rate limiter per IP/Route
│   │   ├── routes/                 # Endpoint Router Modules
│   │   │   ├── auth.ts             # Auth routes (/api/auth/*)
│   │   │   ├── order.ts            # Order routes (/api/orders/*)
│   │   │   ├── payment.ts          # Payment routes (/api/payments/*)
│   │   │   ├── menu.ts             # Catalog routes (/api/menu/*)
│   │   │   ├── seo.ts              # Sitemap, robots.txt, llms.txt & JSON-LD
│   │   │   └── admin/              # Protected Admin Backoffice API routes
│   │   ├── services/               # Core Domain Business Logic
│   │   │   ├── authService.ts      # Token generation & ban level checks
│   │   │   ├── orderService.ts      # State machine transition logic & stock validation
│   │   │   ├── qbizService.ts      # QBiz API client & webhook signature verification
│   │   │   ├── wadenoClient.ts     # Wadeno WhatsApp Gateway client
│   │   │   ├── storage.ts          # Cloudflare R2 / Local disk storage abstraction
│   │   │   ├── turnstile.ts        # Cloudflare Turnstile token validation
│   │   │   ├── pushNotification.ts # Web Push VAPID dispatch engine
│   │   │   └── financeService.ts   # Double-entry ledger recorder
│   │   └── utils/                  # Domain Helpers
│   │       ├── distance.ts         # Haversine distance & shipping fee calculator
│   │       ├── phone.ts            # Indonesian E.164 phone number sanitizer
│   │       ├── fileSecurity.ts     # MIME-type validation & extension sanitization
│   │       └── timezone.ts         # Asia/Jakarta date-time formatters
│   └── frontend/                   # React Single-Page Application
│       ├── components/             # Reusable UI components & Neo-Brutalist elements
│       ├── pages/                  # Route view pages (Customer & Admin)
│       ├── services/               # Axios / Fetch API wrappers & thermal printer client
│       └── store/                  # Zustand state stores (cartStore, settingsStore, etc.)