Skip to content

Тестовое задание для ВК стажировки на позицию Фронтенд разработчика

License

Notifications You must be signed in to change notification settings

pamellix/kinopoisk-clone

Repository files navigation

Медиатека на открытом API Кинопоиска

Об этом проекте

Это простое приложение для просмотра информации о фильмах, созданное с использованием React, TypeScript и открытого API Кинопоиска.

Целью этого проекта является создание приложения для просмотра информации о фильмах, которое будет использовать React, TypeScript и открытое API Кинопоиска для получения данных о фильмах. Приложение будет иметь следующий функционал:

  1. Отображение списка фильмов:
    • Приложение отображает список фильмов, получаемых с помощью API.
    • Отображает фильмы постранично по 50 фильмов на страницу с возможность менять количество фильмов на странице.
    • Для каждого фильма отображено:
      • Постер фильма (если доступен).
      • Название фильма.
      • Год выпуска.
      • Рейтинг фильма.
  2. Есть возможность фильтровать список фильмов:
    • По жанру (выбор нескольких жанров)
    • По рейтингу (диапазон рейтинга).
    • По году выпуска (диапазон лет начиная с 1990).
  3. Просмотр детальной информации о фильме:
  • При клике на фильм из списка или результатов поиска, приложение переходит на страницу с детальной информацией об этом фильме.
  • На странице фильма отображено:
    • Постер фильма (если доступен).
    • Название фильма.
    • Описание фильма.
    • Рейтинг фильма.
    • Дату выхода.
    • Список жанров.

Инструменты:

TypeScript React React Router Redux Axios

Дополнительные задания:

  • Есть возможность добавления фильмов в список "избранное":
    • Отдельная страница со списком избранных фильмов.
    • Сохраняется список при перезагрузке страницы.

Ожидаемый результат:

  • Рабочее многостраничное SPA приложение для просмотра информации о фильмах, удовлетворяющее всем перечисленным требованиям.

Начало работы

Чтобы запустить проект локально, необходимо выполнить следующие шаги:

Предварительные требования

  • npm
npm install npm@latest -g

Установка: ручная

  1. Клонировать репозиторий
git clone https://github.com/pamellix/kinopoisk-clone.git
  1. Перейдите в папку с приложением и установите NPM пакеты
npm install
  1. Запустить приложение
npm start

Чтобы собрать build версию приложения, необходимо выполнить следующие команды:

  1. Установить NPM пакеты
npm install
  1. Собрать build версию
npm run build
  1. Запустить приложение
npx serve -d build

Установка: с помощью docker compose

  1. Клонировать репозиторий
git clone https://github.com/pamellix/kinopoisk-clone.git
  1. Перейдите в папку с приложением и пропишите следующую команду
docker compose up --build

Лицензия

Проект распространяется под лицензией MIT. Подробнее о лицензии можно узнать здесь: LICENSE.txt

About

Тестовое задание для ВК стажировки на позицию Фронтенд разработчика

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published