Данное приложение разработано в рамках выполнения профильного задания - Фронтенд-разработчик на стажировку в VK
https://movie-explorer-hub.netlify.app
Интерфейс API Кинопоиска эмулирован с использованием MSW.
npm install
npm run devОткройте http://localhost:5173, чтобы посмотреть результат в браузере.
$ npm run build
$ npm run previewФронтенд написан на React + TypeScript со сборщиком Vite
| Пакеты | Назначение |
|---|---|
| MUI | Библиотека компонентов для создания интерфейсов на Material Design System от Google |
| React-router | Библиотека для переключения и маршрутизации страниц. |
| Axios | HTTP-клиент. |
| MSW | Библиотека для имитации API, которая позволяет создавать мок, перехватывая запросы на сетевом уровне. |
Создание приложения для просмотра информации о фильмах с использованием React, TypeScript и открытого API (например, Кинопоиск API (https://kinopoisk.dev/)).
- Отображение списка фильмов:
- Приложение должно отображать список фильмов, получаемых с помощью API.
- Отображать фильмы постранично по 50 фильмов на страницу.
- Для каждого фильма необходимо отобразить:
- Постер фильма (если доступен).
- Название фильма.
- Год выпуска.
- Рейтинг фильма.
- Должна быть возможность фильтровать список фильмов:
- По жанру (выбор нескольких жанров).
- По рейтингу (диапазон рейтинга).
- По году выпуска (диапазон лет начиная с 1990).
- Просмотр детальной информации о фильме:
- При клике на фильм из списка или результатов поиска, приложение должно переходить на страницу с детальной информацией об этом фильме.
- На странице фильма необходимо отобразить:
- Постер фильма (если доступен).
- Название фильма.
- Описание фильма.
- Рейтинг фильма.
- Дату выхода.
- Список жанров.
- Использовать React, TypeScript.
- Рекомендуется использовать хуки и функциональные компоненты React.
- Разрешается использовать сторонние библиотеки (Axios, MobX, React Router) и при необходимости библиотеку компонентов Material UI.