Case Study: Urban Cafe Foodtech Platform Architecture | Alfaz Mahmud Rizve

This technical breakdown contains affiliate links. If you deploy this stack using my links, I earn a commission at no extra cost to you.

By Alfaz Mahmud Rizve | RevOps & Full Stack Automation Architect at whoisalfaz.me

By Alfaz Mahmud Rizve | RevOps & Full Stack Automation Architect

The Problem: The Disconnect in Restaurant Tech

The digital infrastructure for small to medium-sized restaurants, cafes, and food carts is often severely disjointed. A cafe typically uses one vendor for a static website, a separate, clunky iframe for online ordering, and an outdated point-of-sale (POS) tablet for the kitchen.

This fragmentation causes dropped orders, out-of-sync menus, and a terrible user experience for hungry customers.

I conceptualized and built Urban Harvest Cafe as a unified, full-stack foodtech platform. It serves as both a beautiful, immersive storefront for customers and a real-time battle station for the kitchen staff, scalable from a single coffee cart to a multi-franchise operation.

The Architecture Decision: Next.js + Zustand + WebSockets

The critical requirement for a food ordering application is absolute data synchronicity. If a customer adds a bagel to their cart, and the kitchen runs out of bagels five seconds later, the user interface must react instantly.

1. State Management: Zustand

While React Context is excellent for simple, low-velocity state (like a dark mode toggle), a restaurant shopping cart requires rapid, complex mutations (incrementing items, recalculating totals with dynamic discounts, holding temporary states).

I utilized Zustand as the global state orchestrator. The CartDrawer and main application seamlessly interact with the Zustand store to maintain an ultra-fast, predictable data flow without triggering excessive component re-renders.

2. Real-Time Order Dispatch: Supabase Channels

When a customer finalizes an order, the transaction is immediately written to the PostgreSQL database. However, polling the database every 10 seconds to check for new orders is an outdated, resource-heavy approach.

Instead, the database is architected to utilize Supabase Realtime.

-- Enable WebSocket Broadcasts directly at the table level
alter publication supabase_realtime add table orders;
alter publication supabase_realtime add table menu_items;

When an INSERT event occurs on the orders table, the database pushes an instant WebSocket payload to the subscribed admin dashboard /dashboard. The kitchen tablet "pings," and the new ticket slides into the queue with zero polling required.

Technical Blueprint: Business Logic as Code

The frontend of Urban Harvest Cafe is built not just for aesthetics, but to actively enforce complex restaurant restrictions.

"Steaming" Hero & Gamified Cart Logic

To drive Average Order Value (AOV), the UI implements subtle gamification. As users add items to their cart, a progression bar fills up. Once they hit designated spending tiers, the application automatically applies dynamic discount structures (e.g., automated Student Discounts).

Smart Business Hours Governance

One of the most frequent errors in restaurant ordering systems is accepting a payment at 11:30 PM when the kitchen closed at 11:00 PM.

Urban Cafe embeds Smart Business Hours logic directly into the routing middleware and the StickyATC (Add to Cart) components. It programmatically checks the restaurant's operational schedule against the user's localized timestamp and entirely disables checkout capabilities outside of designated service hours—preventing refunds and angry phone calls.

Schema Flexibility: JSONB Payloads

Food orders are highly mutable. A burger might have "No Onions," "Extra Pickles," and "Gluten-Free Bun." Creating a highly normalized, multi-table schema for every possible condiment variation introduces terrible latency.

Instead, the orders table leverages PostgreSQL's JSONB column type.

  create table if not exists orders (
    id uuid default gen_random_uuid() primary key,
    customer_id uuid references customers(id),
    items jsonb not null, -- Stores complex cart arrays flawlessly
    total_amount numeric not null,
    status text default 'pending', -- 'cooking', 'completed', 'cancelled'
    order_type text -- 'delivery' or 'dine-in'
  );

This hybrid approach allows the core business data (Revenue, Customer ID) to remain structured and queryable, while the highly unstructured, chaotic cart contents are stored and retrieved linearly.

Results & Metrics

• Kitchen Sync Speed: Sub-100ms dispatch times via Websocket subscriptions.
• Cart Conversion: Framer Motion-powered interactive cart drawers decrease abandonment friction.
• Flexibility: The architecture is entirely modular, ready to be deployed instantly for any independent food business ready to upgrade their digital stack.