Skip to content

1-bn8bbym0inyfdelyyv.md

Latest commit

 

History

History
63 lines (50 loc) · 4.19 KB

1-bn8bbym0inyfdelyyv.md

File metadata and controls

63 lines (50 loc) · 4.19 KB
Raw

Тестовое задание на позицию «Frontend разработчик Nuxt.js»

Средствами Vue.js реализуйте небольшое SPA приложение, которое состоит из 3 страниц: «Избранное», «Склад», «Сделки». Ссылка на макет: https://www.figma.com/file/esSprOWWWjJ1Gb7IoMHGmq/Untitled?node-id=0%3A1

Срок выполнения задания: 7 дней Готовое задание выложить на GitHub или GitLab, и опционально залить на vercel или другой удобный хостинг. Описание страниц: Приложение запускается со страницы «Склад». На которой можно выполнить следующие действия:

  • Сортировка по типам предложений (Все, Аукцион, Прямые продажи);
  • Поиск по наименованию;
  • Добавить в сделки;
  • Добавить в избранное;

На странице «Сделки» выполняются следующие действия: - Сортировка по типам предложений (Все, Аукцион, Прямые продажи);

  • Оплатить;
  • Добавить в избранное;

На странице «Избранное» выполняются следующие действия: - Сортировка по типам предложений (Все, Аукцион, Прямые продажи);

  • Оплатить;
  • Добавить в сделки; Описание карточки предложения:

Карточки предложений включают в себя следующие пункты:

  • Изображение товара;
  • Тип Предложения: аукцион или разовое предложение( относится к прямым продажам);
  • Название товара;
  • Город (в котором находится товар);
  • Продавец (название компании);
  • Вид товар;
  • Описание товара;
  • Цена товара;
  • Количество товара;

Задачи:

  1. Создать компонент «Карточка предложения» (Включает фейковые данные из JSON’a, предложений должно быть не меньше 10 штук);
  2. Отобразить карточки предложений в разделе «Склад»;
  3. Сортировка предложений (все, аукцион, прямые продажи);
  4. Поиск в складе по названию товара;
  5. Кнопка «Добавить в сделки» (по клику карточка добавляется в раздел «Сделки»);
  6. Кнопка добавления предложения в избранное (по клику предложение добавляется в раздел «Избранное»);
  7. Кнопка «Оплатить» в разделе «Сделки»;
  8. Кнопка «Оплачено» в разделе «Сделки» (состояние disabled, после клика на кнопку «Оплатить»);

Требования к функционалу:

  • Все действия на сайте должны происходить без перезагрузки страницы;
  • В качестве сборщика используйте Webpack, если это необходимо; Технические требования:
  • Использование следующего стека технологий: Vue 3 (Composition Api) + TypeScript;
  • Nuxt 3 - опционально;
  • State менеджер - pinia, допустимо использование vuex
  • Приложение должно быть разбито на разумное количество Vue - компонентов;
  • Адаптивность приветствуется, но не обязательна;
  • Верстка без использования css-фреймворков