Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pamellix/kinopoisk-clone
Тестовое задание для ВК стажировки на позицию Фронтенд разработчика
https://github.com/pamellix/kinopoisk-clone
vk
Last synced: 2 months ago
JSON representation
Тестовое задание для ВК стажировки на позицию Фронтенд разработчика
- Host: GitHub
- URL: https://github.com/pamellix/kinopoisk-clone
- Owner: pamellix
- License: mit
- Created: 2024-06-18T15:28:04.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-18T20:38:57.000Z (6 months ago)
- Last Synced: 2024-09-26T21:42:27.900Z (3 months ago)
- Topics: vk
- Language: TypeScript
- Homepage:
- Size: 236 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Медиатека на открытом API Кинопоиска
===============================
Об этом проекте
============
Это простое приложение для просмотра информации о фильмах, созданное с использованием React, TypeScript и открытого API Кинопоиска.
Целью этого проекта является создание приложения для просмотра информации о фильмах, которое будет использовать React, TypeScript и открытое API Кинопоиска для получения данных о фильмах. Приложение будет иметь следующий функционал:
1. Отображение списка фильмов:
* Приложение отображает список фильмов, получаемых с помощью API.
* Отображает фильмы постранично по 50 фильмов на страницу с возможность менять количество фильмов на странице.
* Для каждого фильма отображено:
+ Постер фильма (если доступен).
+ Название фильма.
+ Год выпуска.
+ Рейтинг фильма.
2. Есть возможность фильтровать список фильмов:
* По жанру (выбор нескольких жанров)
* По рейтингу (диапазон рейтинга).
* По году выпуска (диапазон лет начиная с 1990).
3. Просмотр детальной информации о фильме:
* При клике на фильм из списка или результатов поиска, приложение переходит на страницу с детальной информацией об этом фильме.
* На странице фильма отображено:
+ Постер фильма (если доступен).
+ Название фильма.
+ Описание фильма.
+ Рейтинг фильма.
+ Дату выхода.
+ Список жанров.
Инструменты:
----------------------
Дополнительные задания:
----------------------
* Есть возможность добавления фильмов в список "избранное":
+ Отдельная страница со списком избранных фильмов.
+ Сохраняется список при перезагрузке страницы.
Ожидаемый результат:
------------------
* Рабочее многостраничное SPA приложение для просмотра информации о фильмах, удовлетворяющее всем перечисленным требованиям.
Начало работы
============
Чтобы запустить проект локально, необходимо выполнить следующие шаги:
### Предварительные требования
* npm
```
npm install npm@latest -g
```
### Установка: ручная
1. Клонировать репозиторий
```
git clone https://github.com/pamellix/kinopoisk-clone.git
```
2. Перейдите в папку с приложением и установите NPM пакеты
```
npm install
```
3. Запустить приложение
```
npm start
```
Чтобы собрать build версию приложения, необходимо выполнить следующие команды:
1. Установить NPM пакеты
```
npm install
```
2. Собрать build версию
```
npm run build
```
3. Запустить приложение
```
npx serve -d build
```
### Установка: с помощью docker compose
1. Клонировать репозиторий
```
git clone https://github.com/pamellix/kinopoisk-clone.git
```
2. Перейдите в папку с приложением и пропишите следующую команду
```
docker compose up --build
```
Лицензия
=======
Проект распространяется под лицензией MIT. Подробнее о лицензии можно узнать здесь: [LICENSE.txt](LICENSE.txt)