Задача
Сети коворкингов нужен был сайт, на котором клиент сам находит подходящее помещение и бронирует его без звонков и переписки с администратором. В работе: каталог из 16 пространств в трёх локациях, выбор даты и времени, расчёт стоимости и личный кабинет с бронями.
Что сделал
- Собрал сайт как единое приложение: главная, каталог, бронирование и «Мои брони» переключаются мгновенно, без перезагрузки страницы
- Сделал календарь на 90 дней вперёд. У каждого дня сразу видно, много ли свободных часов, а внутри дня — сетка по часам, где нужный диапазон выбирается двумя кликами
- Заложил в календарь все ограничения площадки: прошедшее время, часы работы и минимальную длительность аренды. Занять недоступный час просто нельзя — подсказки не нужны
- Написал модель загруженности, которая учитывает популярность помещения, время суток и день недели. Картина остаётся стабильной: после обновления страницы цифры не скачут
- Сделал смету, которая пересчитывается на каждое действие: почасовой тариф с переходом на дневной от восьми часов, скидка 10 % от четырёх часов, дополнительные услуги, промокоды, НДС и предоплата 30 %
- Развёл бронирование на четыре понятных шага с проверкой контактов и маской телефона. Перед подтверждением занятость проверяется ещё раз, поэтому забронировать один и тот же час дважды не получится
- Собрал личный кабинет: предстоящие, прошедшие и отменённые брони, бесплатная отмена за сутки, повтор прошлой брони и добавление события в календарь одной кнопкой
- Настроил фильтры каталога так, что выбранные условия попадают в адрес страницы — подборку можно сохранить в закладки или переслать коллеге
- Закрыл доступность и адаптив: полная работа с клавиатуры, корректное озвучивание календаря экранными читалками, аккуратная вёрстка от телефона до широкого монитора, светлая и тёмная темы
Результат
- Путь от каталога до подтверждённой брони — четыре шага, без звонка администратору и бумажного договора
- 16 помещений в трёх локациях, пять форматов аренды, около 6 900 строк кода
- Стоимость видна до подтверждения: клиент заранее знает сумму, скидку и размер предоплаты