README.ru.md

Маруся — Платформа для поиска фильмов

Русская версия | English

Учебный проект — бета-версия стримингового сервиса от ВК Маруси

Веб-приложение для поиска фильмов, просмотра информации о них и управления списком избранного. Пользователи могут искать фильмы по названию, просматривать топ-10 по рейтингу IMDb, получать случайные рекомендации и сохранять понравившиеся фильмы в избранное.

🎯 Основные возможности

• Поиск фильмов — быстрый поиск по названию с отображением результатов
• Случайный фильм — генерация случайной рекомендации для просмотра
• Топ-10 фильмов — список лучших фильмов по рейтингу IMDb
• Жанры — просмотр фильмов по категориям с бесконечной прокруткой
• Детальная информация — полное описание фильма, трейлер, рейтинги
• Избранное — добавление и управление списком любимых фильмов
• Авторизация — регистрация и вход в систему с сохранением сессии
• Личный кабинет — просмотр профиля и списка избранных фильмов

🏗️ Архитектура

Проект построен на основе методологии Feature-Sliced Design (FSD) — современного подхода к архитектуре фронтенд-приложений, обеспечивающего высокую масштабируемость и поддерживаемость кода.

Структура слоёв:

src/
├── app/          # Инициализация приложения, роутинг, глобальные стили
├── pages/        # Страницы приложения (главная, жанры, фильм, профиль)
├── widgets/      # Сложные составные блоки (хедер, футер, детали фильма)
├── features/     # Бизнес-функции (поиск, избранное, авторизация)
├── entities/     # Бизнес-сущности (фильм, жанр, пользователь)
└── shared/       # Переиспользуемый код (UI-kit, API, хелперы, хуки)

Технологический стек:

• React 18 — библиотека для построения пользовательских интерфейсов
• TypeScript — типизированный JavaScript для надёжности кода
• Redux Toolkit — управление глобальным состоянием приложения
• React Router 7 — маршрутизация и навигация
• React Hook Form — управление формами с валидацией
• Zod — схемы валидации данных
• Vite — быстрый сборщик и dev-сервер
• SCSS Modules — модульные стили с препроцессором
• Swiper — карусели и слайдеры
• React Player — проигрыватель видео для трейлеров

🚀 Запуск проекта

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

• Node.js версии 18 или выше
• Yarn версии 1.22 или выше

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

yarn install

Запуск в режиме разработки

yarn dev

Приложение будет доступно по адресу: http://localhost:5173

Сборка для продакшена

yarn build

Собранные файлы будут находиться в папке dist/

Предварительный просмотр продакшен-сборки

yarn preview

🛠️ Дополнительные команды

Линтинг и форматирование

# Проверка кода ESLint
yarn lint:eslint

# Проверка стилей Stylelint
yarn lint:style

# Проверка архитектуры (FSD)
yarn lint:steiger

# Форматирование кода Prettier
yarn format

📡 API

Приложение использует API сервиса CinemaGuide.

Документация API: https://cinemaguide.skillbox.cc/docs/

Особенности работы с API:

• Авторизация через сессии с использованием cookies
• Автоматическое включение credentials в запросы (credentials: 'include')
• Сохранение сессии при перезагрузке страницы
• Автоматическое завершение сессии при истечении времени

📝 Требования к коду

Проект следует принципам чистого кода и стайлгайду:

• PascalCase для имён компонентов и файлов компонентов
• camelCase для переменных и функций
• Имена компонентов — существительные (что отображают)
• Имена функций — глаголы (что делают)
• Максимальная длина функций — 20 строк
• Максимальная вложенность — 3 уровня
• Без транслита и сокращений в именах

🎨 Дизайн

Дизайн приложения выполнен в соответствии с макетами Figma, предоставленными партнёрами проекта. Интерфейс адаптивен и оптимизирован для различных размеров экранов.

📋 Техническое задание

Подробные технические требования и спецификации описаны в Техническом задании.

📄 Лицензия

Учебный проект, разработанный в рамках курса Skillbox.