Кофемания
Панель оператора доставки, заказ и оплата за столом, сайты группы и поддержка карьерного портала.
Delivery Hub и оплата за столом.
2022–2025 · frontend ресторанной группы
Моя роль
Единственный frontend-разработчик на двух ключевых продуктах: оплату за столом вёл с первого коммита, Delivery Hub — с ноября 2023 по февраль 2025. Развивал интерфейсы, согласовывал контракт событий с командой бэкенда и параллельно делал сайты группы. Дорабатывал и поддерживал карьерный портал rabota.coffeemania.ru.
- Delivery Hub
- Лента заказов и инструменты оператора
- Оплата и заказ
- Меню, счёт, оплата через СБП и списание баллов
- Сайты группы
- Лендинги, сайты брендов и карьерный портал
Задача бизнеса
Оператору доставки нужна общая лента заказов, гостю — заказ и оплата по QR-коду, маркетингу — страницы к запуску ресторанов и брендов. Карьерный портал помогает кандидатам найти вакансию и отправить анкету.
Delivery Hub
Рабочее место оператора доставки
В ленту поступают заказы из всех каналов. В ней видны статусы, опоздания и недоплаты. Рядом открывается карточка заказа: оператор может проверить состав, сменить статус или передать заказ курьеру.
Из звонка — в оформленный заказ
Редактор ведёт оператора через три шага. Телефон подставляется из виджета входящих звонков, профиль гостя подтягивается вместе с адресами и лояльностью. По адресу определяются ресторан, стоимость и время доставки.
Обновления в реальном времени
React и TypeScript на клиенте, SignalR для событий от .NET-бэкенда. В ленте есть фильтры, пагинация и подсветка заказов, требующих внимания.
Управление заказом из карточки
Смена статуса, переотправка в iiko, чек сборки, стикеры и передача в White Cabs доступны из карточки. Ручная смена статуса не требует повторной отправки в кассу.
Инженерные детали
Черновик вместо прямой правки
При редактировании создаётся отдельный черновик заказа. Изменения применяются к заказу при сохранении.
Меню и отчёты
В меню видны остатки, SKU и стоп-лист. Поиск учитывает варианты «е/ё» и «и/й». Отчёты оператора и шефа сортируются с учётом типов данных и выгружаются в Excel.
Ещё экраны (3)
Оплата и заказ
Заказ и оплата по QR-коду стола
Гость открывает сервис в браузере: получает счёт из кассы, списывает баллы и выбирает банк для оплаты через СБП. Позже добавил возможность самостоятельно заказать блюда из меню.
Проверка статуса платежа
Выбранный банк открывается диплинком и запоминается. Экран статуса опрашивает бэкенд до подтверждения, после успеха предлагает оставить чаевые через CloudTips.
Заказ из меню на телефоне
Категории следуют за прокруткой. Карточки блюд открываются в нижних шторках, поддерживают модификаторы и варианты приготовления. Корзина объединяет одинаковые позиции и отдельно показывает стоп-лист.
Инженерные детали
Состояние стола и корзины
Доменные модели на Effector разделяют стол, счёт, меню, банки и оплату. Стол и корзина синхронизируются с адресом страницы. После 40 минут бездействия сессия стола сбрасывается.
Развитие после MVP
От первого коммита до production в июле 2022 прошло 28 дней. Затем появились лояльность, чаевые, переход с Preact CLI на Vite и заказ к столу в 2024 году.
Ещё экраны (3)
Сайты группы
Сайты ресторанной группы
Делал лендинги «Кофемании», раздел «Устойчивое развитие», сайты «Жажды крови» и Bez Tarelok. Дорабатывал и поддерживал карьерный портал.
Внутри coffeemania.ru
Лендинги встроены в Next.js-приложение с серверным рендерингом и отдельной мобильной сборкой. «Устойчивое развитие» объединяет пять внутренних страниц.
Самостоятельные сайты
У «Жажды крови» — видео, 360°-тур на krpano и Schema.org. У Bez Tarelok — Next.js и CMS Keystone для редактирования контента.
Карьерный портал
Дорабатывал и поддерживал rabota.coffeemania.ru с CMS Strapi. На портале кандидаты смотрят вакансии и условия работы, выбирают позицию и отправляют анкету.
Ещё экраны (3)
Результат
Оплата за столом, Delivery Hub и сайты группы
Запустил первую версию оплаты за столом за 28 дней и развивал её ещё два с половиной года. Параллельно работал над Delivery Hub и сайтами группы, дорабатывал и поддерживал карьерный портал. По двум продуктам закрыл 208 задач.
- 28
- дней от первого коммита оплаты за столом до продакшена
- 6
- каналов заказов в одной ленте хаба: сайт и приложение, Яндекс Еда, Delivery Club, Сбер, MirCity и заказ за столом
- 326/327
- коммитов во фронтенде Delivery Hub с ноября 2023 по февраль 2025 — мои
Стек
- React
- TypeScript
- Effector
- SignalR
- Next.js
- Vite
- ExcelJS
- SCSS Modules
- Keystone
- Strapi
- Docker