Star-Wars-Characters

Test Assignment

Создание приложения для просмотра информации о звездных войнах

Общие сведения

Используя Star Wars API необходимо создать небольшое приложение с информационными карточками персонажей.

Примерный макет приложения.

Приложение должно содержать 3 страницы:

• Главная: страница содержит приветствие пользователя, навигационное меню (активная в данный момент страница в меню должна быть подсвечена), кнопку перехода к странице с карточками персонажей.
• Страница с карточками о персонажах.
• Страница с ошибкой 404.

Сраница с карточками о персонажах

Навигационное меню должно быть доступно как на главной странице, так и на странице с карточками.

Заголовок страницы должен содержать общее количество персонажей.

Фильтр по персонажам:

• Реализовать выпадающий список значений любого атрибута из карточки о персонаже. Список значений должен содержать дополнительное значение all для выбора всех персонажей. При выборе значения all должен отображаться весь ранее полученный набор данных на странице.
• Реализовать фильтрацию по выбранному из списка значению. Фильтрация должна осуществляться локально (на фронте) среди ранее полученного от АПИ набора данных. Дополнительных запросов к АПИ при фильтрации персонажей осуществляться не должно.

Пагинация: Реализовать пагинацию или бесконечную подгрузку карточек на страницу.

Карточки персонажей:

• Карточка содержит имя и общую информацию о персонаже.
• Карточка должна быть кликабельна. При клике на карточку должно открываться модальное окно с подробной информацией о персонаже.
• На представленном макете в карточке персонажа присутствуют цветные тэги. Голубой с датой рождения. Желтый, зеленый и фиолетовый с гендерным признаком. При отсутствии какой-либо информации тэг в карточке отображаться не должен.
• В модальном окне с подробной информацией необходимо выводить иконку в соответствии с полем gender выбранного персонажа.

Общие требования:

• При загрузке данных с сервера отображать на странице загрузчик (загрузчик может быть любой на усмотрение разработчика).
• Компонент карточки должен быть протестирован.
• Полноценный адаптив делать не требуется, но страницы должны выглядеть адекватно на широких и узких экранах.

Дополнительное задание (* со звездочкой):

• Реализовать фиксированную кнопку перевода на язык wookiee и обратно (кнопка перевода).
• При нажатии на кнопку переводить страницу на язык wookiee и обратно на английский. Например, текущий заголовок страницы "60 Peoples for you to choose your favorite" на языке wookie может иметь следующий вид "60 rcwochuanaoc".
• Отображать на странице информацию о текущем языке.