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

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

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

Студия малых групп теряет деньги на двух вещах: полные группы, в которые не попасть, и абонементы, которые бросают через две недели. Здесь на полную группу можно встать в очередь — освободилось место, и клиент уже записан. Уехал в отпуск — заморозил абонемент сам, без звонка администратору. А новичок получает не «приходите на что угодно», а план на месяц из реального расписания с ростом нагрузки.

Сценарий: Фитнес-студия «Ядро» в Самаре — вымышленная: три зала (силовой, сайкл, йога), 10 направлений, 5 тренеров и 40 занятий в неделю.

Скриншот демо: Фитнес-студия

Открыть демо

Открыть сайт

Запишитесь на пробное — первое занятие бесплатно, дальше понадобится абонемент. На полную группу встаньте в лист ожидания и нажмите «Кто-то отменил (демо)». В кабинете можно войти демо-клиентом с историей посещений и заморозить абонемент. Записи, абонементы и заморозки появятся в панели владельца.

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

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

  • Расписание на 7 дней: свободные места по каждой группе, фильтры по направлению, времени, тренеру и «для новичков»

  • Запись в два клика: первое занятие бесплатно, дальше — по абонементу; повторно данные не спрашиваются; запись в календарь (.ics)

  • Лист ожидания: позиция в очереди, при отмене место переходит первому автоматически

  • Отмена без списания — за 3 часа до начала; поздняя отмена по пакету списывает занятие

  • Абонементы: разовое, пакет, безлимиты и год — выбор даты старта и способа оплаты

  • Заморозка в кабинете: дата, срок, причина — окончание сдвигается, записи на эти даты отменяются без списания, заморозку до начала можно отменить

  • ИИ-план на 4 недели по анкете: цель, опыт, частота, ограничения (спина, колени, плечи, давление) и удобное время — из реальных занятий, с разгрузочной неделей и объяснением каждого пункта

  • Кабинет: записи и очередь, абонемент с таймлайном, посещения по неделям и баланс нагрузки, план с отметками выполнения

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

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

  1. Запишитесь на пробное

    В расписании выберите завтрашний день и нажмите «Записаться» — первое занятие бесплатно.

  2. Встаньте в очередь

    Купите «Безлимит на месяц», найдите полную группу и встаньте в лист ожидания. Нажмите «Кто-то отменил (демо)» — очередь сдвинется, а потом место перейдёт к вам.

  3. Соберите план

    В блоке «ИИ-план» отметьте цель, опыт и что беспокоит — например, спину — и нажмите «Собрать план». Посмотрите, чем объяснён каждый пункт.

  4. Войдите в кабинет

    Откройте «Кабинет» → «Войти как демо-клиент»: там история посещений, график по неделям и план с отметками.

  5. Заморозьте абонемент

    На вкладке «Абонемент» выберите дату и срок — окончание сдвинется, а записи на эти дни отменятся без списания.

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

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

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

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

  • Расписание, записи, абонементы и посещения — из CRM студии (1С:Фитнес, Mobifitness) по API
  • Лист ожидания — уведомление в Telegram или SMS, когда место освободилось, и автоматическая запись
  • Покупка абонемента — эквайринг с чеком по 54-ФЗ, СБП, рассрочка
  • Вход в кабинет — по номеру телефона и коду из SMS
  • ИИ-план — языковая модель (YandexGPT или GigaChat) с расписанием и противопоказаниями как инструментами; тренер видит план и может поправить

Стек

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

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

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

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

Для бизнеса

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

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

  • Расписание, очередь, правила отмены, заморозка и сборка плана — чистые функции с тестами; занятость групп детерминирована от даты и занятия, поэтому расписание не «прыгает» между перезагрузками.
  • План строится от цели и уровня: недельная нагрузка растёт, четвёртая неделя — разгрузочная, а занятия с противопоказаниями отсекаются до подбора, а не после.
  • Клиент, записи и абонемент живут в localStorage через useSyncExternalStore; вкладки кабинета открываются по ?tab= прямо из ссылок с главной.

Советы

  • Совет 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 · меню, бронь, доставка

    работает

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

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

    • Next.js
    • React
    • TypeScript

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

    работает

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

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

    • Next.js
    • React
    • TypeScript

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

    работает

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

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

    • Next.js
    • React
    • TypeScript