Skip to content

proehavshiy/hotel-searcher-app-vue

Repository files navigation

Hotels searher app

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


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



Экосистема

  • JS ES6
  • Vue3 CLI, Vue Router
  • Vuex, vuex-persist, LocalStorage - стейт-менеджмент и кеширование данных
  • vuelidate - валидация полей
  • vue-datepicker - кастомный дейтпикер для выбора дат
  • swiper - свайпер картинок
  • uniqid - для уникальных айди
  • sass, scoped - стили: переменные, миксины, вложенность и переиспользование стилей
  • ESlint - линтинг
  • Vercel - деплой

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

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

Подробнее:

Роутинг

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

Формы

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

Redux Store

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

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

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

Верстка

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

Reference

Команды:

  • clone branch with git@github.com:proehavshiy/hotel-searcher-app-vue.git
  • npm run build - build final version
  • npm run serve - start dev mode
  • npm run lint - lints and fixes files