Веб-приложение будет использоваться конечными пользователями для просмотра фильмов и сериалов с использованием веб-браузера. Предлагаем реализовать концепт страницы поиска. Эта страница показывает пользователю список рекомендованных фильмов и сериалов, а также позволяет искать медиа-контент по названию.
C макетом страницы, подготовленным дизайнером, можно ознакомиться в Figma или в mock/search_page.png. В /api/ находятся файлы, которые имитируют ответы бэкенда.
Единственный метод, который доступен - GET api/discover. В ответе перечислены фоновые изображения, которые необходимо ротировать с интервалом 5 секунд - backgrounds. Также в ответе перечислены рекомендуемые сериалы (items).
- старайтесь реализовать дизайн приложения как можно ближе к макету, делайте анимации плавными
- старайтесь сделать приложение интуитивно понятным для пользователя (например при очистке результатов поиска сразу отображайте общий список контента, реализуйте прокрутку привычными пользователю способами, например с помощью клавиатуры или жестов тачпада, и т.д.)
- пусть все пункты в верхнем меню ведут на страницу поиска
- сделайте ротацию фоновых картинок с интервалом в 5 секунд с кроссфейдом
- в списке рекомендуемых сериалов при наведении курсора мыши заменяйте постер ключевым кадром (
keyframe) - при поиске сужайте список рекомендуемых сериалов, не учитывайте регистр при поиcке по названию
- для имитации работы с реальным бэкендом, после нажатия кнопки "Search" добавьте задержку в 0-1000 мс, прежде чем обновлять список рекомендаций
- проверяйте работоспособность приложения как в development, так и в production режиме
- используйте пакеты из шаблона (typescript, react 18, vite)
- не изменяйте расположение и содержимое директории api, в приложении она должна быть доступна по URL /api/
- поддерживайте код в чистоте: не оставляйте в проекте неиспользуемые пакеты, файлы, импорты, переменные, стили, закомментированные участки кода и прочий мусор
- при сборке и работе проекта не должно возникать ошибок или предупреждений, подавлять ошибки и предупреждения так же не следует
- исходный код приложения опубликуйте в отдельном открытом репозитории на github, в сообщениях к коммитам описывайте вносимые изменения
В рамках тестового задания достаточно реализовать версию для desktop и не заморачиваться с адаптивным лейаутом. Но если получится сделать, чтобы приложение выглядело хорошо также и с мобильных устройств, это будет плюсом.