Тестовое задание на позицию «Frontend разработчик Nuxt.js»
Средствами Vue.js реализуйте небольшое SPA приложение, которое состоит из 3 страниц: «Избранное», «Склад», «Сделки».
Ссылка на макет:
https://www.figma.com/file/esSprOWWWjJ1Gb7IoMHGmq/Untitled?node-id=0%3A1
Срок выполнения задания: 7 дней
Готовое задание выложить на GitHub или GitLab, и опционально залить на vercel или другой удобный хостинг.
Описание страниц:
Приложение запускается со страницы «Склад». На которой можно выполнить следующие действия:
Сортировка по типам предложений (Все, Аукцион, Прямые продажи);
Поиск по наименованию;
Добавить в сделки;
Добавить в избранное;
На странице «Сделки» выполняются следующие действия:
- Сортировка по типам предложений (Все, Аукцион, Прямые продажи);
Оплатить;
Добавить в избранное;
На странице «Избранное» выполняются следующие действия:
- Сортировка по типам предложений (Все, Аукцион, Прямые продажи);
Оплатить;
Добавить в сделки;
Описание карточки предложения:
Карточки предложений включают в себя следующие пункты:
Изображение товара;
Тип Предложения: аукцион или разовое предложение( относится к прямым продажам);
Название товара;
Город (в котором находится товар);
Продавец (название компании);
Вид товар;
Описание товара;
Цена товара;
Количество товара;
Задачи:
Создать компонент «Карточка предложения» (Включает фейковые данные из JSON’a, предложений должно быть не меньше 10 штук);
Отобразить карточки предложений в разделе «Склад»;
Сортировка предложений (все, аукцион, прямые продажи);
Поиск в складе по названию товара;
Кнопка «Добавить в сделки» (по клику карточка добавляется в раздел «Сделки»);
Кнопка добавления предложения в избранное (по клику предложение добавляется в раздел «Избранное»);
Кнопка «Оплатить» в разделе «Сделки»;
Кнопка «Оплачено» в разделе «Сделки» (состояние disabled, после клика на кнопку «Оплатить»);
Требования к функционалу:
Все действия на сайте должны происходить без перезагрузки страницы;
В качестве сборщика используйте Webpack, если это необходимо;
Технические требования:
Использование следующего стека технологий: Vue 3 (Composition Api) + TypeScript;
Nuxt 3 - опционально;
State менеджер - pinia, допустимо использование vuex
Приложение должно быть разбито на разумное количество Vue - компонентов;
Адаптивность приветствуется, но не обязательна;
Верстка без использования css-фреймворков
