> MARAT_SHVETS.portfolio
> cd ../projects
010
Fullstack · Видеоплатформа

Мы.Школьники — видеоархив школьной жизни СССР

Fullstack-разработчик·2024 · в разработке

Видеоплатформа для архивных записей школьной жизни СССР и СНГ. Загрузка, автоматический транскодинг, поиск по 334 городам и 16 странам.

Next.jsFFmpegBullMQS3Redis
334+ городов
В базе архива, 16+ стран
Городов в базе334 в 16 странах
ВидеопайплайнHLS + BullMQ + S3
ВидеопайплайнHLS + BullMQ + S3
ДизайнDenis Sorokin
РазработкаMarat Shvets
// ПРОБЛЕМА

Тысячи архивных видеозаписей школьной жизни СССР и СНГ хранятся в личных архивах и безвозвратно теряются. Не существовало ни одной платформы, где их можно найти, загрузить и посмотреть — с удобной навигацией по стране, городу, году и тематике. Нужно было построить всё с нуля: архитектуру, базу данных, видеопайплайн, интерфейс и инфраструктуру.

// ПРОЦЕСС
01
Архитектура и база данных

Три независимых сервиса: REST API на Node.js/Express, публичный сайт и админ-панель на Next.js — каждый деплоится и масштабируется отдельно. PostgreSQL + Prisma с древовидной структурой тегов, каскадным удалением и индексами на горячих запросах. Два VPS в разных странах — Россия и Нидерланды — для отказоустойчивости и доступности из любой точки.

02
Пайплайн обработки видео

Пользователь загружает видео → BullMQ кладёт задачу в очередь Redis (задачи не теряются при перезапуске) → воркер на FFmpeg конвертирует в HLS с тремя уровнями качества (360p / 720p / 1080p) → сотни .ts сегментов и превью уходят в Yandex Object Storage. HLS.js на фронтенде начинает воспроизведение с первого сегмента — без ожидания загрузки всего файла — и автоматически переключает качество под скорость интернета пользователя.

03
Дизайн и публичный сайт

Дизайн — Денис Сорокин, вёрстка по макетам Figma. Next.js 14 App Router: SSR для SEO, ISR для кеширования каталога. Навигация по 334 городам, 36 странам, десятилетиям и вложенным тегам. HLS-плеер с тремя качествами прямо в браузере, лайки и комментарии без регистрации, загрузка видео с real-time прогресс-баром через XMLHttpRequest.

04
Админ-панель и аналитика

Модерация видео, редактирование метаданных, просмотр в модалке с HLS-плеером, удаление с автоматической очисткой всех файлов из S3. Управление тегами как файловый проводник — папки, вложенность, перемещение. Аналитика на Recharts: видео по годам, городам, тегам, статусам. Live-мониторинг CPU и RAM с историческим графиком (обновление каждые 30 сек). Счётчик онлайн-пользователей через Redis Sorted Set — heartbeat с фронтенда, уникальные посетители через HyperLogLog.

// РЕШЕНИЕ

Построил полноценную видеоплатформу в одиночку. Пользователь загружает видео → автоматический транскодинг в HLS через FFmpeg и BullMQ → публикация после модерации → мгновенный стриминг без ожидания загрузки. Поиск по 334 городам, 36 странам, тематическим тегам с вложенностью и десятилетиям. Дизайн проекта подготовил — Денис Сорокин, вёрстка строго по макетам Figma.

// РЕЗУЛЬТАТЫ
334 в 16 странах
Городов в базе
HLS + BullMQ + S3
Видеопайплайн
HLS + BullMQ + S3
Видеопайплайн
Denis Sorokin
Дизайн
Marat Shvets
Разработка
// СТЕК
Node.jsExpressTypeScriptPostgreSQLPrismaRedisBullMQFFmpegHLS.jsNext.js 14RechartsYandex Object StorageDockerPM2Nginxn8n