jacques-fresco / cabi.net

Корпоративный сайт аренды коммерческих помещений. Разработан с использованием корпоративной библиотеки cabinet_ui_kit. Адаптивно-отзывчивая верстка по макету. Авторизация. Личный кабинет.

CABI.NET

Корпоративный сайт аренды коммерческих помещений коворкинга, сверстанный по макету дизайнера. Разработан с использованием библиотеки 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.

Сервер

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