Ron
Projects

Warung Bu Warni

Warung Bu Warni is a comprehensive restaurant management and ordering system built with Next.js and Supabase. It features multi-branch support, various order types, and dedicated real-time portals for customers, cashiers, kitchen staff, and administrators.

Jun 11, 2026Live
Next.jsReactTypeScriptSupabaseTailwind CSS

Overview

Warung Bu Warni 🍜

Warung Bu Warni is a full-featured web application for restaurant management and ordering, tailored for businesses that need:

  • Multi-branch support (e.g., Malang, Surabaya)
  • Flexible order types (Dine In, Take Away, Delivery)
  • Real-time synchronization across different operational roles
  • A responsive, modern interface for both staff and customers

Key Features

  • Customer Portal: Browse menus, select branches, and place orders seamlessly.
  • Cashier System: A dedicated point-of-sale interface for processing transactions and managing on-site orders.
  • Kitchen Display System (KDS): Real-time ticket management for kitchen staff to streamline food preparation.
  • Admin Dashboard: Comprehensive analytics, menu management, and multi-branch oversight.
  • Role-Based Access: Secure authentication and specialized views tailored for Admin, Cashier, Kitchen, and Customer roles.

Tech Stack

  • Frontend: Next.js 16.1 (App Router) + React 19 + TypeScript
  • State Management: Zustand and SWR for efficient data fetching
  • Backend & Database: Supabase (PostgreSQL, Auth, Realtime)
  • Styling: Tailwind CSS + shadcn/ui + Radix UI + Framer Motion
  • Extras: Recharts for analytics, QR Code integration for tables/orders

Architecture

The application adopts a robust Next.js App Router architecture, separating concerns across the client, server, and database layers to deliver a real-time, performant experience tailored for restaurant operations.

graph TD
    Client[Client Components UI] -->|State Management| Zustand[(Zustand & SWR)]
    Client -->|API Requests & Mutations| NextServer[Next.js Server / API Routes]
    NextServer -->|Data Access| SupabaseDB[(Supabase PostgreSQL)]
    SupabaseDB -->|Real-time Updates| Client
    SupabaseAuth[Supabase Auth] -->|JWT Session| Client
    Client -->|Role-Based Access| Portals[Admin, Cashier, Kitchen, Customer]

1. Client Layer (React 19)

  • UI Components: Built with Tailwind CSS, shadcn/ui, and Radix UI for an accessible, cohesive design system across all user roles.
  • State Management: Zustand handles complex client-side state (like cart management and POS data), while SWR provides fast, cached data fetching.
  • Real-Time Portals: Different views (Admin, Kitchen, Cashier, Customer) react instantly to database changes, ensuring the Kitchen Display System (KDS) stays synchronized with incoming orders.

2. Server Layer (Next.js 16 App Router)

  • Data Fetching: Utilizes React Server Components (RSC) to fetch data securely on the server.
  • API Routes: Dedicated Next.js API routes handle business logic like order processing, store selection, and secure mutations without exposing database credentials.

3. Backend & Database (Supabase)

  • PostgreSQL Database: The single source of truth, utilizing Row Level Security (RLS) to ensure that branches and staff only access their permitted data.
  • Real-time Subscriptions: Supabase Realtime pushes instant updates to the client when new orders are placed or order statuses change.
  • Authentication: Supabase Auth handles secure user sessions and role-based access control.