Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт ресторана на Next.js · меню, бронь, доставка

Ресторан с доставкой

Гость ресторана с доставкой обычно знает не название блюда, а ситуацию: «нас двое, без глютена, до двух тысяч». Сайт отвечает на такой запрос готовым набором и честно объясняет, почему именно он. Бронь — не форма «перезвоните мне», а схема зала, где видно, какие столы свободны в 20:00. После заказа гость видит, где его курьер, и не звонит в ресторан с вопросом «где еда».

Сценарий: Ресторан «Печь» в Екатеринбурге — вымышленный: дровяная печь и гриль, 22 блюда, 14 столов в пяти зонах зала, три зоны доставки и три курьера.

Скриншот демо: Ресторан с доставкой

Открыть демо

Открыть сайт

Начните с подбора блюд: напишите запрос или выберите пример — набор можно пересобрать и добавить в корзину одной кнопкой. Оформленный заказ откроет страницу отслеживания; ускорьте демо-время, чтобы увидеть курьера в пути. Заказы, брони и отзывы появятся в панели владельца.

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • ИИ-подбор ужина по фразе: число гостей, бюджет, диеты, острота, «без супа», «детям» — с разбором запроса чипами и объяснением каждого блюда

  • Подбор учитывает стоп-лист, аллергены по составу и то, что пиццы и ягнёнка хватает на двоих; «Другой вариант» пересобирает набор

  • Меню: разделы, поиск, фильтры «без глютена», «без лактозы», «без орехов», «веган», «не острое», сортировка, вес, калории и аллергены

  • Бронь по схеме зала: день, гости, время — свободные столы подсвечены, занятые и неподходящие по размеру видны сразу; бронь в календарь (.ics)

  • Компании от 9 гостей — отдельная заявка на банкет

  • Корзина: «С этим берут», доставка или самовывоз со скидкой, зона по улице, минимальный заказ, бесплатная доставка от суммы, промокоды без суммирования

  • Проверка адреса на карте зон доставки — время, цена и кнопка «Заказать сюда»

  • Отслеживание заказа: этапы со временем, курьер движется по маршруту на карте, ускорение демо-времени, «Повторить заказ» и отзыв после доставки

  • Панель владельца с заказами, бронями, банкетами и отзывами

Как попробовать

  1. Подберите ужин

    В блоке «Подбор блюд» нажмите «На двоих, без глютена, до 2000 ₽» — посмотрите, как запрос разобран на чипы и почему выбраны блюда.

  2. Оформите заказ

    Нажмите «Добавить всё в корзину», укажите улицу — например, Куйбышева — и примените промокод ПЕЧЬ10.

  3. Следите за курьером

    После оформления откроется страница заказа: включите ×120 и посмотрите, как курьер едет по карте.

  4. Забронируйте стол

    В блоке «Бронь» выберите вечер и число гостей, нажмите свободный стол на схеме зала и отправьте бронь.

  5. Проверьте фильтры

    В меню включите «Без глютена» и «Без орехов» — блюда отфильтруются по составу, а не по названию.

Без платных нейросетей

Платных запросов к нейросетям нет: подбор блюд — правила в браузере, которые разбирают запрос (гости, бюджет, диеты, исключения) и собирают набор из меню. В рабочей версии фразу разбирает языковая модель, а меню, стоп-лист и аллергены даются ей как инструменты — она не может предложить блюдо, которого нет. Занятость столов и движение курьера смоделированы; ресторан, блюда и отзывы — вымышленные.

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

Что будет в рабочем проекте

  • Меню, стоп-лист и заказы — из кассовой системы (iiko или r_keeper) по API, заказ уходит на кухню без ручного переноса
  • Подбор блюд — языковая модель (YandexGPT или GigaChat) с меню и аллергенами как инструментами; ограничения гостя проверяются после модели
  • Бронь — по реальной занятости столов из системы бронирования, подтверждение и напоминание в SMS или Telegram
  • Доставка — зоны по полигонам на Яндекс Картах, геокодер адреса, позиция курьера из его приложения
  • Оплата картой и СБП через эквайринг с чеком по 54-ФЗ

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Подбор по фразе снимает главный барьер доставки — «не знаю, что выбрать»: гость получает готовый набор под бюджет и добавляет его одной кнопкой.
  • Порог бесплатной доставки и «С этим берут» прямо в корзине поднимают средний чек без навязчивых баннеров.
  • Схема зала и страница курьера убирают звонки «есть ли столик в восемь» и «где мой заказ» — администратор занят гостями в зале.

Для разработчиков

  • Разбор запроса, подбор набора, расчёт корзины, свободные столы и этапы доставки — чистые функции с тестами; случайность подбора задана сидом, поэтому «Другой вариант» воспроизводим.
  • Кириллица и регулярные выражения: \b и \w в JavaScript не видят русские буквы, поэтому границы слов заданы через lookbehind и lookahead.
  • Корзина, заказы и брони живут в localStorage через useSyncExternalStore; занятость столов детерминирована от даты и стола, чтобы схема не «мигала» между перезагрузками.

Советы

  • Совет 01

    Аллергены фильтруйте по составу блюда, а не по слову в названии: «бурата» не говорит, что в ней молоко.

  • Совет 02

    Не суммируйте скидки молча: если промокод меньше скидки за самовывоз, покажите, что применили бо́льшую, — иначе гость решит, что промокод не сработал.

Нужен такой же для вашего бизнеса?

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

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · лендинг услуги

    работает

    Лендинг стоматологии

    Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · B2B, многостраничный

    работает

    Сайт производственной компании

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · ИИ-перевод, SEO по языкам

    работает

    Экспортный сайт на четырёх языках

    Сайт экспортёра алтайского мёда на русском, английском, китайском и арабском: переведённые адреса страниц, SEO по языкам, калькулятор оптовой цены с доставкой и студия перевода, которая проверяет черновик нейросети по глоссарию.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · кабинет, ИИ-помощник, Telegram

    работает

    Личный кабинет клиента

    Кабинет клиента типографии: заказы с этапами производства, согласование макета с правками прямо на макете, счета с оплатой по СБП, документы с электронной подписью, новый заказ с расчётом цены, чат с ИИ-помощником и менеджером, уведомления в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

    Онлайн-школа аналитики: лендинг с задачей на Python, которая проверяется прямо в браузере, тест уровня с персональной программой, рассрочка с расчётом налогового вычета, кабинет ученика с домашними заданиями и ИИ-ревью, ИИ-наставник по материалам курса и сертификат с проверкой по QR-коду.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

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

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

    Сайт фитнес-студии малых групп: расписание на неделю с местами и записью в два клика, лист ожидания с автоматическим переносом в группу, абонементы с заморозкой из кабинета, ИИ-план тренировок на 4 недели по пяти вопросам и личный кабинет со статистикой посещений.

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

    Сайт двухдневной конференции: программа по залам и трекам с личным расписанием, ИИ-подбор докладов без пересечений по роли и свободному тексту, билеты волнами с промокодами и скидкой команде, QR-код на каждого участника с проверкой на входе и нетворкинг с подбором собеседников и встречами в перерывах.

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

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

    • Next.js
    • React
    • TypeScript