🎬 FilmFlow

Современное iOS приложение для управления каталогом фильмов с синхронизацией между устройствами и веб-админ панелью для управления контентом.

📋 Содержание

О проекте
Возможности
Технологии
Архитектура
Быстрый старт
Установка и настройка
Использование
API Документация
Разработка
Структура проекта
Безопасность
Лицензия

🎯 О проекте

FilmFlow — это полнофункциональная система для управления каталогом фильмов, состоящая из трех основных компонентов:

iOS приложение (SwiftUI) — нативное мобильное приложение для просмотра фильмов, управления списками желаемого и просмотренных фильмов
Backend API (Node.js/Express) — RESTful API для управления данными, авторизации и синхронизации
Admin Panel (React) — веб-интерфейс для администраторов для управления каталогом фильмов

Проект разработан для демонстрации современного подхода к созданию fullstack приложений с использованием нативных технологий для мобильной платформы и веб-технологий для административной панели.

✨ Возможности

📱 iOS Приложение

Каталог фильмов
- Просмотр всех доступных фильмов с постером и описанием
- Детальная информация о каждом фильме
- Карусель кадров из фильма
- Информация об актерах с фотографиями
- Ссылки на просмотр фильма
- Поиск по каталогу
Список желаемого (Wishlist)
- Добавление фильмов в список желаемого
- Просмотр сохраненных фильмов
- Удаление из списка
Просмотренные фильмы
- Отметка просмотренных фильмов
- Просмотр истории просмотров
- Организация просмотренных фильмов в пользовательские папки
Папки
- Создание пользовательских папок для организации фильмов
- Добавление просмотренных фильмов в папки
- Управление содержимым папок
Авторизация
- Регистрация новых пользователей
- Вход в систему
- Синхронизация данных между устройствами через облако
- Сохранение сессии

👨‍💼 Admin Panel

Управление фильмами
- Добавление новых фильмов в каталог
- Редактирование информации о фильмах
- Удаление фильмов
- Просмотр списка всех фильмов
Детальная информация
- Название, описание, год выпуска
- Жанр и режиссер
- Постер фильма (URL)
- Кадры из фильма (множественные URL)
- Информация об актерах (имя и фото)
- Ссылки на просмотр (название платформы и URL)
Безопасность
- Авторизация администраторов
- JWT токены для защиты API

🛠 Технологии

Frontend (iOS)

SwiftUI — современный фреймворк для создания пользовательских интерфейсов
Swift 5.0+ — язык программирования
URLSession — для работы с REST API
UserDefaults — для локального хранения токенов

Backend

Node.js 18+ — серверная платформа
Express.js — веб-фреймворк
PostgreSQL 15 — реляционная база данных
JWT (jsonwebtoken) — для аутентификации
bcryptjs — для хеширования паролей
CORS — для кросс-доменных запросов

Admin Panel

React 18 — библиотека для создания пользовательских интерфейсов
Vite — современный сборщик и dev-сервер
Axios — HTTP клиент
React Hot Toast — уведомления

DevOps

Docker — контейнеризация приложений
Docker Compose — оркестрация контейнеров
Nginx — веб-сервер для админ панели

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

┌─────────────────┐
│   iOS App       │
│   (SwiftUI)      │
└────────┬─────────┘
         │ HTTP/REST
         │
┌────────▼─────────┐
│   Backend API    │
│  (Node.js/Express)│
└────────┬─────────┘
         │
    ┌────┴────┐
    │         │
┌───▼───┐ ┌──▼──────┐
│PostgreSQL│ │Admin Panel│
│ Database │ │  (React)  │
└─────────┘ └───────────┘

Принципы работы

iOS приложение подключается к Backend API через REST запросы
Backend API обрабатывает запросы, выполняет бизнес-логику и взаимодействует с базой данных
Admin Panel использует тот же API для управления контентом
Все данные хранятся в PostgreSQL и синхронизируются между устройствами пользователя
JWT токены обеспечивают безопасную аутентификацию

🚀 Быстрый старт

Требования

Docker и Docker Compose (для запуска сервисов)
Xcode 14+ (для iOS разработки)
Node.js 18+ (опционально, для локальной разработки)

Быстрая установка

Клонируйте репозиторий

git clone https://github.com/yourusername/watch_films_ios_app.git
cd watch_films_ios_app

Запустите сервисы через Docker Compose

docker-compose up -d

Проверьте статус сервисов

docker-compose ps

Откройте админ панель

http://localhost:3125

Откройте iOS проект в Xcode

