Skip to content

Hotels Searcher with React/Router/Redux/Saga/Formik/Datepicker/CSS Modules

Notifications You must be signed in to change notification settings

proehavshiy/hotels-searcer-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Команды:

  • clone branch with [email protected]:proehavshiy/google-books-searcher.git
  • npm run build - build final version
  • npm run start - start dev mode