Кейс / 04

Cocos Cafe

Відкрити живий сайт

Банкетне замовлення, яке гості складають самі: живий підсумок, ціна на людину й підказки страв — без бекенду.

Банкет у Cocos

РольОцифрування даних, UX, розробка й деплой — самостійно

Період2026 · працює

Next.js 16
React 19
TypeScript
CSS Modules
node:test
Vercel

Задача

Телефонний дзвінок виконував роботу цілого продукту.

Кафе «Кокос» у Новому Роздолі приймало банкети телефоном за друкованим меню. Гості не могли самі ані оцінити вартість на людину, ані скласти збалансоване замовлення.

Тут не була потрібна ще одна адмін-система. Потрібен був конкретний інструмент у браузері гостя, який повертає зрозуміле, відформатоване замовлення у звичний для кафе Viber.

Система

158 позицій меню — одне типізоване джерело правди.

Складність продукту лежить у явних даних і невеликих детермінованих функціях. За інтерфейсом немає бази, серверної сесії чи виклику AI.

Продукт

Mobile-first конструктор із навігацією по 15 категоріях та українським пошуком.
Окремо дорослі й діти, дитячий стіл, живий підсумок і ціна на гостя.
Липкі контролери замовлення, мобільна шторка й локальне збереження стану.

Логіка рішень

Дев’ять контекстних гілок, максимум три підказки й пам’ять відхилених карток.
Правила уникають невдалих поєднань і реагують одразу, коли додаються діти.
Десять unit-тестів на чистому node:test, без залежності від тестового фреймворку.

Передача замовлення

Нумерований текст із кількістю, гостями, підсумками й чесним дисклеймером попередньої заявки.
Viber deep link, Web Share API і fallback у буфер обміну з одного форматера.
Чотири runtime-залежності; жодного бекенду, бази чи env-змінної.

Продакшн-сценарії

Знання ресторану, перетворені на готове замовлення.

Цінність не лише в кошику, а в усьому шляху: від друкованого меню до повідомлення, яке команда кафе обробить без ще однієї адмінки.

01Друковане меню → типізований каталогЗнання меню стає підтримуваними продуктовими даними, а не скопійованим текстом сторінки.

Оцифрувати назви, ціни, порції та категорії страв із публічного меню.
Підготувати легкі WebP-ілюстрації для страв і візуальних якорів категорій.
Перевірити каталог із 158 позицій у 15 категоріях в одному типізованому джерелі.

02План гостей → живий підсумок банкетуГості розуміють кількість та ціну на людину ще до звернення в кафе.

Обрати страви й окремо задати кількість дорослих та дітей.
На кожній зміні перерахувати кількість, загальну суму й орієнтир на одного гостя.
Показати доречні доповнення до кошика з памʼяттю відхилень і лімітом у три картки.

03Кошик → готове замовлення у ViberАвтоматизація закінчується в каналі, яким кафе вже користується.

Зібрати гостей, страви, кількість і підсумки у стабільний формат замовлення.
Дати гостю перевірити точний текст перед Share, копіюванням або відкриттям Viber.
Передати структуроване повідомлення команді без бекенду, бази чи нової робочої панелі.

Інтерактивні прев’ю

Продакшн-правила, зведені до головних взаємодій.

Обидва прев’ю працюють локально на цій сторінці. Назви й ціни страв, математика підсумків, формат замовлення та гілки підказок взяті з живого продукту.

Конструктор банкету з живим підсумком

Додайте страви, змініть склад гостей і перегляньте саме той текст, який отримує кафе.

Справжні дані меню · без мережевих запитівЦе продакшн-логіка, а не скриншот: та сама математика й той самий форматер замовлення, якими користуються гості кафе.

Цифри

Маленький runtime, повне меню.

Усе меню ресторану, оцифроване один раз і без жодного бекенду — найменша система на цьому сайті й водночас та, якою найчастіше користуються гості.

позицій / категорій: 158 / 15; Перенесено в типізовані дані
підготовлених вручну ілюстрацій: 47; WebP для категорій і страв
гілок правил / картки максимум: 9 / 3; Із пам’яттю відхилень
runtime-залежностей / бекенду: 4 / 0; Без бази та env-змінних
unit-тестів: 10; Чистий node:test

Що це доводить