Реализовать приложение «Каталог фильмов», который состоит из:
- отображения списка фильмов,
- поиска по названию,
- просмотра карточки фильма.
Для реализации можно использовать любой фреймворк и библиотеки. Дизайн на собственное усмотрение.
Требования:
- Адаптивная верстка
- Соблюдение семантики
- Использование какой-либо методологии CSS будет плюсом
- Загрузка данных о фильмах с сервера (можно использовать что-нибудь вроде json-server) с обработкой ошибок
- Используйте средства оптимизации по максимуму
- Анимации приветствуются
А так же ответы на вопросы:
- Vite
- React
- Axios
- Tanstack query
- React router
- Tanstack virtual
По ТЗ у нас HighLoad проект (только для него нужны максимальные оптимизации).
-
Поиск:
- Фильмов могут быть сотни тысяч, поэтому реализован серверный поиск по
titleс возможностью поиска по подстроке и без учета регистра. (Если на реальном проекте нельзя это реализовать, то можно использоватьWeb Workersдля вычислений в фоновом потоке.) - Вместо хранения строки поиска в глобальном
stateили в контексте, используютсяURL-параметры. Результатами поиска можно будет поделиться.
- Фильмов могут быть сотни тысяч, поэтому реализован серверный поиск по
-
Отображение списка фильмов:
- При нажатии на карточку появляется модальное окно для просмотра подробностей о фильме. Реализовано с помощью
<dialog>(Baseline Widely available) иcreatePortal, встраивается в<div id="modal-root">в<body>. - Виртуализация списка с
Infinity Scrollи автоматическое перестраивание сетки с помощьюResizeObserver API. Как альтернатива - можно без виртуализации реализоватьInfinite Scrollс помощьюIntersectionObserver API, но это будет хуже дляHighLoadпроекта - будет забиваться память. Классическую пагинацию в UI я решила не использовать, чтобы не заставлять пользователя совершать лишние действия.
- При нажатии на карточку появляется модальное окно для просмотра подробностей о фильме. Реализовано с помощью
-
Обработка ошибок:
- Добавлена страница
Not Foundдля 404 ошибки. Fallbackдля изображений.- Отмена старого запроса при появлении нового. И обработка сетевых ошибок.
- Общие типы вынесены в
@packages/sharedдля использования их и беком, и фронтом.
- Добавлена страница
-
Оптимизации дополнительные:
middlewares.jsдля отправления только необходимых данных. Снижает потребление памяти (в моем случае - в 2 раза). Как альтернатива - можно заранее подготовить данные для каждого типа запроса.
- Скелетоны
- Error Boundaries
- Клонирование репозитория
git clone https://github.com/Imbirel/test-task-movie-catalog.git- Установка пакетов.
pmpm install- Запуск сразу и сервера и приложения из корня.
pnpm dev