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

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

Есть минималистичный дизайн — он простой, но аккуратный. Шрифт — 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. Не используй готовые библиотеки для роутинга (react-router и т.п.). Не трать много времени на сборку — мы не будем её оценивать.
• Поддерживаемые браузеры — свежий Google Chrome.
• По ширине виджет должен тянуться от 480px до 1280px (в дизайнах показаны 480px).
• Данные нужно запрашивать. Например, через fetch. Можно прямо отсюда.
• В табах должны быть счётчики, показывающие количество элементов в этом статусе до фильтрации по тегам.
• Текущий таб и выбранные фильтры должны попадать в 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. Хочется, чтобы даже при таком количестве книг приложение тормозило как можно меньше.

На вакансию джуна/стажёра

Делать все пункты не обязательно. Бери не количеством, а качеством. Сделай в первую очередь то, что лучше всего знаешь и в чём уверен. Приступай к последнему заданию со звёздочкой только если справился со всем остальным.

Не делай тестовое круглые сутки, а выдели разумное и комфортное для себя время. Недостающие пункты мы можем обсудить на собеседовании. Напиши нам свои мысли об этих пунктах.

На вакансию миддла/сеньора

Мы ожидаем, что ты справишься со всеми пунктами задания.