Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/margo-yunanova/movie-explorer
Элитное приложение для получения эксклюзивной информации о фильмах
https://github.com/margo-yunanova/movie-explorer
axios kinopoisk msw mui react react-router typescript vkontakte
Last synced: 1 day ago
JSON representation
Элитное приложение для получения эксклюзивной информации о фильмах
- Host: GitHub
- URL: https://github.com/margo-yunanova/movie-explorer
- Owner: margo-yunanova
- Created: 2024-06-14T10:15:00.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-06-19T20:54:29.000Z (3 months ago)
- Last Synced: 2024-09-22T08:02:53.561Z (5 days ago)
- Topics: axios, kinopoisk, msw, mui, react, react-router, typescript, vkontakte
- Language: TypeScript
- Homepage: https://movie-explorer-hub.netlify.app/
- Size: 249 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Элитное приложение для получения эксклюзивной информации о фильмах
Данное приложение разработано в рамках выполнения профильного задания - Фронтенд-разработчик на стажировку в VK
## Ссылка на деплой приложения
https://movie-explorer-hub.netlify.app
Интерфейс API Кинопоиска эмулирован с использованием MSW.
## Сборка и запуск проекта
### Запуск в режиме разработки
```bash
npm install
npm run dev
```
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
### Локальное тестирование приложения
```bash
$ npm run build
$ npm run preview
```
## Стек технологий
Фронтенд написан на React + TypeScript со сборщиком Vite
|Пакеты|Назначение|
|:----|:----|
|[MUI](https://mui.com/)|Библиотека компонентов для создания интерфейсов на Material Design System от Google|
|[React-router](https://reactrouter.com/en/main)|Библиотека для переключения и маршрутизации страниц.|
|[Axios](https://axios-http.com/ru/docs/intro)|HTTP-клиент.|
|[MSW](https://mswjs.io/)|Библиотека для имитации API, которая позволяет создавать мок, перехватывая запросы на сетевом уровне.|
## Техническое задание
Создание приложения для просмотра информации о фильмах с использованием React, TypeScript и открытого API (например, [**Кинопоиск API**](https://kinopoisk.dev/) (https://kinopoisk.dev/)).
### **Функционал**:
- Отображение списка фильмов:
- Приложение должно отображать список фильмов, получаемых с помощью [API](https://kinopoisk.dev/).
- Отображать фильмы постранично по 50 фильмов на страницу.
- Для каждого фильма необходимо отобразить:
- Постер фильма (если доступен).
- Название фильма.
- Год выпуска.
- Рейтинг фильма.
- Должна быть возможность фильтровать список фильмов:
- По жанру (выбор нескольких жанров).
- По рейтингу (диапазон рейтинга).
- По году выпуска (диапазон лет начиная с 1990).
- Просмотр детальной информации о фильме:
- При клике на фильм из списка или результатов поиска, приложение должно переходить на страницу с детальной информацией об этом фильме.
- На странице фильма необходимо отобразить:
- Постер фильма (если доступен).
- Название фильма.
- Описание фильма.
- Рейтинг фильма.
- Дату выхода.
- Список жанров.
### **Технические требования:**
- Использовать React, TypeScript.
- Рекомендуется использовать хуки и функциональные компоненты React.
- Разрешается использовать сторонние библиотеки (Axios, MobX, React Router) и при необходимости библиотеку компонентов Material UI.