All case studies

Frontend Engineer

Coffeemania

A delivery operator dashboard, table ordering and payments, group websites and careers portal maintenance.

Open the product
Delivery Hub: the order feed and the order card on one screen. The status can be changed by hand — for instance when the order is already in the POS and shouldn’t be sent again.
Delivery Hub: the order feed and the order card on one screen. The status can be changed by hand — for instance when the order is already in the POS and shouldn’t be sent again.

Delivery Hub and table payments.

2022–2025 · restaurant group frontend

My role

I was the sole frontend developer on two core products: table payment from its first commit, and Delivery Hub from November 2023 to February 2025. I developed the interfaces, agreed event contracts with the backend team and built group websites in parallel. I also made improvements to and maintained the careers portal at rabota.coffeemania.ru.

Delivery Hub
Order feed and operator tools
Table service
Menu, bill, SBP payments and loyalty points
Group websites
Landing pages, brand websites and careers portal

The business problem

Delivery operators need a shared order feed, guests need ordering and payment through a table QR code, and marketing needs pages for restaurant and brand launches. The careers portal helps candidates find a vacancy and submit an application.

Delivery Hub

A delivery operator’s workspace

The feed receives orders from all channels and shows statuses, delays and underpayments. An order card opens alongside it so operators can check items, change the status or hand the order over to a courier.

From a call to an order

A three-step editor guides the operator. The incoming-call widget supplies the phone number. The guest profile includes addresses and loyalty details. The address determines the restaurant, delivery price and timing.

Delivery Hub, new order: the guest profile loads by phone with the loyalty level and saved addresses. The restaurant, delivery time and cost are derived from the address.
Delivery Hub, new order: the guest profile loads by phone with the loyalty level and saved addresses. The restaurant, delivery time and cost are derived from the address.

Live updates

React and TypeScript on the client, with SignalR events from a .NET backend. The feed supports filters, pagination and highlighting for orders that need attention.

Managing orders from the order card

Status changes, resending to iiko, packing slips, labels and handover to White Cabs are available in the card. Manual status changes do not require resending to the till.

Engineering details

  • A draft before saving

    Editing creates a separate draft of the order. Changes are applied to the order when the draft is saved.

  • Menu and reports

    The menu shows stock, SKUs and unavailable items. Search accommodates Russian spelling variants. Operator and chef reports use type-aware sorting and export to Excel.

More screens (3)
Delivery Hub, the dish card: cooking options, nutrition facts and the restaurant’s stock. Several items can be added in a row without closing the window.
Delivery Hub, the dish card: cooking options, nutrition facts and the restaurant’s stock. Several items can be added in a row without closing the window.
Delivery Hub, checkout: payment method, a loyalty points hold, paid cutlery and a manual delivery price.
Delivery Hub, checkout: payment method, a loyalty points hold, paid cutlery and a manual delivery price.
Delivery Hub, operator and chef reports for a date range: type-aware column sorting and Excel export.
Delivery Hub, operator and chef reports for a date range: type-aware column sorting and Excel export.

Table service

Ordering and paying through a table QR code

Guests open the service in a browser, retrieve the bill from the till, redeem points and select a bank for payment via SBP. I later added ordering directly from the menu.

Paying at the table: the table from the QR code, the POS bill with points redeemed, the Faster Payments bank picker with the remembered bank on top, and the confirmation offering a tip.
Paying at the table: the table from the QR code, the POS bill with points redeemed, the Faster Payments bank picker with the remembered bank on top, and the confirmation offering a tip.

Checking payment status

The selected bank opens through a deep link and is remembered. A status screen polls the backend until payment is confirmed, then offers tipping via CloudTips.

Ordering on a phone

Categories follow scrolling. Dish cards open in bottom sheets with modifiers and cooking options. The basket merges matching items and separates unavailable dishes.

Engineering details

  • Table and basket state

    Effector domain models separate the table, bill, menu, banks and payment. Table and basket state synchronise with the URL. The table session resets after 40 minutes of inactivity.

  • Development beyond the MVP

    The first commit to production took 28 days in July 2022. Later work added loyalty, tipping, migration from Preact CLI to Vite, and table ordering in 2024.

More screens (3)
Ordering at the table: the menu with its category bar, the dish card in a bottom sheet and the cart with modifiers and comments.
Ordering at the table: the menu with its category bar, the dish card in a bottom sheet and the cart with modifiers and comments.
Loyalty: sign-in by SMS code, and in the cart a points slider with unavailable dishes in their own block.
Loyalty: sign-in by SMS code, and in the cart a points slider with unavailable dishes in their own block.
The full bill and the payment waiting screen: until the bank confirms, a countdown runs and another bank can be chosen.
The full bill and the payment waiting screen: until the bank confirms, a countdown runs and another bank can be chosen.

Group websites

Websites for the restaurant group

I built Coffeemania landing pages, the Sustainability section, Zhazhda Krovi and Bez Tarelok websites. I also made improvements to and maintained the careers portal.

Websites: the Coffeemania Chef’s landing — the concept story switches between tabs over a photo of the room.
Websites: the Coffeemania Chef’s landing — the concept story switches between tabs over a photo of the room.
Websites: above the fold on Zhazhda Krovy — background video from the open kitchen, table booking, the menu and the RU/EN switch.
Websites: above the fold on Zhazhda Krovy — background video from the open kitchen, table booking, the menu and the RU/EN switch.
Coffeemania careers portal: the home page introduces the team and links to the application form.
Coffeemania careers portal: the home page introduces the team and links to the application form.
Careers portal: the vacancy list. Each position expands to show working conditions.
Careers portal: the vacancy list. Each position expands to show working conditions.

Within coffeemania.ru

Landing pages are part of a Next.js application with server rendering and a separate mobile layout. Sustainability brings together five internal pages.

Standalone websites

Zhazhda Krovi includes video, a krpano 360° tour and Schema.org markup. Bez Tarelok uses Next.js with Keystone CMS for content editing.

Careers portal

I made improvements to and maintained rabota.coffeemania.ru with Strapi CMS. Candidates browse vacancies and working conditions, choose a position and submit an application.

More screens (3)
Websites: the Sustainability section — a hub of five inner landings with cards coming from the CMS.
Websites: the Sustainability section — a hub of five inner landings with cards coming from the CMS.
Websites: the Bez Tarelok home page — the slider and copy are edited in Keystone CMS.
Websites: the Bez Tarelok home page — the slider and copy are edited in Keystone CMS.
Websites: the coffeemania.ru mobile build — the page is served by a separate template with table booking pinned to the bottom.
Websites: the coffeemania.ru mobile build — the page is served by a separate template with table booking pinned to the bottom.

Outcome

Table payments, Delivery Hub and group websites

I launched the first version of table payments in 28 days and developed it for another two and a half years. Alongside it, I worked on Delivery Hub and the group’s websites, and improved and maintained the careers portal. I completed 208 tasks across the two products.

28
days from the first table-payments commit to production
6
order channels in one hub feed: website and app, Yandex Eda, Delivery Club, Sber, MirCity and table ordering
326/327
commits in the Delivery Hub frontend from November 2023 to February 2025 are mine

Stack

  • React
  • TypeScript
  • Effector
  • SignalR
  • Next.js
  • Vite
  • ExcelJS
  • SCSS Modules
  • Keystone
  • Strapi
  • Docker