ChatFood → Deliverect

ChatFood — региональная платформа order-and-pay для ресторанов: меню, заказы, оплата. В начале 2022 года её купил Deliverect. Я пришёл инженером и в итоге поработал почти со всем стеком: фронтенд флоу заказа на Vue 3, бэкенд на Laravel и внутренняя автоматизация в Retool. Это честная версия того, как всё прошло.

Нанят на бэкенд, через месяц на Vue

Я пришёл backend-разработчиком. Примерно через месяц команда попросила перейти на фронтенд — Vue.js 3 — а на тот момент я не написал на Vue ни строчки. Не «подзабыл». Ноль.

Я согласился. Через неделю мой первый PR был в мейне. К концу того же месяца я был одним из самых продуктивных инженеров на фронте. Дело не в таланте — дело в том, чтобы изучить фреймворк как следует, а не копипастить себе путь сквозь него: вся модель реактивности Vue 3, Composition API, границы компонентов, как на самом деле течёт состояние. Когда это сложилось, я перестал бороться с фреймворком и начал контрибьютить в дизайн-систему, на которой строилась остальная команда.

Этот разворот — и есть вся суть. Ценность senior-инженера не в синтаксисе, который он уже знает, а в том, как быстро он становится опасен в незнакомом стеке, не оставляя за собой бардака. Если вам нужно это в своей команде — это работа fractional CTO и веб-приложений, которой я занимаюсь.

Строим флоу заказа

Продукт для клиента — это заказ за столом: отсканировал, посмотрел меню, заказал, оплатил, всё с телефона, без установки приложения. Я работал по всему этому флоу.

Больше всего я владел страницей каталога заказа — где клиент листает меню и выбирает позиции. Меню в food-tech обманчиво сложные: категории, модификаторы, комбо, состояния «нет в наличии», диетические метки, картинки, которые грузятся по плохому ресторанному Wi-Fi. Всё должно ощущаться мгновенным на среднем телефоне, иначе человек бросает заказ. Я собрал это на Vue 3 на компонентах дизайн-системы, держал состояние предсказуемым и сделал так, чтобы медленные пути (картинки, сеть) деградировали мягко, а не блокировали меню.

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

Checkout с Apple Pay

На checkout заказ еды либо выигрывается, либо теряется. Я реализовал Apple Pay в checkout, чтобы вернувшийся клиент платил в пару тапов, а не набирал номер карты на телефонной клавиатуре. Кошельковые платежи — правильное решение для заказа за столом: чем быстрее шаг оплаты, тем больше заказов реально доходят до конца. Сделать это правильно — обычная платёжная работа: сессия Apple Pay и валидация мерчанта, UX платёжного листа и передача провайдеру платежей так, чтобы состояния успеха и ошибки были честными.

Бэкенд: payment links

Я жил не только на фронтенде. На бэкенде Laravel я поучаствовал в фиче payment links — генерации ссылки, которую ресторан мог отправить клиенту, чтобы собрать оплату вне in-app флоу (заказы по телефону, доставки, фоллоу-апы). Поверхность маленькая, но крайних случаев много: состояние ссылки, истечение срока, вебхуки провайдера, подтверждающие платёж, идемпотентность, чтобы ссылка не списала дважды. Это тот бэкенд, который я делаю изо дня в день — см. Laravel и платёжную работу на PropertyCheck.

Retool + автоматизация WhatsApp

Последний кусок — внутренний тулинг. Команде нужна была автоматизированная WhatsApp-кампания — достучаться до сегмента клиентов сообщением по расписанию, без инженера, который запускает это руками каждый раз. Я собрал это как скрипт в Retool, которым тоже раньше ни разу не пользовался. Рабочую версию выпустил за несколько дней: вытащить аудиторию, собрать кампанию, отправить через WhatsApp messaging API, с управлением, которым реально мог пользоваться не-инженер.

Мелочь, но паттерн тот же, что и с разворотом на Vue — берёшь незнакомый инструмент, понимаешь, для чего он на самом деле, быстро выпускаешь что-то реальное, вместо того чтобы ждать ощущения готовности.

Что я из этого вынес

ChatFood — это проект, на который я показываю, когда спрашивают, могу ли я работать вне зоны комфорта. Нанят на бэкенд, через месяц фронтенд на Vue 3, payment links на Laravel, автоматизация в Retool — широта, на реальном продукте, в сроках поглощения. Этот размах я и приношу в веб-приложения, коммерс-проекты и проекты вроде NIO MENA, Geely UAE, Emarat и alfii.