Описание проекта

Многостраничное SPA приложение предоставляет пользователям возможность просматривать список фильмов, изучать детальную информацию о них и сохранять понравившиеся фильмы в избранное. Данные получаются через API Кинопоиска в соответствии с техническими требованиями задания.

https://poiskkino.larek.tech/

Реализованная функциональность

1. Отображение списка фильмов

• Получение данных через Кинопоиск API
• Бесконечная прокрутка с подгрузкой по 50 фильмов
• Отображение для каждого фильма:
  • Постер фильма (если доступен)
  • Название фильма
  • Год выпуска
  • Рейтинг фильма

2. Фильтрация списка фильмов

• По жанру (выбор нескольких жанров)
• По рейтингу (диапазон рейтинга)
• По году выпуска (диапазон лет начиная с 1990)
• Синхронизация фильтров с searchParameters
• Применение фильтров при переходе по прямой ссылке

3. Детальная информация о фильме

• Переход на страницу фильма при клике из списка
• Отображение:
  • Постер фильма (если доступен)
  • Название фильма
  • Описание фильма
  • Рейтинг фильма (если доступен - ср.арифметическое со всех источников и отдельный рейтинг по каждой платформе, в противном случае 'н/д')
  • Дата выхода
  • Список жанров

4. Функция "Избранное"

• Отдельная страница со списком избранных фильмов
• Сохранение списка при перезагрузке страницы (localStorage)
• Добавление фильма только после подтверждения в кастомном модальном окне
• Возможность отмены добавления в модальном окне

Установка и запуск

Системные требования

• Node.js версии 18 или выше
• Менеджер пакетов pnpm или npm

Локальная установка

1. Клонирование репозитория:

git clone https://github.com/pendoss/vkKino.git
cd vkKino

2. Установка зависимостей:

pnpm install

3. Настройка переменных окружения:

cp .env.default .env

В файле .env вставьте свой токен (его можно получить на сайте https://kinopoisk.dev/)

4. Запуск

pnpm build
pnpm start

в режиме разработки:

pnpm dev

Архитектура проекта

vk-kino/
├── app/
│   ├── components/         # React компоненты
│   ├── hooks/              # Хуки
│   ├── routes/             # Страницы приложения
│   ├── stores/             # MobX stores для управления состоянием
│   ├── types/              # TypeScript типы
│   ├── utils/              # Вспомогательные функции
│   └── api/                # API интеграция
├── public/              
└── build/             

Технические требования

Проект выполнен в полном соответствии с техническими требованиями:

• React - использованы функциональные компоненты и хуки
• TypeScript - строгая типизация всего проекта
• Кинопоиск API - источник данных о фильмах
• React Router - маршрутизация SPA
• MobX - управление состоянием приложения
• Axios - HTTP клиент для API запросов

Технический стек

• Frontend: React 19, TypeScript
• Роутинг: React Router 7
• Состояние: MobX
• Стилизация: TailwindCSS
• Сборка: Vite
• HTTP клиент: Axios
• API: Kinopoisk API (api.kinopoisk.dev)

Управление состоянием

Используется MobX для реактивного управления состоянием приложения:

• movieStore - управление списком фильмов и бесконечной прокруткой
• movieFilterStore - состояние фильтров с синхронизацией URL
• favoriteStore - управление избранными фильмами с localStorage

Структура страниц

1. Главная страница (/) - список фильмов с фильтрацией
2. Страница фильма (/movie/:id) - детальная информация
3. Избранное (/favorites) - сохраненные фильмы

Использование приложения

Навигация по приложению

1. Главная страница - отображение списка фильмов с возможностью фильтрации

   • Фильтрация по жанрам (множественный выбор)
   • Фильтрация по рейтингу Кинопоиска(диапазон)
   • Фильтрация по году выпуска (от 1990 года)
   • Бесконечная прокрутка для загрузки дополнительных фильмов

2. Страница фильма - подробная информация о выбранном фильме

   • Полная информация о фильме
   • Возможность добавления в избранное
   • Просмотр среднего и отдельного рейтинга среди доступных данных

3. Избранное - сохраненные пользователем фильмы

   • Локальное хранение данных
   • Возможность удаления из избранного

Работа с фильтрами

Фильтры автоматически синхронизируются с URL, что позволяет:

• Делиться ссылками с примененными фильтрами
• Использовать кнопки "Назад/Вперед" браузера
• Сохранять состояние фильтров при перезагрузке страницы

Переменные окружения

• VITE_KINOPOISK_API_KEY - API ключ для доступа к Кинопоиск API
• VITE_KINOPOISK_BASE_URL - базовый URL для API запросов

Результат выполнения задания

Создано полнофункциональное SPA приложение, которое:

• Полностью соответствует техническим требованиям задания
• Использует все указанные технологии (React, TypeScript, API Кинопоиска)
• Реализует весь требуемый функционал