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

• ТЗ
• Figma

Команды:

• 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