foxmalder/frontend_testovoe_vue

Тестовое задание

на позицию "Front-end developer (Middle/Senior, Vue.js)"

   

Цель

Разработать SPA-приложение с использованием Vue + Vuex + Vue router.
Приложение должно получать данные из API и выводить их в клиентскую часть.
API: https://dog.ceo/dog-api
Макет-пример: https://www.figma.com/file/qikieeE86iZxUzdj4TpwJM/frontend_test

 

Главная страница

• Отображает список изображений всех собак (по умолчанию в рандомном порядке).
• Сверху находится переключатель с рандомного порядка фото на алфавитный.
• По стандарту должно отображаться 20 изображений и реализован бесконечный скролл с подгрузкой следующих 20 изображений.

 

Страницы пород

В шапке располагается селект со списком всех доступных пород.
При выборе определенной породы происходит роутинг на app.ru/{breed}, например app.ru/husky.
При переходе по таким урлам должны загружаться изображения только выбранной породы.

 

Избранное

Каждое изображение можно лайкнуть (иконка сердца), после чего эти изображения можно будет увидеть на странице app.ru/favourites. Информация о лайкнутых фото должна находиться в хранилище браузера. При перезагрузке страницы лайкнутые фото не должны пропадать.

 

Общие требования

• Макет дан для примерного понимания интерфейса. Можно сверстать его, а можно на свой вкус.
• Верстка без использования css-фреймворков типа bootstrap, только чистый SCSS/SASS/LESS
• Проект создан с помощью Vue CLI с пресетом по умолчанию https://cli.vuejs.org/guide/creating-a-project.html
• Использование ESLint standart обязательно
• Вся логика работы с API находится во Vuex
• Допустимые к использованию библиотеки только vue, vuex, vue-router, axios
• Исходный код проекта должен быть выложен на GitHub
• Будет плюсом: верстка на Pug и SCSS, JS на синтаксисе ES6-ES10 (смотреть будем в последнем хроме)

 

На что будем смотреть

• Архитектура. Как разбиты компоненты, как организована работа с апи. Легко ли это будет масштабировать.
• Кодстайл, именование переменных и методов, чистота кода.
• Синтаксис, применение современных возможностей ES6-ES10, качество кода.
• Логика компонентов и приложения в целом. Всё должно работать, а количество багов минимальное.