UK

Case study / 04

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

The problem

A phone call was doing the work of a product.

Cafe Cocos in Novyi Rozdil took banquet bookings over the phone from a printed menu. Guests could not estimate a per-person cost or assemble a balanced order on their own.

The useful answer was not another admin system. It was a focused tool in the guest’s browser that hands a clear, formatted order back to 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.

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.

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, and the one guests use most.

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.