cd ios
open FilmFlow.xcodeproj

📦 Установка и настройка

1. Настройка окружения

Создайте файл .env в корне проекта (опционально, есть значения по умолчанию):

# База данных
POSTGRES_USER=filmflow
POSTGRES_PASSWORD=your_secure_password_here
POSTGRES_DB=filmflow_db

# Backend API
JWT_SECRET=your_super_secret_jwt_key_here
NODE_ENV=development
PORT=3033

# Admin Panel
ADMIN_USER=admin
ADMIN_PASSWORD=admin123
VITE_API_URL=http://localhost:3033/api

2. Запуск через Docker Compose

Первый запуск

# Запустите только PostgreSQL для инициализации
docker-compose up -d postgres

# Подождите несколько секунд, затем выполните миграции
docker-compose exec backend node src/database/migrate.js

# Запустите все сервисы
docker-compose up -d

Проверка работы

# Проверьте статус
docker-compose ps

# Проверьте логи
docker-compose logs -f backend

Порты сервисов

PostgreSQL: 5433
Backend API: 3033
Admin Panel: 3125

3. Настройка iOS приложения

Откройте проект в Xcode

cd ios
open FilmFlow.xcodeproj

Настройте URL API

В файле ios/FilmFlow/Services/APIService.swift:

private let baseURL = "http://localhost:3033/api"

Для симулятора: используйте localhost

Для физического устройства: замените на IP адрес вашего компьютера в локальной сети:

private let baseURL = "http://192.168.1.100:3033/api"  // Замените на ваш IP

Запустите приложение

Выберите симулятор или устройство в Xcode и нажмите Run (⌘R).

4. Инициализация базы данных

Миграции должны выполниться автоматически при первом запуске. Если нет, выполните вручную:

docker-compose exec backend node src/database/migrate.js

💻 Использование

iOS Приложение

Регистрация и вход

При первом запуске приложения вы увидите экран авторизации
Нажмите "Регистрация" для создания нового аккаунта
Заполните форму:
- Логин (username)
- Пароль
- Подтверждение пароля
- Имя (опционально)
После регистрации вы автоматически войдете в систему

Работа с каталогом

Просмотр фильмов
- Откройте вкладку "Каталог"
- Просматривайте список всех доступных фильмов
- Используйте поиск для быстрого поиска по названию
Детальная информация
- Нажмите на фильм для просмотра деталей
- Просматривайте постер, описание, кадры из фильма
- Смотрите информацию об актерах
- Переходите по ссылкам на просмотр
Список желаемого
- Нажмите кнопку "⭐" на карточке фильма
- Просматривайте сохраненные фильмы во вкладке "Желаемое"
- Удаляйте фильмы из списка
Просмотренные фильмы
- Отметьте фильм как просмотренный
- Просматривайте историю во вкладке "Просмотрено"
- Организуйте фильмы в папки
Папки
- Создавайте папки для организации просмотренных фильмов
- Добавляйте фильмы в папки
- Удаляйте фильмы из папок
- Удаляйте папки

Admin Panel

Вход в админ панель

Откройте http://localhost:3125 в браузере
Введите учетные данные администратора:
- Логин: admin (или значение из .env)
- Пароль: admin123 (или значение из .env)

Управление фильмами

Добавление фильма
- Нажмите кнопку "Добавить фильм"
- Заполните форму:
  - Название (обязательно)
  - Описание
  - Год выпуска
  - Жанр
  - Режиссер
  - Постер (URL изображения)
  - Кадры из фильма (добавьте несколько URL через запятую)
  - Актеры (имя и URL фото)
  - Ссылки на просмотр (название платформы и URL)
- Нажмите "Сохранить"
Редактирование фильма
- Нажмите на фильм в списке
- Измените нужные поля
- Сохраните изменения
Удаление фильма
- Откройте детали фильма
- Нажмите кнопку "Удалить"
- Подтвердите удаление

📚 API Документация

Базовый URL

http://localhost:3033/api

Авторизация

Все запросы (кроме регистрации и входа) требуют JWT токен в заголовке:

Authorization: Bearer <token>

Регистрация

POST /api/auth/register
Content-Type: application/json

{
  "username": "user123",
  "password": "password123",
  "passwordConfirm": "password123",
  "name": "Иван Иванов"
}

Ответ:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": 1,
    "username": "user123",
    "name": "Иван Иванов"
  }
}

Вход

POST /api/auth/login
Content-Type: application/json

{
  "username": "user123",
  "password": "password123"
}

Ответ: аналогичен регистрации

Текущий пользователь

