Для внутреннего портала нужно сделать виджет списка книг, рекомендованных к чтению.
Есть минималистичный дизайн — он простой, но аккуратный. Шрифт — 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. Хочется, чтобы даже при таком количестве книг приложение не тормозило.
- Если есть вопросы по дизайну, делай как считаешь нужным.
Не трать больше четырёх часов на код — просто сделай в первую очередь те пункты, в которых ты силён. А по остальным пунктам можешь просто написать свои мысли, обсудим их на собеседовании.