UK

Case study / 04

Restaurant banquet menu builder

Cocos Cafe

Open live site

A banquet order guests can compose themselves — live totals, cost per person and pairing suggestions, with no backend.

RoleData digitization, UX, build and deployment — solo
Timeframe2026 · live
  • Next.js 16
  • React 19
  • TypeScript
  • CSS Modules
  • node:test
  • Vercel

Business result

What changed.

  1. 01Before

    A phone call and a printed menu did the whole job: guests could not price a banquet or send the cafe a balanced order themselves.

  2. 02Built

    A mobile builder over the real 158-item menu, with guest counts, live totals, cost per person and deterministic pairing suggestions.

  3. 03Now

    Guests assemble and price the banquet in their browser, then send a ready-to-process order through the cafe's existing Viber workflow.

The system

158 menu items, one typed source of truth.

The product keeps its complexity in explicit data and small deterministic functions. There is no database, server session or AI call behind the interface.

01

Product

  • Mobile-first banquet constructor with 15-category navigation and Ukrainian search.
  • Adult and child counts, separate kids’ table, live total and per-guest estimate.
  • Sticky order controls, bottom sheet and local order persistence.
02

Decision logic

  • Nine context branches with a three-card suggestion cap and dismissal memory.
  • Pairing rules avoid known bad combinations and respond immediately when children are added.
  • Ten unit tests run on bare node:test, without a test framework dependency.
03

Handoff

  • Numbered plaintext order with quantities, guest counts, totals and a clear pre-order disclaimer.
  • Viber deep link, Web Share API and clipboard fallback from the same formatter.
  • Four runtime dependencies; no backend, database or environment variables.

Production workflows

Restaurant knowledge, turned into a usable order.

The valuable part is not the cart UI by itself, but the path from a printed menu to a message staff can process without learning another system.

01Printed menu → typed catalogMenu knowledge becomes maintainable product data instead of copied page text.
  1. Digitize dish names, prices, servings and category membership from the public menu.
  2. Prepare lightweight WebP artwork for dishes and visual category anchors.
  3. Validate the resulting 158-item, 15-category catalog in one typed source.
02Guest plan → live banquet totalGuests understand quantity and per-person cost before contacting the cafe.
  1. Choose dishes while configuring adult and child guest counts.
  2. Recalculate quantities, total price and the per-guest estimate on every change.
  3. Surface deterministic additions that fit the basket while respecting dismissals and a three-card cap.
03Basket → staff-ready Viber orderAutomation ends inside the communication channel the cafe already uses.
  1. Format guest counts, selected dishes, quantities and totals into a consistent order summary.
  2. Let the guest review the exact plaintext before sharing, copying or opening Viber.
  3. Hand the structured message to cafe staff without a backend, database or new operations dashboard.

Real product

The builder in the guest's phone.

This current mobile capture comes from the live product. The tour below uses the same menu data, total calculation and order formatter without opening Viber or storing anything.

Open live site
Live Cocos Cafe banquet builder on a mobile screen
Captured from the live siteSafe tour: build an order, inspect totals and trigger suggestions

Interactive previews

The production rules, reduced to the essential interactions.

Both previews run locally in this page. The dish names, prices, totals math, order format and pairing branches come from the shipped product.

K1

Banquet builder with live totals

Add dishes, change the guest mix and inspect the exact order text handed to the cafe.

This view follows the important part of the screen. Open 1:1 for the full product surface.

Real menu data · zero network callsThis is production logic, not a screenshot — the same totals math and order formatter the cafe’s guests use.

Numbers

Small runtime, complete menu.

A restaurant's entire menu, digitised once and running with no backend at all — the smallest system on this site.

menu items / categories
158 / 15
Transcribed into typed data
hand-prepared artworks
47
WebP category and menu art
rule branches / card cap
9 / 3
With dismissal memory
runtime dependencies / backend
4 / 0
No database or env vars
unit tests
10
Bare node:test

What this proves

The smallest architecture can still carry real domain knowledge.

01

Web platforms without default complexity

A production Next.js product can stay static when the workflow does not need a server.

02

Internal rules made visible

The cafe’s menu knowledge becomes inspectable, testable logic instead of a vague recommendation layer.

03

Automation that ends where the team works

The product hands a structured order into Viber instead of forcing a new operating process on the cafe.