Films Area

Films Area — учебный мультплатформенный проект для просмотра фильмов, публикации отзывов и бронирования билетов в кино.

Решение объединяет REST API на Node.js, базу данных MongoDB и несколько пользовательских интерфейсов: основное React-приложение, отдельную PHP-страницу и мобильный прототип на React Native.

Проект демонстрирует работу нескольких клиентов с единым API и общей моделью данных.

---

Состав проекта

Проект включает четыре части:

1. Backend — REST API для фильмов, отзывов и билетов.
2. React frontend — основной веб-интерфейс с каталогом и бронированием.
3. PHP service — отдельный серверный клиент для просмотра статистики и поиска отзывов.
4. Mobile App — мобильный интерфейс на React Native и Expo.

React frontend ─┐
PHP service ────┼── HTTP / JSON ── Express API ── MongoDB
Mobile App ─────┘

---

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

Веб-приложение

• главная промостраница кинотеатра;
• просмотр каталога фильмов;
• поиск фильма по названию;
• сортировка каталога по году выпуска;
• переход на страницу выбранного фильма;
• отображение описания, жанра, рейтинга, режиссёра и стоимости;
• просмотр отзывов;
• добавление отзыва с оценкой;
• выбор фильма, даты, времени и количества билетов;
• автоматический расчёт итоговой стоимости;
• отправка бронирования на сервер.

REST API

• получение списка фильмов;
• получение фильма по идентификатору;
• получение отзывов выбранного фильма;
• добавление отзыва;
• создание билета;
• расчёт топа фильмов по выручке;
• подсчёт проданных билетов и средней стоимости заказа.

PHP-сервис

• вывод всех доступных фильмов;
• вывод рейтинга фильмов по продажам;
• отображение выручки и количества проданных билетов;
• поиск фильма по части названия;
• получение и вывод отзывов через REST API;
• экранирование пользовательских данных перед выводом.

Мобильный прототип

• главная страница;
• адаптированная галерея;
• каталог фильмов в виде сетки;
• получение данных из общего API;
• навигация между экранами через React Navigation.

---

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

Backend

• Node.js
• Express 4
• MongoDB
• Mongoose 8
• CORS
• REST API

Веб-интерфейс

• React 18
• React Router
• JavaScript
• Create React App
• CSS Modules
• Fetch API

PHP-сервис

• PHP
• HTML и CSS
• HTTP-запросы к REST API
• обработка JSON

Мобильное приложение

• React Native 0.76
• Expo 52
• React Navigation
• Stack Navigator
• Expo Font

---

Архитектура серверной части

Express-приложение предоставляет API и взаимодействует с MongoDB через Mongoose.

Основные модели:

• Movie — информация о фильме;
• Review — отзыв, связанный с фильмом;
• Ticket — данные бронирования и итоговая стоимость.

Для формирования рейтинга фильмов используется aggregation pipeline MongoDB:

1. билеты объединяются с фильмами через $lookup;
2. данные группируются по фильму;
3. вычисляются общая выручка, число билетов и средняя стоимость;
4. результат сортируется по выручке.

---

REST API

Базовый адрес локального API:

http://localhost:3000/api

Метод	Endpoint	Назначение
GET	/api/movies	Получить все фильмы
GET	/api/movies/top-grossing	Получить рейтинг по выручке
GET	/api/movies/:id	Получить фильм
GET	/api/movies/:id/reviews	Получить отзывы фильма
GET	/api/reviews	Получить все отзывы
POST	/api/reviews	Добавить отзыв
POST	/api/tickets	Забронировать билеты

API возвращает данные в формате JSON и проверяет наличие обязательных полей при создании отзыва или билета.

---

Структура проекта

FilmsAreaProject/
├── backend/
│   ├── models/
│   │   ├── movie.js           # Модель фильма
│   │   ├── review.js          # Модель отзыва
│   │   └── ticket.js          # Модель билета
│   ├── db.js                  # Подключение к MongoDB
│   └── server.js              # Express API
├── frontend/
│   └── src/
│       ├── components/        # Страницы, формы и UI-компоненты
│       └── index.js           # Маршрутизация React-приложения
├── php-service/
│   ├── index.php              # PHP-клиент API
│   └── style.css
└── MobileApp/
    ├── components/            # Мобильные компоненты
    ├── screens/               # Экраны приложения
    └── App.js                 # Навигация React Native

---

Локальный запуск

Требования

• Node.js 18 или новее;
• npm;
• доступный экземпляр MongoDB;
• PHP 8 — для запуска PHP-сервиса;
• Expo Go или эмулятор — для мобильного приложения.

1. Клонирование

git clone https://github.com/Gonerr/FilmsAreaProject.git
cd FilmsAreaProject

2. Backend

Настройте строку подключения к MongoDB в backend/db.js, затем выполните:

cd backend
npm install
node server.js

API запустится на http://localhost:3000.

3. React-приложение

Откройте второй терминал:

cd frontend
npm install
npm start

Поскольку порт 3000 занят API, Create React App предложит запустить интерфейс на другом порту, обычно 3001.

4. PHP-сервис

php -S localhost:8080 -t php-service

После запуска откройте http://localhost:8080.

5. Мобильное приложение

cd MobileApp
npm install
npx expo start

Для запуска на физическом устройстве необходимо заменить локальный IP-адрес API в мобильном клиенте на адрес компьютера в той же сети.

---

Реализованные технические решения

• единый REST API для разных типов клиентов;
• моделирование данных через Mongoose;
• связь отзывов и билетов с фильмами;
• агрегация статистики продаж средствами MongoDB;
• маршрутизация React-приложения;
• клиентский поиск и сортировка;
• динамический расчёт стоимости бронирования;
• создание и валидация данных через API;
• серверный PHP-клиент для обработки JSON;
• адаптация интерфейса для мобильной платформы;
• навигация между экранами React Native.

---

Безопасность и конфигурация

В учебной версии строка подключения к MongoDB сохранена непосредственно в исходном коде. Перед дальнейшим использованием проекта необходимо:

• заменить и отозвать опубликованные учётные данные;
• вынести MongoDB URI в переменную окружения;
• добавить .env.example без секретов;
• ограничить CORS списком разрешённых адресов;
• не хранить рабочие ключи и пароли в Git.

---

Текущее состояние и развитие

Основное React-приложение и API реализуют ключевые сценарии каталога, отзывов и бронирования. PHP-клиент демонстрирует повторное использование API. Мобильная часть остаётся прототипом: в ней готовы главная страница и каталог, но экран подробной информации о фильме ещё не подключён к навигации.

Возможные направления развития:

• завершить экран фильма и бронирование в мобильном приложении;
• добавить регистрацию и личный кабинет;
• реализовать выбор конкретного сеанса и мест в зале;
• вынести адрес API в общую конфигурацию клиентов;
• добавить обработку ошибок и состояния загрузки;
• добавить DTO и более строгую серверную валидацию;
• подготовить демонстрационные данные и скрипт их импорта;
• добавить автоматические тесты;
• контейнеризировать API и MongoDB через Docker Compose.

---

Автор

Анастасия Лихачева

Проект разработан в качестве учебной работы для практики full-stack-разработки, проектирования REST API и создания интерфейсов для нескольких платформ.