DEV Community

Alfaz Mahmud Rizve
Alfaz Mahmud Rizve

Posted on • Originally published at whoisalfaz.me

Zero-Hardware Kitchen OS: How I Replaced a $2,000 POS System With a Next.js PWA

#nextjs #supabase #zustand

Marcus stands behind the counter of Urban Harvest Cafe, the steam wand of his espresso machine hissing as a line of morning commuters begins to form. His hands are covered in sourdough flour. In a traditional cafe setup, Marcus would have to constantly wash his hands, wipe them dry, and tap on a grease-smeared, slow, commercial POS tablet to read incoming digital orders. If he missed a ticket, a customer walked out.

Looking for a solution, Marcus investigated off-the-shelf restaurant POS systems. The quotes were staggering: $2,000 upfront for proprietary hardware, plus a mandatory 3% commission cut on every single digital transaction. For a solo operator, this was an operational and financial wall.

As a RevOps and automation engineer, I sat at a corner table with a flat white, watching this friction. The solution became obvious: Marcus's hands were busy, but his ears were free.

I set out to engineer a custom, lightweight, autonomous kitchen ordering system that spoke to him, synchronized in real-time, ran on a zero-hardware budget, and let a single chef run a high-volume cafe alone.

Urban Harvest Cafe Zero Hardware Kitchen OS Dashboard Featured Image

The Vision: Solo Cafe Operations Running on Autopilot

To bypass the need for a 5-person front-of-house crew, we re-engineered the entire customer-to-kitchen lifecycle:

  1. QR Table Scanning: Customers sit down, scan a table-specific QR code, browse a fast mobile-first menu, and checkout without installing an app or registering.
  2. Eyes-Free Kitchen: The kitchen runs completely hands-free. A browser-native Text-to-Speech (TTS) engine reads out incoming orders to the chef (e.g., "New order for Rizve, Table 4. 1x Avocado Sourdough Toast").
  3. Simple Completion Shouting: When the food is hot, Marcus taps "Completed" on a wall-mounted tablet and calls out the name. The system handles the digital receipt and alerts the customer in real-time.

To automate the indexing of these dynamic product and success pages instantly on every deployment, I integrated the same zero-touch SEO Indexing Pipeline used on this portfolio to ping search engine APIs in under 12 seconds.

Author Profile: Who is Alfaz?

Before jumping into the code, you might ask: who is alfaz?

I am Alfaz Mahmud Rizve (online known as whoisalfaz), a RevOps Engineer and Full-Stack Automation Architect. I specialize in designing autonomous revenue strategies and engineering the underlying software infrastructure to run them. Rather than building simple minimum viable products, I build high-performance web systems and automation pipelines that drive business efficiency and maximize revenue throughput. Learn more about my architecture philosophy on my About Page.

Project Specifications

Attribute Specification
Framework Next.js 14 (App Router) + TypeScript
Database & Realtime Supabase (PostgreSQL)
State Management Zustand (with local persistence)
Styling & Motion Tailwind CSS + Framer Motion
Client Notifications Browser-native Web Speech API (Text-to-Speech)
Push Notifications Telegram Bot API integration
Deployment Vercel (Edge network deployment)

1. The Core Architectural Challenge

Building a web app for a chaotic kitchen environment requires solving physical and digital constraints that traditional SaaS apps never face:

  1. Autoplay Restrictions: Web browsers strictly block programmatic audio until a user clicks on the screen.
  2. Network Drops: Unstable cafe WiFi causes silent WebSocket dropouts, leading to missed tickets.
  3. Kitchen Flooding: A sudden spike in digital orders can easily overwhelm a solo operator, leading to long wait times and poor customer service.

This architecture builds on the robust full-stack capabilities I designed for the Veloryc E-Commerce Case Study to handle high-performance state sync under heavy user loads.

2. Key Engineering Breakthroughs & Logical Implementation

A. Autoplay Bypass & Failsafe Audio Queue (Web Speech API)

To prevent Marcus from having to touch a screen with flour-covered hands, the app needed to speak immediately upon order arrival. However, modern browsers block the Web Speech API until a physical interaction primes the audio context.

We solved this by implementing an Interstitial State Lock:

  • When Marcus logs into the dashboard at the start of a shift, they are presented with a high-contrast modal: "Start Shift & Enable Audio Feedback".
  • Clicking this button primes the browser's audio context and registers a persistent queue runner.
  • If the OS backgrounds the browser tab or suspends the audio engine, incoming order payloads are routed to a prioritized memory queue. When the tab re-enters the focus state or the engine recovers, the queue processes the stored items sequentially.

Kitchen OS Browser Autoplay Bypass and Failsafe Audio Queue Architecture Diagram

Here is the TypeScript implementation of the audio queue and bypass handler:

// Location: hooks/useDashboardData.ts / component context
interface OrderQueueItem {
  id: string;
  speechText: string;
}

const queue: OrderQueueItem[] = [];
let isSpeaking = false;

export function speakOrder(text: string, orderId: string) {
  if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;

  // Enqueue new order
  queue.push({ id: orderId, speechText: text });
  processQueue();
}

