Задачей проекта была разработка интерактивного React-компонента для виджета бронирования, предназначенного для встраивания на сайты студий и сервисов с почасовой арендой.
Виджет должен был позволять пользователю выбирать один или несколько временных слотов на неделю, видеть актуальные цены, рассчитывать итоговую стоимость аренды с учётом промокодов и режима предоплаты. Важным требованием была высокая отзывчивость интерфейса, корректная работа бизнес-логики и удобство использования как на десктопе, так и на мобильных устройствах.
Я разработал интерактивный React-компонент с продуманной бизнес-логикой и асинхронным взаимодействием с сервером. При выборе свободного временного слота выполняется асинхронный запрос, после чего отображается актуальная цена и автоматически пересчитывается общая сумма.
Реализована логика добавления и удаления слотов, ограничения выбора (например, выбор промежуточного слота автоматически сбрасывает остальные), переключение режимов предоплаты (50% / 100%) и проверка промокодов. Все изменения мгновенно отражаются в итоговой стоимости без перезагрузки страницы.
Интерфейс адаптирован под мобильные устройства, выверен по сетке и реализован с точным соответствием макету. Для повышения отзывчивости и стабильности интерфейса были устранены лишние задержки и оптимизирована работа с состояниями и событиями.
В результате получился полностью готовый React-виджет бронирования, который можно встраивать в сайты студий и сервисов с почасовой арендой. Компонент обеспечивает удобный пользовательский опыт, корректно обрабатывает сложные сценарии выбора и расчёта стоимости и может быть легко доработан или интегрирован с реальным backend-API.
Проект демонстрирует работу с React-компонентами, асинхронной логикой, состояниями и вниманием к деталям интерфейса.
Пожаловаться
