Hotels searher app

Поисковик отелей через Travelpayouts API

Посмотреть деплой

Экосистема

• JS ES6
• React SPA, react-router-dom v6
• redux, react-redux, redux-toolkit, Saga, redux-persist, LocalStorage - стейт-менеджмент и кеширование данных
• formik - валидация полей
• react-datepicker - кастомный дейтпикер для выбора дат
• date-fns - локализация дейтпикера
• swiper - свайпер картинок
• uniqid - для уникальных айди
• sass, classnames - стили: переменные, миксины, вложенность и переиспользование стилей
• ESlint - линтинг
• Vercel - деплой

Какие задачи сделал:

• Вход по логину-паролю с валидацией полей
• Кеширование состояния пользователя в localstorage
• Получение отелей по API из формы (город, дата, дни)
• Отрисовка списков найденных / избранных отелей
• Сохранение в избранное / удаление отелей
• Сортировка по цене, по рейтингу избранных отелей
• Анимации блоков с меняющейся шириной
• UI-состояния: hover, active, disabled и т.д.
• Адаптивная верстка с flex
• Кастомные utils для работы с датами и склонениями слов
• Кастомный хук для получения размеров доступного экрана

Подробнее:

Роутинг

• 3 страницы: Login, Hotels, ErrorPage
• Hotels - protected route: lдоступ только после логина

Формы

• Валидация формы логина через Formik
• Логин - любая почта
• Пароль - без кириллицы, минимум 8 символов
• Кнопка submit: disabled, если поля невалидны
• Кастомный datepicker

Redux Store

• Разбит на логические слайсы
• Асинхронные запросы к API через saga
• Стейт логина кешируется в LocalStorage

Обработка асинхронных состояний запросов к серверу

• Состояние до запроса - выводом полей "нет данных" в блоки
• Состояние ожидания - через попап и спиннер
• Состояние ошибки - через попап с выводом ошибки

Верстка

• Адаптивная верстка 320px => 1440px
• Резиновые размеры шрифтов
• Раскрытие блоков по кнопке на планшетных и мобильных разрешениях
• Состояния hover и active у UI-компонентов
• Анимации блоков с изменяющейся шириной (блоки "избранное" и "найденные отели")
• Блоки с ограничениями по высоте и скроллбарами

Reference

• ТЗ
• Figma

Команды:

• clone branch with git@github.com:proehavshiy/google-books-searcher.git
• npm run build - build final version
• npm run start - start dev mode