Тестовое задание для разработчика интерфейсов

Для внутреннего портала нужно сделать виджет списка книг, рекомендованных к чтению.

Есть минималистичный дизайн — он простой, но аккуратный. Шрифт — Roboto, цвета — #000 (текст), #999 (бордеры) и #ddd (фон тегов). Никакой другой информации кроме изображений ниже дизайнер нам не дал.

Книги делятся на три таба: «To read», «In progress», «Done». Изначально все книги в «To read», но пользователь может их перемещать.

Из статуса «To read» книгу можно перевести в «In progress» кнопкой start reading →, расположенной справа от названия.

Из статуса «In progress» можно перевести в «Done» кнопкой finish reading →.

Из статуса «Done» можно перевести в обратно в «To read» кнопкой return in «to read» ↲.

Дизайн пустого списка:

Клики по тегам включают фильтрацию по ним. Обрати внимание, счётчик в табе показывает количество книг до фильтрации, а не после:

Книги хранятся в JSON — см. в папку /data/. Все поля обязательные.

{
  "items": [{
    "id": "uniq id",
    "author": "Author",
    "title": "Title",
    "description": "Description",
    "tags": [
      "one",
      "another"
    ]
  }]
}

Требования

Обязательно используй React.
Поддерживаемые браузеры — свежий Google Chrome (десктопный и мобильный).
По ширине виджет должен тянуться от 480px до 1280px (в дизайнах показаны 480px).
Храни исходные данные так, чтобы их было просто заменить на другие.
В табах должны быть счётчики, показывающие количество элементов в этом статусе до фильтрации по тегам.
Текущий таб и выбранные фильтры должны попадать в URL и в историю, примеры URL:
- /
- /?tab=inprogress
- /?tab=done
- /?tags=js,css
- /?tab=done&tags=js,css
Приложение должно открываться в состоянии, указанном в URL — /?tab=done&tags=js откроет таб «Done» с фильтром по тегу «js».
Между перезагрузками страницы должны сохраняться статусы книг — если перевести книгу в «Done», закрыть страницу и открыть снова, книга всё ещё будет в «Done». Но в URL статусы книг попадать не должны.
Книг может быть очень много. Мы сгенерировали 30000 книг — 30000-items.json. Хочется, чтобы даже при таком количестве книг приложение не тормозило.
Если есть вопросы по дизайну, делай как считаешь нужным.

Не трать больше четырёх часов на код — просто сделай в первую очередь те пункты, в которых ты силён. А по остальным пунктам можешь просто написать свои мысли, обсудим их на собеседовании.

alexHlebnikov/test-task

Тестовое задание для разработчика интерфейсов

Требования