Поисковик отелей через 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

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

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

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

• ТЗ
• Figma

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