←Back to work

Craffé

Category
Order-ahead app
/
Year
2026
Stack
  • Next.js 16
  • Supabase Realtime
  • Gemini
  • Tailwind v4

A mobile-first order-ahead app for Craffé Coffee across two branches: scan the table QR, build a drink, pay ahead, and track a live pickup status that chimes when it is ready. Baristas work a real-time queue scoped to their own branch. Built for a live owner pitch.

Craffé screenshot

The decision

Two branches, one menu, one set of prices, but different hours, payment methods, and pickup codes. Every per-branch rule lives in a single config file, and a QR scan carries the branch in its URL, so an order placed at the Marilao branch lands on that queue and never East Rembo's.

Craffé screenshot

The customer flow

Scan the table QR, build a drink and watch the price update as you add oat milk or an extra shot, pay ahead (simulated for the pitch), and land on a live pickup screen that chimes the moment your order is marked ready.

Behind the counter

Baristas work a real-time order board scoped to their branch by row-level security. There is a Gemini barista chatbot that knows the whole menu in warm Taglish, a buy-9-get-1 loyalty card, and printable QR table tents per branch. Built on Next.js 16 on foundations that can go live after sign-off with no rewrite.