Корпоративный сайт аренды коммерческих помещений коворкинга, сверстанный по макету дизайнера. Разработан с использованием библиотеки React компонентов и корпоративных стилей cabinet_ui_kit, размещенной в отдельном репозитории, ознакомиться с которой можно в Storybook.
- HTML, CSS React + Vite
- react-router-dom
- typescript
- framer-motion
- axios
Для анимирования элементов сайта были использованы базовые возможности CSS, и бибилиотека framer-motion. Viewport анимация, Layout, AnimatePresence, motion теги с вариантами, хуки useAnimate и useScroll для создания кастомных хуков анимации. Бесконечный слайдер создан при помощи библиотеки framer-motion и кастомного хука для бесконечной пагинации.
По макетам дизайнера для ширины экрана 1920px и 320px была выполнена адаптивно-отзывчивая верстка главной страницы корпоративного сайта. Страницы регистрации, восстановления пароля и личный кабинет показаны условно на отдельный Route'ах.
Для обработки ошибок в приложении на самом верхнем уровне использована библотека react-error-boundary с FallbackComponent'ом, на отдельно взятых Route'ах errorElement'ы с хуком useRouteError библиотеки react-router-dom. Об ошибках при отправке данных через формы или проблемах с авторизацией пользователь получается сообщения во всплывающем модальном окне.
Для показа форм подачи заявок на аренду и формы авторизации использовано модальное окно, реализованное через ContextProvider и React Portal.
Валидация текстовых полей форм и вывод сообщений об ошибках производится при помощи кастомных хуков с минимальным набором проверок на обязательность заполнения, длину или соответствие регулярным выражениям (формат email, tel).
Авторизация реализована при помощи ContextProvider и кастомных хуков для отслеживания состояния запросов. В приложении использованы четыре Route'а - главная страница, регистрация, восстановление пароля и личный кабинет. Route личного кабинета является приватным, и его приватность обеспечена компонентом AuthRequired оберткой основного компонента, которая выполняет переадресацию на главную страницу при отсутствии данных для авторизации. При запуске приложения производится проверка на наличие сохраненных в localStorage данных пользователя, содержащих в том числе token авторизации, который отправляется на сервер для проверки. Вход в личный кабинет возможен через кнопку на панели навигации или через кнопку бронирования в слайдере с выбором помещений. В форме входа реализована возможность управления сохранением данных пользователя в localStorage в случае успешной авторизации. В авторизованном состоянии повторный запрос при входе в личный кабинет не выполняется, сразу происходит переход на приватный Route.
Серверная часть приложения показана условно с помощью асинхронных функций с задержкой времени, имитирующих реальное ожидание ответов сервера. Предусмотрено динамическое обновление данных о доступных помещениях с сервера при обновлении страницы с индикацией их загрузки в слайдере и на карте расположения. Состояние ожидания запросов отправки данных форм обрабатывается, пользователь видит соответствующую анимацию на элементах кнопок.