Home Bakery

Home Bakery — кофейня и булочная в Москве. Гостям нужно было меню, где легко найти позицию и проверить состав, а команде — возможность самой менять позиции, фото и наличие. Дизайнера в проекте не было: макеты и интерфейс я делал сам, параллельно с кодом.

Сначала я выяснил, о чём гости спрашивают чаще всего, — о составе и аллергенах. Поэтому главным экраном стала карточка позиции, а не главная страница.

В меню 114 позиций в двадцати с лишним категориях. Гость открывает категорию или ищет по названию и ингредиенту.

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

Палитра тёплая, как витрина булочной: карамельный фон, светлые карточки, шоколадный текст. Оранжевым отмечена выбранная категория, коричневым — кнопки и фокус.

Заголовки набраны Geologica, текст — Raleway.

В каталоге карточка показывает фото, название и цену, остальное открывается по кнопке «Подробнее». На странице позиции состав и аллергены стоят отдельными блоками, а если состав ещё проверяется, сайт прямо пишет об этом.

Внизу экрана — тёмная капсула: фильтры, переключатель «Кухня / Бар» и поиск. Скругления: 6 px у полей, 32 px у крупных блоков, кнопки — пилюли.

В админке позиция редактируется на одном экране: фото с кадрированием 4:3, КБЖУ, аллергены, наличие и публикация. Внизу одна липкая панель со статусом и кнопками «Отмена» и «Сохранить».

Сайт собран на Astro с серверным рендерингом, данные лежат в SQLite. Сделал импорт меню и фото, резервные копии и демо-режим, чтобы заказчик мог посмотреть всё до запуска.

Карточку с аллергенами проверял на позициях с длинным составом, чтобы она не разваливалась на узком экране. Сейчас проект работает в демо-режиме, постоянный деплой — отдельная задача.