Skyrocketing Operations for Tatsumaki Ramen

When a high-traffic restaurant is dealing with peak hours, their digital infrastructure can't afford to drop a single order or double-book a table. For Tatsumaki Ramen & Lounge, the goal was clear: replace fragmented systems with a unified, world-class digital experience.

I designed and developed a custom, full-stack ordering portal and a real-time waitlist synchronization system from the ground up.

The Core Challenges

Tatsumaki needed a solution that could handle massive concurrency without breaking a sweat. The primary hurdles we tackled included:

• Zero Latency: Ensuring absolutely no delay in a high-concurrency order environment during the Friday night dinner rush.
• Complex Overrides: Developing real-time waitlist updates that included complex logic for staff to manually override and manage entries on the fly.
• Payment Integration: Integrating a diverse set of local payment gateways securely and natively into the checkout flow.

The Deliverables

Leveraging my 2-for-1 edge as both a designer and developer, I delivered a cohesive ecosystem covering both the customer-facing frontend and a rugged, tablet-optimized staff dashboard.

• Real-Time Customer Waitlist: Powered by Supabase Real-time Sync, allowing hungry customers to see exactly where they stand in line without ever refreshing their phone screens.
• Lightning-Fast Ordering Portal: Built entirely on Next.js using Server-Side Rendering (SSR) and API routing for instant menu loads and frictionless checkout.
• Tablet-Optimized Staff Dashboard: A custom, high-contrast UI tailored specifically for the lighting conditions of the kitchen and the host stand.

Under the Hood

Handling live waitlist queues requires absolute precision. Here is a simplified look at how the real-time subscription model keeps the staff dashboard perfectly synced with the database:

// Subscribing to waitlist changes in real-time
const waitlistChannel = supabase
  .channel('waitlist-sync')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'waitlist_entries' },
    (payload) => {
      // Instantly update the host stand UI
      updateDashboardState(payload.new);
    }
  )
  .subscribe();