Frontend engineer test task

Привет 👋

Есть макет

Тебе говорят, что нужно сделать рабочий фронт, однако backend еще не готов, так что вот пока файл с коллекцией mock-данных в том же формате, что будет возвращать backend в будущем

Технологию выбирай удобную для себя. У нас используется Ember.js, будет супер-клево если получится разобраться и сделать на нем. Заодно поймешь, нравится или нет 🙂

В коллекции 6 типов объектов:

const ASSET_TYPES = {
  TEMPLATE: 0,
  IMAGE: 1,
  VIDEO: 2,
  PDF: 3,
  GIF: 4,
  ARTICLE: 5,
};

Каждый объект может содержать следующие типы аттрибутов,

обязательные:

id: number,
type: number,
title: string,
used-total-count: number,
created-at: number,

и необязательные

description?: string,
tags?: string[],
preview-image?: string,
external-link?: { 
  href: string, 
  title?: string 
},
original-file-src?: string,

Твои задачи:

1. Верстка, верстка, верстка. Качественная. Последние браузеры. Можно использовать все что хочешь, кроме библиотек готовых компонентов (bootstrap etc). + базовое адаптивное поведение от тебя.
2. Левый бар должен применять фильтры по типам объектов.
3. По дефолту сортировка должна быть по аттрибуту used-total-count в порядке убывания.
4. Нужно вывести не более чем 50 объектов, попадающих под условия фильтрации и в соответствующем сортировке порядке.
5. При клике на иконку bookmark объект должен помечаться как сохраненный, иконка должна меняться на зеленую. Достаточно хранить это состояние до обновления страницы.

=>

6. Если список тегов не помещается в одну строку - появляется тег с текстом "+ n", открывающий список остальных тегов:

7. Действие кнопки use на карточке должно быть контроллируемым снаружи нашего модуля с фильтрами и списком (например из родительского компонента, в который этот модуль вставляется)

Дополнительно (если основые задачи показались легкими):

8*) если в url будет указан get-параметр sort-by=created-at - сортировать по аттрибуту created-at в порядке убывания

9*) Все сделать на Ember.js. Это технология, которая используется у нас, и нам важно найти человека, который быстро и самостоятелльно сможет разбираться с новыми штуками.

Пояснения

Аттрибут external-link содержится только в объектах типа ARTICLE, в дизайне это футер с ссылкой:

Аттрибут original-file-src содержится только в объектах типа PDF, это ссылка которая открывается в новом окне, когда пользователь нажимает на кнопку download. Кнопки use у PDF нет:

Удачи! 💪

Если будут возникать вопросы - пиши vitaliy@promorepublic.com, mike@promorepublic.com ✨