SplitBill

  1. Home
  2. SplitBill

SplitBill

SplitBill is a full-stack system for splitting the bill in bars and restaurants with one QR code per table and no registration. A waiter adds the order from a tablet terminal, every guest scans the table QR code, marks what they are taking and receives a personal bill that they can share.

It covers the whole product: a Next.js web app with separate staff, guest and overview journeys, server API routes for privileged work, a Supabase PostgreSQL database with row-level security, automated tests, and an Expo mobile client.

  • Category :Full-Stack Web / Mobile Product
  • Frontend :Next.js 16 App Router, TypeScript, Tailwind CSS v4
  • Backend :Supabase PostgreSQL with row-level security
  • UI :framer-motion, QR code flows
  • Tests :Jest, Testing Library, Playwright
  • Deployment :Vercel frontend + Supabase backend
  • Mobile :Expo client
  • Status :Working product
SplitBill: a phone with a split bill and a table QR code SplitBill flow from order to personal bill

Core Features

The product idea is to remove the awkward part of a group bill: nobody has to install anything or create an account.

  • A waiter terminal with a floor plan and PIN authentication.
  • Adding menu items to the order of a table.
  • A guest flow opened by the table QR code, starting with just a name.
  • Claiming items, including items shared between several guests.
  • A personal bill for every guest, with sharing.
  • A table summary showing who owes what.

“Keep the guest flow, the staff terminal and the session routes as distinct user journeys.”

Design Note - Separate Journeys

Architecture

The Next.js app contains the terminal, table and session routes and the server API handlers. Privileged database work goes through server API routes, with separate anonymous and service-role Supabase clients. The database schema and row-level security rules live in the repository as the source of truth, and a dedicated module implements the bill-splitting algorithm. Unit, end-to-end, security and performance tests sit next to the code. The last diagram is an illustrative example with made-up numbers.

SplitBill architecture
Claiming items and personal bills

Table Flow

  • The waiter opens the floor plan and signs in with a PIN.
  • The waiter adds menu items to the order of a table.
  • A guest scans the table QR code and enters a name.
  • The guest sees the table order and claims their items.
  • The guest receives a personal bill and can share it.
  • The summary page shows every guest and what each owes.

What It Shows

  • End-to-end full-stack delivery: web, API, database and mobile.
  • Security-minded design with row-level security and separated clients.
  • Testing at several levels: unit, end-to-end, security and performance.
  • Product thinking: a flow without registration.

Related Projects

Voice Generator Workspace

Voice Generator Workspace

Python / Text-to-Speech / Voice ML
NASA Exoplanet AI

NASA Exoplanet AI

Neural Network / Kepler, K2, TESS / C++
Secure Telemetry & Internet Relay

Secure Telemetry & Internet Relay

C++ / Rust / Secure Data Transfer

Project Summary

Send a direct message about this project and it will be delivered to my email.