Платформа онлайн-бронирования для сети салонов красоты NailLounge
Собрали Next.js 16 booking-платформу для сети из 5 салонов СПб: каталог услуг и мастеров, 4-шаговое бронирование, real-time слоты из YClients.
Итог: Клиент получил мобильный сайт с онлайн-записью, WCAG AA доступностью и SEO-оптимизацией под поисковые запросы по локациям.
5
локаций в СПб
30 мин
revalidate услуг и мастеров
15 сек
TTL для real-time слотов
WCAG AA
пройдено по контрастам и фокусу
С чем пришёл клиент
У сети из пяти салонов в разных районах Санкт-Петербурга все записи велись только по звонку или через ресепшн. Клиенты не могли увидеть свободные окна, сравнить мастеров и выбрать удобное время самостоятельно.
Нужно было сделать публичный сайт, который тянет состояние расписания напрямую из YClients — без второй админки, без синхронизаций в обе стороны и без риска показать на сайте слот, который в YClients уже занят.
Отдельное требование — мобильный сценарий должен был быть первым: большая часть аудитории приходит с телефона и не готова проходить длинную форму записи.
Как мы это решали
Шаг 01
Карта доступности вместо простого календаря
Собрали availability-matrix: снапшот свободных 30-минутных окон по всем мастерам салона. Клиент видит «где и когда есть запись» ещё до выбора конкретного мастера.
Шаг 02
4-шаговое бронирование в модальном окне
Салон → услуга → мастер → дата и слот. На каждом шаге данные подтягиваются из YClients в реальном времени; отмена на любом шаге не теряет ранее выбранные значения.
Шаг 03
Два уровня кэша
Мастера и услуги редко меняются — их кэшируем на 30 минут через Next.js revalidate. Слоты меняются ежеминутно, поэтому для них in-memory TTL 15 секунд плюс no-store на клиенте.
Шаг 04
Real vs mock переключатель
В dev-режиме работает mock-адаптер YClients с детерминированным набором данных. В prod через env-флаг включается боевой клиент. Это позволило дизайнить UX без зависимости от API рейт-лимитов.
Шаг 05
Страницы салонов, мастеров и услуг под SEO
Каждая локация получила отдельную страницу с Yandex Maps, фото салона и реальными отзывами. Каталоги мастеров и услуг индексируются и линкуют обратно в бронирование.
На чём собрано
Frontend
- · Next.js 16 (App Router, Server Components)
- · React 19, TypeScript strict
- · Tailwind CSS 4 + shadcn/ui (Radix)
- · Framer Motion, next-themes (light/dark)
Интеграции
- · YClients API (услуги, мастера, слоты, бронирование)
- · Yandex Metrica + цели по формам и CTA
- · Yandex SmartCaptcha на формах
- · Yandex Maps с виджетами отзывов
Инфраструктура
- · Vercel / Coolify (Docker) как deploy-target
- · sharp для production image optimization
- · In-memory TTL caches + Next.js revalidate
- · Server-only модули для защиты API-токенов
Как это выглядит
Вопросы, которые чаще всего задают по проекту
Коротко по техническим и продуктовым решениям NailLounge.