Media Card
Restaurant Staff Dashboard Table View
Client-Side Menu Page
Client-Side Payment Page

Dime n Dash 🍽️💳

Inspiration

Paying a restaurant tab can often be awkward or frustrating, especially in group settings. Splitting the bill can quickly become complicated, leading to confusion, miscommunication between guests and servers, and added pressure, like deciding on tips while the server waits nearby.

Our app was built to eliminate these pain points. We designed a web-first dine-in experience that reduces friction for both customers and staff, while delivering a smooth, stress-free process and a true “wow” moment during payment. It also delivers several benefits, including reducing server workload during both regular and peak hours, without taking away from the overall dining experience.

The idea was inspired by a trip to the UAE, where we saw a seamless dine-in payment experience already operating successfully in live world class restaurant chains with heavy daily traffic.

What It Does

Dime n Dash is a QR-based, web-first dine-in payment system that lets guests:

Scan a table QR code to view their bill
Pay the full bill or split it by selecting individual items
Pay simultaneously with other guests without conflicts

For restaurant owners and staff, we implemented:

A seamless QR code generator for quick table setup with no manual configuration
A dedicated dashboard where staff can add items and manage tables
Real-time order and balance updates across all connected devices

The system prevents double payments by locking items when a guest selects them. This allows multiple guests to pay at the same time safely. Payments are processed securely through Stripe, with support for tips, cash payment requests, and automatic receipt generation.

How We Built It

Dime n Dash is a full-stack, web-first application built with a single codebase.

Frontend

Next.js 14
React
TypeScript
Tailwind CSS
Mobile-optimized UI for quick in-restaurant use

Guests access a shared table view via QR code, while staff manage orders through a dedicated dashboard.

Backend

Supabase
- PostgreSQL database
- Authentication
- Real-time subscriptions
Each order item is stored as an individual instance and atomically reserved during checkout to prevent double payments
Stripe for secure payment processing
Live payment and balance updates reflected instantly across all clients

Challenges We Ran Into

Solving race conditions when multiple users try to split the bill at the same time
Implementing real-time subscriptions for live table balance updates
Building edge functions for dynamic QR code generation under tight time constraints

Accomplishments We’re Proud Of

Implementing a clean and reliable split-by-item system with real-time locking and TTL-based claims
Building an end-to-end dine-in flow — from QR scan to payment — within an 18-hour hackathon
Delivering a solution that benefits both guests and restaurant staff
Deploying the project in under 24 hours
Successfully adapting a proven international business model with an existing user base

What We Learned

How to leverage web-first architectures to deliver app-like experiences without app installs
How to prioritize core demo reliability over risky integrations during a hackathon
How to collaborate efficiently in a shared, version-controlled development environment
How to design real-time systems that remain consistent under concurrent user actions
How to utilize diverse LLMs to address case-specific challenges through advanced prompt engineering techniques

What’s Next for Dine-In

Full Stripe integration with refund support
POS integrations for real restaurant deployments
Scaling the project into a full mobile app
Automating server-side admin tasks to improve the restaurant dashboard experience