GET /api/auth/me
Authorization: Bearer <token>

Фильмы

Список всех фильмов

GET /api/movies
Authorization: Bearer <token>

Ответ:

{
  "movies": [
    {
      "id": 1,
      "title": "Название фильма",
      "description": "Описание",
      "year": 2023,
      "genre": "Драма",
      "director": "Режиссер",
      "poster": "https://example.com/poster.jpg",
      "screenshots": ["url1", "url2"],
      "actors": [
        {
          "name": "Актер",
          "photo": "https://example.com/photo.jpg"
        }
      ],
      "watchLinks": [
        {
          "platform": "Netflix",
          "url": "https://netflix.com/..."
        }
      ]
    }
  ]
}

Детали фильма

GET /api/movies/:id
Authorization: Bearer <token>

Добавить в желаемое

POST /api/movies/:id/wishlist
Authorization: Bearer <token>

Удалить из желаемого

DELETE /api/movies/:id/wishlist
Authorization: Bearer <token>

Отметить просмотренным

POST /api/movies/:id/watched
Authorization: Bearer <token>

Убрать из просмотренных

DELETE /api/movies/:id/watched
Authorization: Bearer <token>

Пользователь

Список желаемого

GET /api/users/wishlist
Authorization: Bearer <token>

Просмотренные фильмы

GET /api/users/watched
Authorization: Bearer <token>

Папки

Список папок

GET /api/folders
Authorization: Bearer <token>

Создать папку

POST /api/folders
Content-Type: application/json
Authorization: Bearer <token>

{
  "name": "Мои любимые фильмы"
}

Удалить папку

DELETE /api/folders/:id
Authorization: Bearer <token>

Фильмы в папке

GET /api/folders/:id/movies
Authorization: Bearer <token>

Добавить фильм в папку

POST /api/folders/:id/movies/:movieId
Authorization: Bearer <token>

Удалить фильм из папки

DELETE /api/folders/:id/movies/:movieId
Authorization: Bearer <token>

Admin API

Вход администратора

POST /api/admin/login
Content-Type: application/json

{
  "username": "admin",
  "password": "admin123"
}

Создать фильм (только для админов)

POST /api/movies
Content-Type: application/json
Authorization: Bearer <admin_token>

{
  "title": "Название",
  "description": "Описание",
  "year": 2023,
  "genre": "Драма",
  "director": "Режиссер",
  "poster": "https://example.com/poster.jpg",
  "screenshots": ["url1", "url2"],
  "actors": [
    {
      "name": "Актер",
      "photo": "https://example.com/photo.jpg"
    }
  ],
  "watchLinks": [
    {
      "platform": "Netflix",
      "url": "https://netflix.com/..."
    }
  ]
}

🔧 Разработка

Локальная разработка Backend

cd backend
npm install
npm run dev

Backend будет доступен на http://localhost:3033

Локальная разработка Admin Panel

cd admin-panel
npm install
npm run dev

Admin Panel будет доступна на http://localhost:3001 (прокси на backend)

Обновление базы данных

После изменения схемы БД выполните миграции:

docker-compose exec backend node src/database/migrate.js

Или локально:

cd backend
npm run migrate

Полезные команды Docker

# Просмотр логов
docker-compose logs -f backend
docker-compose logs -f postgres
docker-compose logs -f admin-panel

# Перезапуск сервисов
docker-compose restart

# Остановка
docker-compose down

# Остановка с удалением volumes (ОСТОРОЖНО! Удалит данные)
docker-compose down -v

# Пересборка образов
docker-compose build
docker-compose up -d --build

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

