Задание

Необходимо реализовать страницу вывода списка товаров, и возможностью добавления/удаления товаров в списке. Ссылка на макет

Требование к стеку и исполнению

• Верстка должна совпадать с макетами.
• Проект должен быть выполнен с использованием Vue3
• Для реализации допустимо использование сборщика.
• При выполнении работы не разрешается использовать никакие UI библиотеки.
• В секции template не разрешается использовать HTML препроцессоры.
• Секция style должна быть написана с использованием css-modules или scoped, будет плюсом использование препроцессора.
• Проект должен храниться у вас в личном репозитории GitHub/GitLab/Bitbucket, в котором должно быть описание запуска проекта на локальной машине
• Залить на любой бесплатный хостинг

Плюсом будет

• Грамотное использование SCSS препроцессора.
• Использование линтеров.
• Разработка задания в разных ветках по системе git-flow.

Уровень 1

• Использование системы контроля версий.
• Настройка сборки проекта.
• Использование Vue фреймворка.
• Использование CSS препроцессора.
• Верстка задания согласно макету.

Плюсом будет

• Стилизация состояний взаимодействий (hover, active, focused) с элементами на свое усмотрение.
• Верстка адаптивной версии под мобильные устройства.

Уровень 2

• Добавить валидацию для формы добавления товара.
• Название - обязательное поле.
• Ссылка на изображение товара - обязательное поле.
• Цена - обязательное поле.
• Кнопка добавления товара неактивна пока форма пуста или невалидна.
• Добавление маски разделения тысячных пробелом для поля цены.
• Разработка функционала добавления товара в общий список из формы.

Плюсом будет

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

Уровень 3

• Добавление функционала удаления товара из списка.
• Разработка функционала сохранения списка товаров при перезагрузке страницы.
• Разработка функционала сортировки списка товаров по следующим параметрам:
• По цене min (от меньшего к большему).
• По цене max (от большего к меньшему).
• По наименованию.

Плюсом будет

• Использование Pinia
• Анимация удаления товара.
• Анимация сортировки товара.
• Добавление прелодера на странице для плавной инициализации списка
• Любое добавление функционала: пагинация, фильтрация, переход на страницу товара, использование https://github.com/typicode/json-server и тд