/movie-explorer

Элитное приложение для получения эксклюзивной информации о фильмах

Primary LanguageTypeScript

Элитное приложение для получения эксклюзивной информации о фильмах

Данное приложение разработано в рамках выполнения профильного задания - Фронтенд-разработчик на стажировку в 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.