Сайт доставки еды

Кумер: сайт шаурмичной с доставкой по районам Казани

Демо-сайт вымышленной шаурмичной «Кумер» в Казани: меню с составом по граммам, корзина и условия доставки по семи районам.

Открыть проект Обсудить проект

Главная страница Кумера: заголовок «Шаурма на углях» и срез шаурмы с составом

Задача

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

Что сделали

Меню и 10 страниц блюд: состав по граммам, КБЖУ, аллергены
Корзина в браузере и оформление с доставкой по району
7 страниц районов: время днём и ночью, минимальный заказ, ориентиры
36 страниц и один скрипт на 3 КБ, Lighthouse на телефоне 96-100

Компания придумана, сайт работает

«Кумера» не существует: название, три кухни, цены и акции мы придумали для демо. На каждой странице сверху написано, что это демо-проект студии и заказы не принимаются. Остальное работает как на настоящем сайте: меню, корзина, оформление заказа, страницы районов и блог. Районы, улицы и ориентиры Казани настоящие.

Меню, в котором видно, что внутри

У каждого из десяти блюд своя страница: состав по граммам, вес, КБЖУ на порцию и на 100 г, аллергены и что взять к нему. Фотографий нет. Вместо них срез шаурмы, который рисует код по составу блюда: каждый ингредиент занимает на срезе столько места, сколько его в рецепте. Поменяли рецепт, поменялся и рисунок.

Доставка по районам

У каждого из семи районов отдельная страница: какая кухня везёт, сколько ехать днём и ночью, минимальный заказ, сумма для бесплатной доставки, микрорайоны и ориентиры для курьера. Корзина хранится в браузере. При оформлении сайт сам считает доставку по выбранному району и проверяет имя, телефон и адрес.

В демо заказ никуда не уходит. В рабочей версии он приходил бы на кухню в Telegram. Как устроен такой проект целиком, написано на странице сайт для доставки еды.

Афиша на угольной стене

Сайт сделан как уличная афиша: двухцветная печать, жёлтый для кнопок, розовый для наклеек. Каждое блюдо в меню напечатано на отдельном кассовом чеке, акции оформлены купонами с линией отреза.

Все 36 страниц собраны заранее в статический HTML, SvelteKit не отправляет в браузер ни строчки кода.
Единственный скрипт отвечает за корзину и весит около 3 КБ в gzip.
Lighthouse на телефоне: производительность 96-100, остальные оценки 100 на всех страницах. Первый экран открывается за 1,6-1,7 с, страница весит 86-110 КБ.

Если заказы удобнее принимать прямо в мессенджере, то же меню и корзину можно перенести в мини-приложение Telegram.