← Назад к проектам
Кофе QR Меню · Ресторан

CoffitoKitchen

Полная замена бумажным меню. Клиенты сканируют QR код, выбирают блюда, показывают заказ официанту — всё автоматизировано.

389 блюд в меню
24 категории
6,519 строк кода

Зачем это нужно?

Проблема Проблема

  • Бумажные меню проходят через сотни рук в день — негигиенично
  • Изменить цену или убрать блюдо = перепечатать все меню
  • Официанты тратят время на переписывание заказов
  • Нет статистики: какие блюда популярны, когда пики заказов

Решение Решение

  • Клиент сканирует QR код на столике → меню на его телефоне
  • Изменить что угодно за 5 минут в коде
  • QR код заказа → официант сканирует → заказ в системе
  • Графики, фильтры, статистика в реальном времени

Демонстрация на разных устройствах

Система полностью адаптивна — работает на телефонах, планшетах, десктопах.

Клиентское меню
Сканер официанта
🔒 https://coffitokitchen.example.com/staff
Статистика и управление

Статистика и аналитика

Панель персонала собирает данные автоматически. Управляющий видит полную картину бизнеса.

Метрики 6 основных метрик

  • Всего заказов — счетчик всех заказов
  • Выполнено — завершенные заказы
  • Общая выручка — сумма всех оплаченных заказов
  • Средний чек — выручка / количество заказов
  • Среднее время — от сканирования до готовности
  • Рост за неделю — сравнение с прошлой неделей в %

График График выручки

Линейный график за последние 30 дней. Видны тренды, пики, спады. Hover показывает точную сумму за день.

Tap
Tap

Блюда ТОП-10 блюд

Горизонтальные бары. Сразу видно что заказывают чаще всего. Помогает планировать закупки и меню.

Tap
Tap

Часы Загруженность по часам

24 столбца — по одному на каждый час. Видны пики (обычно 12-14 и 19-21). Можно планировать смены персонала.

Tap
Tap

Категории Распределение по категориям

Круговая диаграмма. Показывает какие категории приносят больше денег: кофе 35%, горячие блюда 25%, завтраки 15%...

Tap
Tap

Как это работает

1

Клиент сканирует QR на столике

Открывается меню с 389 блюдами в 24 категориях. Фото каждого блюда, цены, описания.

2

Выбирает блюда с анимациями

Добавление в корзину с летящей анимацией. "Живая шторка" навигации — индикатор скользит к активной категории при прокрутке.

3

Генерируется уникальный QR заказа

Данные сжимаются на 70% (500→150 байт), генерируется QR с логотипом ресторана в центре. Действителен 30 минут.

4

Официант сканирует встроенным сканером

Открывает панель персонала, включает камеру, наводит на QR — заказ моментально появляется в системе со всеми деталями.

5

Статистика собирается автоматически

4 графика обновляются в реальном времени: выручка за 30 дней, ТОП-10 блюд, загруженность по часам, распределение по категориям.

Ключевые фишки

Корзина

Летящая анимация корзины

Изображение блюда летит от карточки к кнопке корзины, уменьшается и вращается. Корзина подпрыгивает, счетчик пульсирует.

Tap
Tap
Фильтры

6 типов фильтров

Поиск по номеру, фильтр по статусу, по столику, по дате (с календарем), по сумме, сортировка в любом порядке.

Tap
Tap
QR код

QR с компрессией данных

Умный алгоритм сжатия: вместо полных названий блюд — только ID и количество. Экономия 70% размера QR кода.

Tap
Tap
Сканер

Встроенный сканер

Не нужны отдельные приложения. Прямо в браузере через Camera API сканирует QR за секунду, декодирует jsQR библиотекой.

Tap
Tap
Графики

4 интерактивных графика

Chart.js визуализация: линейный график выручки, горизонтальные бары ТОП-10, загруженность по часам, круговая диаграмма категорий.

Tap
Tap
Календарь

Календарь с подсветкой

Индивидуальный календарь фильтров. Подсвечивает только дни с заказами, дни без заказов — disabled. Выбор диапазона дат.

Tap
Tap
Навигация

"Живая шторка" навигации

Горизонтальная прокрутка категорий с плавающим индикатором. Автоматически отслеживает текущую категорию при скролле.

Вибрация

Тактильная обратная связь

Vibration API: легкая вибрация при добавлении в корзину, средняя при успехе, двойная при ошибке. Улучшает UX на мобильных.

Технологии

Frontend

Vanilla JavaScript HTML5 Canvas CSS3 Variables CSS Grid & Flexbox

Библиотеки

Chart.js 4.4.0 qrcode-generator jsQR 1.4.0 Google Fonts

Browser API

MediaDevices API Vibration API Intersection Observer localStorage

Метрики

6,519 строк кода 5.8 MB проект 10+ анимаций Mobile-first

Почему не агрегатор? (iiko, Poster)

Наша система Наша система
Агрегаторы Агрегаторы
Стоимость
0₸ (только хостинг)
15,000-50,000₸/мес
Дизайн
Индивидуальный под бренд
Шаблонный для всех
Скорость
Мгновенная загрузка
3-5 секунд
Данные
Полный контроль
Хранятся у провайдера
Кастомизация
Любые изменения
Ограничены
Комиссии
0%
3-5% с заказов

Стоимость Стоимость

Наша система Наша система
0₸ (только хостинг)
VS
Агрегаторы Агрегаторы
15,000-50,000₸/мес

Дизайн Дизайн

Наша система Наша система
Индивидуальный Индивидуальный под бренд
VS
Агрегаторы Агрегаторы
Шаблонный Шаблонный для всех

Скорость Скорость

Наша система Наша система
Мгновенная Мгновенная загрузка
VS
Агрегаторы Агрегаторы
Медленно 3-5 секунд

Данные Данные

Наша система Наша система
Да Полный контроль
VS
Агрегаторы Агрегаторы
Нет Хранятся у провайдера

Кастомизация Кастомизация

Наша система Наша система
Да Любые изменения
VS
Агрегаторы Агрегаторы
Нет Ограничены

Комиссии Комиссии

Наша система Наша система
0%
VS
Агрегаторы Агрегаторы
3-5% с заказов

Результаты

Гигиена

Гигиена

Никто не трогает меню руками. Каждый клиент смотрит на своем телефоне.

Гибкость

Гибкость

Изменить цену или убрать блюдо = 2 минуты в коде. Не нужно перепечатывать меню.

Автоматизация

Автоматизация

Официанты не переписывают заказы. Сканировал → заказ в системе → на кухню.

Аналитика

Аналитика

Владелец видит полную картину: что заказывают, когда, за сколько. Данные для решений.

Нужно что-то похожее?

Хотите такую же систему? Разработаю индивидуальное решение для вашего ресторана, кафе или бара.