🎬 MovieGrade

Киножурнал с друзьями: сайт, iOS и Android

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

🌐 Открыть сайт • 📱 Мобильное приложение • 🐞 Сообщить об ошибке

---

📱 Как выглядит

---

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

🔐 Аккаунт	регистрация по email с кодом подтверждения, вход, сброс пароля, удаление аккаунта
🎥 Журнал	статусы «Смотрел» и «Буду смотреть», поиск, сортировка, фильтры по жанру, году, рейтингу и типу
⭐ Оценки и отзывы	оценка от 1 до 10 и текстовый отзыв к каждому фильму
🔎 Каталог TMDB	поиск фильмов и сериалов, подборки, трейлеры, актёры, где посмотреть онлайн
🎲 Что посмотреть	рекомендации на основе вашего журнала
👥 Друзья	заявки в друзья, профили, онлайн-статус, последние просмотренные фильмы
📰 Лента	что друзья посмотрели и как оценили
🍿 Смотрим вместе	общие списки с друзьями: приглашения, добавление фильмов, отметка «посмотрели»
🖼️ Профиль	аватар, никнейм, «о себе», витрина из трёх любимых фильмов, статистика
🔔 Push-уведомления	в приложении: заявки в друзья, приглашения и новые фильмы в общих списках
📲 PWA	сайт можно установить на телефон как приложение

---

🧩 Из чего состоит проект

Movie-watch-tracker-/
├── client/     🌐 сайт — React + Vite + Tailwind (Vercel)
├── server/     ⚙️  API — Express + Prisma + PostgreSQL (Render + Neon)
├── mobile/     📱 приложение iOS/Android — Expo + React Native + NativeWind
└── docs/       🖼️ скриншоты для README

flowchart LR
    W["🌐 Сайт<br/>client/"] -->|REST + JWT| S["⚙️ API<br/>server/"]
    M["📱 Приложение<br/>mobile/"] -->|REST + JWT| S
    S --> DB[("🐘 PostgreSQL")]
    S -->|push| E["Expo Push Service"] --> M
    W --> T["🎬 TMDB API"]
    M --> T

Сайт и приложение работают с одним сервером и одной базой, поэтому аккаунт, журнал и друзья у них общие. Данные о фильмах (постеры, описания, актёры) берутся напрямую из TMDB.

---

🛠️ Стек

Часть	Технологии
Сайт	React 19, Vite 8, Tailwind CSS 3, vite-plugin-pwa, mammoth (импорт .docx)
Сервер	Node.js, Express 5, Prisma 5, PostgreSQL, JWT, bcrypt, Resend (письма), Expo Push
Приложение	Expo SDK 58, React Native, Expo Router, NativeWind, TanStack Query, expo-secure-store, expo-notifications
Хостинг	Vercel (сайт), Render (сервер), Neon (база), EAS (сборка приложения)

---

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

Нужен Node.js 20+. Для сервера ещё нужна база PostgreSQL: локальная или бесплатная на Neon.

1. Клонировать репозиторий

git clone https://github.com/Saprin66/Movie-watch-tracker-.git
cd Movie-watch-tracker-

2. Сервер

cd server
npm install

Создайте server/.env:

DATABASE_URL="postgresql://user:password@host:5432/dbname"
JWT_SECRET="длинная-случайная-строка"
RESEND_API_KEY="re_..."        # для писем с кодом подтверждения
PORT=3001
# необязательно:
# CORS_ORIGINS="http://localhost:5173"
# EXPO_ACCESS_TOKEN="..."      # если в Expo включена защита push

npx prisma db push   # создать таблицы
npm run dev          # http://localhost:3001

3. Сайт

cd client
npm install

Создайте client/.env:

VITE_API_URL=http://localhost:3001
VITE_TMDB_API_KEY=ваш_ключ_tmdb

npm run dev          # http://localhost:5173

Ключ TMDB бесплатный: themoviedb.org → Настройки → API.

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

cd mobile
npm install
cp .env.example .env   # впишите EXPO_PUBLIC_TMDB_API_KEY
npx expo start

Отсканируйте QR-код приложением Expo Go на телефоне. Сборка, push-уведомления и публикация в App Store и Google Play описаны в mobile/README.md.

---

🔌 API

Все запросы, кроме входа и регистрации, требуют заголовок Authorization: Bearer <token>.

Метод	Путь	Что делает
POST	/api/auth/register	регистрация, отправляет код на почту
POST	/api/auth/verify-email	подтверждение почты кодом
POST	/api/auth/resend-code	отправить код ещё раз
POST	/api/auth/login	вход, возвращает JWT
POST	/api/auth/forgot-password	код для сброса пароля
POST	/api/auth/reset-password	новый пароль по коду
GET	/api/auth/me	текущий пользователь
PUT	/api/auth/me	сменить никнейм
DELETE	/api/auth/me	удалить аккаунт

Метод	Путь	Что делает
GET	/api/movies	мой журнал
POST	/api/movies	добавить фильм
PUT	/api/movies/:id/status	сменить статус
PUT	/api/movies/:id/review	оценка и отзыв
GET / PUT	/api/movies/:id/meta	данные фильма (жанры, год и т.д.)
DELETE	/api/movies/:id	удалить из журнала
GET	/api/feed	лента друзей

Метод	Путь	Что делает
GET	/api/users/search	поиск людей
GET	/api/users/:userId	профиль
GET	/api/users/:userId/last-watched	последние просмотренные
PUT	/api/users/profile	аватар, «о себе», витрина
POST	/api/users/:userId/friend-request	отправить заявку
PUT	/api/users/:userId/friend-request	принять или отклонить заявку
GET	/api/users/friends/requests	входящие заявки
GET	/api/friends/list	мои друзья
DELETE	/api/friends/:friendId	удалить из друзей

Метод	Путь	Что делает
GET / POST	/api/lists	мои списки / создать список
GET	/api/lists/invites	приглашения
POST	/api/lists/:id/accept · /decline · /leave	принять, отклонить, выйти
GET / PUT / DELETE	/api/lists/:id	открыть, переименовать, удалить
POST / DELETE	/api/lists/:id/members[/:userId]	пригласить или убрать участника
POST / PUT / DELETE	/api/lists/:id/items[/:itemId]	добавить, отметить, удалить фильм

Метод	Путь	Что делает
POST	/api/push	сохранить push-токен устройства
DELETE	/api/push	удалить токен (при выходе)

---

☁️ Деплой

Что	Где	Как обновляется
Сайт	Vercel	автоматически после пуша в main
Сервер	Render	автоматически после пуша в main; при старте prisma db push обновляет таблицы
База	Neon	—
Приложение	EAS → App Store / Google Play	eas build и eas submit, см. mobile/README.md

---

🗺️ Планы

• Аватарки пользователей
• Оценки и отзывы
• Лента активности друзей
• «Что посмотреть сегодня»
• Общие списки с друзьями
• Мобильное приложение для iOS и Android
• Push-уведомления
• Публикация в App Store и Google Play
• Импорт из Letterboxd
• Достижения и бейджи

---

📬 Контакты

Автор: Алексей Email: [email protected] Telegram: @fuf4ny

Проект создан в рамках обучения fullstack-разработке.

Если проект понравился, поставьте ⭐

Данные о фильмах предоставлены TMDB. Этот продукт использует TMDB API, но не одобрен и не сертифицирован TMDB.