https://github.com/gkshi/frontend_testovoe_vue

https://github.com/gkshi/frontend_testovoe_vue

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/gkshi/frontend_testovoe_vue
• Owner: gkshi
• Created: 2020-01-14T02:17:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-04T12:15:17.000Z (over 4 years ago)
• Last Synced: 2024-10-17T18:59:17.703Z (19 days ago)
• Homepage:
• Size: 23.4 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

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

 

![](https://cdn-images-1.medium.com/max/1200/1*-8AAdexfOAK9R-AIha_PBQ.png)

 

### Цель

Разработать SPA-приложение с использованием `Vue` + `Vuex` + `Vue router`.  

Приложение должно получать данные из API и выводить их в клиентскую часть.  

API: [https://dog.ceo/dog-api](https://dog.ceo/dog-api)  

Макет-пример: [https://www.figma.com/file/qikieeE86iZxUzdj4TpwJM/frontend_test](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](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, качество кода.

* Логика компонентов и приложения в целом. Всё должно работать, а количество багов минимальное.

 

 

![](https://media.giphy.com/media/pDgHg2Lcju3Ty/giphy.gif)