Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gkshi/frontend_testovoe_vue
https://github.com/gkshi/frontend_testovoe_vue
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/gkshi/frontend_testovoe_vue
- Owner: gkshi
- Created: 2020-01-14T02:17:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-04T12:15:17.000Z (over 4 years ago)
- Last Synced: 2024-12-22T03:17:12.292Z (2 months 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)"
### Цель
Разработать 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, качество кода.
* Логика компонентов и приложения в целом. Всё должно работать, а количество багов минимальное.
