Разработать фронтенд приложения для быстрого поиска информации по фильмам и сериалам с платформы «Кинопоиска».
- Тестовое необходимо реализовать с использованием API Кинопоиска. Токен для доступа API предоставлен отдельно в письме с почты interships@avito.ru.
- Важно: при работе над тестовым, убедитесь, что токен не расположен в вашем GitHub публично
- Результат тестового должен соответствовать требованиям описанным ниже.
- В пунктах «Будет плюсом» обозначены требования, выполнять которые не обязательно, но даже частичное выполнение этих пунктов позволит лучше раскрыть ваши знания и навыки.
Приложение должно состоять из двух страниц:
- Страница со списком всех фильмов
- Страница отдельного фильма
- Отображается список фильмов и сериалов
- Реализована пагинация
- Можно выбрать количество фильмов для показа на странице (по умолчанию должно быть 10)
- Можно отфильтровать выдачу (по году, стране и возрастному рейтингу)
- Реализован поиск по названию фильма
- Можно перейти на страницу фильма из выдачи
- Если реализована возможность поделиться результатами выдачи с другими пользователями через копирование ссылки. (Подсказка: для этого можно записывать в query-параметры фильтры и пагинацию)
- Если сохраняется история поиска (например, последние 20 запросов)
- Если при вводе нового названия появляется suggest с предложениями из ранее введенных значений
- Если при вводе значений происходит фильтрация подсказок по вхождению. Например, при вводе «бой»: могут быть предложены результаты, содержащие «бой»: «прибой», «бойкий», «бесперебойность» и т.д. (Ориентир: поиск в Google, который предлагает варианты из предыдущих запросов)
- Если поиск осуществляется не при каждом вводе символа, а в момент когда с ввода последнего символа прошла 1 секунда (debounce)
- Отображается информация о фильме или сериале, в том числе:
- название фильма/сериала
- описание
- рейтинг
- список актёров (с пагинацией, если их больше 10);
- список сезонов и серий (с пагинацией, если они подразумеваются))
- отзывы пользователей (с пагинацией)
- постеры, отображение которых реализовано в виде «карусели»
- Реализован вывод списка фильмов, похожих на текущий, в виде «карусели». По каждому элементу можно кликнуть и открыть его страницу
- В случае, если какой-то из списков пустой (список отзывов, актёров, сезонов), реализовано отображение заглушки на подобие «нет информации о ...»
- Реализована кнопка «назад», которая ведет на выдачу. Фильтры и номер страницы при этом должны сохраняться.
- Если будет реализована авторизация. Проверку пароля можно захардкодить
- Если будет реализована страница c поиском рандомного фильма как тут: референс. При этом на этой странице будет реализована следующая функциональность:
- страница с рандомным поиском будет доступна только авторизованным пользователям
- есть возможность установить фильтры: по жанру, по стране производства, по типу контента (сериал/фильм), по году выпуска, по рейтингу Кинопоиска (от конкретного значения), по сети производства (HBO, Netflix и т.п.)
- есть кнопка «Случайный фильм», которая перекидывает на страницу найденного фильма
- Стек технологий:
- фронтенд фреймворк: React, версия 18
- можно использовать любую общедоступную библиотеку компонент. Примеры: ant.design, mantine, react-bootstrap
- сборщик: Webpack
- Node.js: 18 или выше
- пакетный менеджер: npm
- Запуск проекта в режиме разработчика должен происходить по команде
TOKEN=<your api token> npm run start
; проект должен быть доступен по ссылке http://localhost:7070 - Реализован адаптивный интерфейс: с приложением должно быть удобно работать, как с мобильного экрана, так и с десктопа
- Роутинг выполнен с использованием React Router v6
- При переходах по ссылкам страница не перезагружается (SPA, без next.js)
Напомним, важно: при работе над тестовым, убедитесь, что токен не расположен в вашем GitHub публично
Будет плюсом:
- Использование TypeScript
- Наличие docker-файла для запуска
- Реализация возможности выполнения трёх попыток повторного запроса, если запрос был неудачным
- Если при переходе со страницы на страницу, запросы, относящиеся к старой странице, прерываются (отменяются/прекращаются)
- Покрытие кода юнит-тестами
Если у вас возникнут вопросы по заданию, ответы на которые вы не найдете в описанных требованиях, то вы вольны принимать решения самостоятельно.
В таком случае приложите к проекту README-файл, в котором будет список вопросов/проблем, с которыми вы столкнулись, и поясните как вы их решили и почему именно таким образом.
Необходимо предоставить публичный git-репозиторий на любом публичном хосте (GitHub / GitLab / etc), содержащий в master/main ветке:
- Код сервиса
- Описанная в README.md инструкция по запуску
- Описанные в README.md вопросы/проблемы, с которыми столкнулись, и ваша логика их решений (если требуется)