function processQueue() {
  if (isSpeaking || queue.length === 0) return;

  const current = queue[0];
  isSpeaking = true;

  const utterance = new SpeechSynthesisUtterance(current.speechText);
  utterance.rate = 0.95; // Slightly slower for kitchen acoustics
  utterance.pitch = 1.0;

  utterance.onend = () => {
    queue.shift();
    isSpeaking = false;
    processQueue(); // Process next in line
  };

  utterance.onerror = (e) => {
    console.error("Speech Synthesis Error:", e);
    // Display high-contrast failsafe fallback alert in dashboard UI
    triggerVisualAlert(current.id, "Audio Blocked by OS. Please click dashboard to resume.");
    isSpeaking = false;
    // Don't shift yet; retry on user interaction
  };

  window.speechSynthesis.speak(utterance);
}
Enter fullscreen mode Exit fullscreen mode

B. Resilient Hybrid Realtime Sync (WebSockets + Polling)

A missed order in a restaurant is a lost customer. To keep the kitchen dashboard in sync without manual page refreshes, we established a websocket connection using Supabase Realtime subscriptions pointing to the PostgreSQL orders table.

But because microwave ovens and kitchen equipment can disrupt local WiFi networks, we engineered a resilient hybrid synchronization layer:

  1. Primary Layer (WebSocket): Listens to PostgreSQL INSERT events, instantly pushing new orders to the Zustand state.
  2. Fallback Layer (Polling): A background interval runs a silent 5-second check (comparing the local order count with remote DB record metadata). If a websocket dropout is detected, the system executes a delta-fetch and triggers the audio engine for any missed orders.

For cases where custom catering requests or high-volume reservations require complex multi-source validation, the data is pushed to our AI Lead Enrichment Pipeline Guide to auto-qualify before reaching the kitchen.

Urban Harvest Cafe Hybrid Realtime Sync Supabase and Polling Pipeline Architecture Diagram

This ensures zero lost tickets, even during network degradation.

C. Dynamic Overload Protection & Capacity Control

To protect a solo operator from being swamped with orders during a rush, the chef can define a maximum ticket capacity (e.g., 8 active cooking orders) in their dashboard settings.

  1. When a customer lands on the storefront, the client checks the active ticket count in Supabase.
  2. If active_orders >= max_capacity, the checkout button is disabled, and the storefront layout swaps to an elegant, animated "Overwhelmed" pause screen apologizing for the delay.
  3. Additionally, a global Store Status Toggle allows the chef to manually pause orders at any time. This toggle updates a record in a settings table, which real-time clients instantly react to.

D. Frictionless Auto-Login Guest Session Flow

To make checkout frictionless, customers do not need to register an account before ordering. However, they must be able to track their order status afterwards. I solved this by implementing an Auto-Login Guest Flow:

  1. When a user submits an order, the Next.js Server Action (app/actions/placeOrder.ts) inserts the order and automatically generates a guest account behind the scenes using a standard, secure JWT payload containing their order details.
  2. The server sets a secure, HTTP-only cookie containing the JWT session token with a 30-day expiration.
  3. Upon redirection to /success, the client-side middleware parses the cookie, authenticates the session, and automatically logs the user into their customer dashboard.
  4. For security, guest checkouts are assigned a default credentials flow (password: 1234) but are marked with a database flag requiresPasswordChange = true. If the user wishes to save their loyalty details, they are prompted to update their credentials when they visit the /profile page.

3. The Harvest OS Dashboard Interface

To maximize operator efficiency, I designed a segmented dashboard split into three focused views rather than placing all data on a single cluttered page:

I. The Kitchen Command Center

  • Kanban Workflow: Drag-and-drop or click-action orders through three stages: Pending (Needs review) $\rightarrow$ Cooking (In preparation) $\rightarrow$ Ready (Ready for pickup).
  • Order Channels: Categorized lists showing order distribution: Dine-In (including Table Number), Takeout, and Home Delivery.

II. Restaurant Analytics

  • Revenue Charts: Daily and weekly revenue visuals showing shop performance in Taka (৳). Mizan’s analytics panel uses direct PostgreSQL aggregates, a reporting pattern I similarly optimized for the CashOps Financial Dashboard to show real-time profit and loss metrics.
  • Item Popularity Index: Tracks item velocity (e.g., comparing Espresso vs Sourdough Toast sales) to aid inventory decisions.

III. Customer Management & VIP Leaderboard

  • Loyalty Tracker: Displays customer order counts, total spend, and contact numbers.
  • VIP Leaderboard: Features top-spending customers, helping the owner identify and reward regular patrons.

4. Technical FAQs

How does the system handle real-time synchronization if the restaurant's internet fails?

The application employs a hybrid websocket-and-polling model. If the websocket client disconnects, the system switches to an automated 5-second HTTP polling loop. When connection is restored, the websocket automatically reconnects and synchronizes missing states.

What database security measures are implemented?

The database is built on Supabase (PostgreSQL) and utilizes Row Level Security (RLS) policies. Unauthenticated users are only granted permission to write to the orders table via anon keys. Admin dashboard reads/writes require a cryptographic session token verified at the API level.

Why was Zustand selected over Redux or React Context?

Zustand provides a lightweight, boiler-free state store that integrates easily with browser storage. It ensures cart data and local sessions persist across refreshes without introducing the performance bottlenecks of React Context or the overhead of Redux.

Top comments (0)