Демо магазина на Vue3

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

Видео-демка

Экосистема

• Vue CLI for installation
• Vue3 (SFC Components)
• Vuex for storage
• ESlint for linting
• SCSS for styling
• Git (without git-flow)

Вспомогательные зависимости

• uiid для уникальных id
• vuex-persist для удобного сохранения выборочных vuex-стейтов в localStorage

Функционал

Базовый

• рендеринг карточек
• удаление карточки
• добавление новой карточки из формы
• фильтрация карточек
• сохранение стейта в localStorage (via vuex-persist)

Валидация формы

Валидация основана на стандартном ValidityState API с кастомными ошибками и паттернами ввода на основе регулярных выражений

• название - обязательное поле
• ссылка на изображение товара - обязательное поле
• цена - обязательное поле
• кнопка добавления товара неактивна пока форма пуста или невалидна
• добавление маски разделения тысячных пробелом для поля цены

Анимации и UX

Анимации реализованы через Vue3 анимации и стандартные классы.

• анимация перехода состояний в форме
• анимация добавления товара в список
• анимация удаления товара
• анимация сортировки товара
• Добавление прелодера на странице для плавной инициализации списка
• попап состояния удачного добавления товара в форме

Верстка

Резиновая верстка по макету на scss с глобальными переменными и миксинами.
На разрешении < 1024px блок с формой (сайдбар) получает кнопку скрытия и по умолчанию скрыт. При раскрытии сайдбар "толкает" блок с карточками. На разрешении < 768px при раскрытии сайдбара блок с карточками уходит под сайдбар.

• hover-состояния
• active-состояния
• focused-состояния
• адаптив под мобильные

Требования

• Функционал
• Figma

Trello

• Trello-доска

Команды:

• git clone git@github.com:proehavshiy/vue3-store-app-test.git - clone branch
• npm install - install dependencies
• npm run serve - run the project in dev mode
• npm run build - build final version
• npm run lint - check linter errors
• sh deploy.sh - deploy to gh-pages