watch_films_ios_app/
├── ios/                          # iOS приложение
│   └── FilmFlow/
│       ├── FilmFlowApp.swift     # Точка входа приложения
│       ├── Info.plist            # Конфигурация приложения
│       ├── Models/               # Модели данных
│       │   ├── Movie.swift       # Модель фильма
│       │   ├── User.swift        # Модель пользователя
│       │   └── Folder.swift     # Модель папки
│       ├── Services/             # Сервисы и менеджеры
│       │   ├── APIService.swift  # REST API клиент
│       │   └── AuthManager.swift # Менеджер авторизации
│       └── Views/                # SwiftUI экраны
│           ├── MainTabView.swift # Главный экран с табами
│           ├── AuthView.swift    # Экран авторизации
│           ├── MoviesCatalogView.swift # Каталог фильмов
│           ├── MovieDetailView.swift   # Детали фильма
│           ├── WishlistView.swift      # Список желаемого
│           ├── WatchedView.swift      # Просмотренные
│           ├── FoldersView.swift       # Папки
│           └── FolderPickerView.swift  # Выбор папки
│
├── backend/                      # Backend API
│   ├── src/
│   │   ├── server.js            # Точка входа сервера
│   │   ├── routes/              # API маршруты
│   │   │   ├── auth.js          # Авторизация
│   │   │   ├── movies.js        # Фильмы
│   │   │   ├── users.js        # Пользователи
│   │   │   ├── folders.js      # Папки
│   │   │   └── admin.js        # Админ API
│   │   ├── database/           # База данных
│   │   │   ├── db.js           # Подключение к БД
│   │   │   └── migrate.js      # Миграции
│   │   └── middleware/         # Middleware
│   │       ├── auth.js         # JWT аутентификация
│   │       └── adminAuth.js    # Админ аутентификация
│   ├── Dockerfile              # Docker образ backend
│   └── package.json            # Зависимости
│
├── admin-panel/                 # Веб-админ панель
│   ├── src/
│   │   ├── App.jsx             # Главный компонент
│   │   ├── main.jsx            # Точка входа
│   │   ├── components/         # React компоненты
│   │   │   ├── AdminLogin.jsx  # Форма входа
│   │   │   └── ErrorBoundary.jsx # Обработка ошибок
│   │   └── api/                # API клиент
│   │       └── movies.js       # API для фильмов
│   ├── Dockerfile              # Docker образ admin-panel
│   ├── nginx.conf              # Конфигурация Nginx
│   └── package.json            # Зависимости
│
├── docker-compose.yml          # Docker Compose конфигурация
├── README.md                   # Документация
├── QUICKSTART.md               # Быстрый старт
├── BUILD.md                    # Инструкции по сборке
└── DEPLOYMENT.md               # Инструкции по развертыванию

🔒 Безопасность

🤝 Contributing

Мы приветствуем вклад в проект! Пожалуйста:

Форкните репозиторий
Создайте ветку для вашей функции (git checkout -b feature/AmazingFeature)
Закоммитьте изменения (git commit -m 'Add some AmazingFeature')
Запушьте в ветку (git push origin feature/AmazingFeature)
Откройте Pull Request

📝 Лицензия

Этот проект распространяется под лицензией MIT. См. файл LICENSE для подробностей.

👤 Автор

Your Name

GitHub: @platinum_watermelon
Email: [email protected]

🙏 Благодарности

SwiftUI за отличный фреймворк
Express.js за простой и мощный веб-фреймворк
React за библиотеку для создания пользовательских интерфейсов
PostgreSQL за надежную базу данных

⭐ Если этот проект был полезен, поставьте звезду!

Name		Name	Last commit message	Last commit date
admin-panel		admin-panel
backend		backend
ios		ios
.gitignore		.gitignore
BUILD.md		BUILD.md
DEPLOYMENT.md		DEPLOYMENT.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
docker-compose.yml		docker-compose.yml

Latest commit

History

Folders and files

Repository files navigation

🎬 FilmFlow

📋 Содержание

🎯 О проекте

✨ Возможности

📱 iOS Приложение

👨‍💼 Admin Panel

🛠 Технологии

Frontend (iOS)

Backend

Admin Panel

DevOps

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

Принципы работы

🚀 Быстрый старт

Требования

Быстрая установка

📦 Установка и настройка

1. Настройка окружения

2. Запуск через Docker Compose

Первый запуск

Проверка работы

Порты сервисов

3. Настройка iOS приложения

4. Инициализация базы данных

💻 Использование

iOS Приложение

Регистрация и вход

Работа с каталогом

Admin Panel

Вход в админ панель

Управление фильмами

📚 API Документация

Базовый URL

Авторизация

Регистрация

Вход

Текущий пользователь

Фильмы

Список всех фильмов

Детали фильма

Добавить в желаемое

Удалить из желаемого

Отметить просмотренным

Убрать из просмотренных

Пользователь

Список желаемого

Просмотренные фильмы

Папки

Список папок

Создать папку

Удалить папку

Фильмы в папке

Добавить фильм в папку

Удалить фильм из папки

Admin API

Вход администратора

Создать фильм (только для админов)

🔧 Разработка

Локальная разработка Backend

Локальная разработка Admin Panel

Обновление базы данных

Полезные команды Docker

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

🔒 Безопасность

Рекомендации для продакшена

🤝 Contributing

📝 Лицензия

👤 Автор

🙏 Благодарности

About

Resources

Stars

Watchers

Forks

Releases

Packages