Hotels Searcher App built with Vue3

by Vue.js Examples

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

GitHub

View Github