Экскурсии в Технопарк «Сколково»
Публичный сайт экскурсий и мастер-классов Технопарка «Сколково»: подбор программы по дате, бронирование места на конкретный сеанс и оплата онлайн.
Результат
- 4
- экскурсионные программы в каталоге
- 50
- мастер-классов по 20 направлениям
- 5
- форматов подбора: от школьных групп до бизнеса
Экраны продукта
Подбор на главной: календарь показывает даты со свободными сеансами, справа — формат мероприятия. Выбор переносится в каталог через параметры адресной строки.
Каталог на выбранную дату: длительность, возрастное ограничение, язык, цена и сетка сеансов. Недоступные слоты видно сразу, свободные ведут в оплату.
Блок экскурсионных программ. Переключение между «Технопарком», Dive in, квестом и Инновационным центром — на одной странице, без перезагрузки.
Раздел мастер-классов: направления и счётчики тянутся из Strapi, поэтому программу обновляют менеджеры, а не релиз.
Мобильная вёрстка: тот же календарь и подбор в одну колонку — основной трафик приходит с телефонов.
Задача бизнеса
Заявки на экскурсии приходили в почту и по телефону, а расписание жило в таблицах: посетитель не видел, есть ли места на нужную дату, а администраторы вручную сводили сеансы, оплату и загрузку групп. От сайта требовалось закрыть весь путь целиком: выбрать дату, увидеть свободные места на конкретный сеанс и оплатить картой. Расписание, программы и цены должны были меняться из админки силами менеджеров, без релиза.
Моя роль
Fullstack разработчик: разрабатываю и поддерживаю сайт целиком — фронтенд на Next.js, серверные роуты для лид-формы и приёма платежей, а также схемы контента в Strapi, по которым команда «Сколково» сама наполняет программы, расписание и цены.
Решение
Next.js с рендерингом на сервере: главная и каталог отдаются готовыми, поэтому страница со списком сеансов открывается быстро и индексируется. Календарь и фильтры (формат, аудитория, язык) держат состояние в MobX и синхронизируются с адресной строкой — ссылка на конкретный день и формат открывается сразу нужной. Контент — программы, локации, мастер-классы, расписание — лежит в Strapi. Бронирование идёт через серверные роуты: заявка уходит в Bitrix24, оплата — через виджет CloudPayments, статус платежа принимает отдельный колбэк.