StreamSphere

A video streaming platform with automated media processing, cloud storage, and monitoring.

Users can upload videos through a React frontend, which are then compressed and optimized for web playback using FFmpeg on the backend, stored in AWS S3, and served through CloudFront. The whole stack runs in Docker containers with Prometheus + Grafana for keeping an eye on things.

What's in the box

• Video upload and processing — Videos go through an FFmpeg pipeline that extracts metadata via ffprobe, compresses with libx264/aac, applies -movflags +faststart for progressive playback, and generates thumbnails automatically.
• Cloud storage and delivery — Processed files land in S3, served to users through CloudFront edge caching.
• Auth — JWT-based registration and login with bcrypt password hashing.
• Comments — Users can comment on videos. Nothing fancy, just works.
• Monitoring — Backend exposes Prometheus metrics (request duration histogram, request counter). Grafana dashboards visualize request rates, latency, and system health.

Tech used

Frontend	React 19, Vite, React Router, Axios
Backend	Node.js, Express 5, Multer, fluent-ffmpeg
Database	MongoDB + Mongoose
Cloud	AWS S3, CloudFront
Monitoring	Prometheus, Grafana
Infra	Docker, Docker Compose

Project structure

streamsphere/
├── backend/
│   ├── middleware/
│   ├── .dockerignore
│   ├── .env.example
│   ├── Dockerfile
│   ├── models.js              
│   ├── package.json
│   ├── server.js              
│   ├── storage.js             
│   └── videoProcessor.js      
├── frontend/
│   ├── public/
│   ├── src/
│   ├── .dockerignore
│   ├── .gitignore
│   ├── Dockerfile
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── prometheus/
│   └── prometheus.yml
├── .gitignore
├── docker-compose.yml
└── README.md

API endpoints

Auth

Method	Route	Description
POST	/api/auth/register	Create account
POST	/api/auth/login	Get JWT token

Videos

Method	Route	Auth?	Description
POST	/api/videos/upload	Yes	Upload and process a video
GET	/api/videos	No	List all videos
GET	/api/videos/:id	No	Get single video details
GET	/api/videos/stream/:id	No	Stream video

Comments

Method	Route	Auth?	Description
POST	/api/comments	Yes	Post a comment
GET	/api/comments/:videoId	No	Get comments for a video

Metrics

Method	Route	Description
GET	/metrics	Prometheus-format metrics

Getting started

Prerequisites

• Node.js (v18+)
• Docker and Docker Compose
• FFmpeg/FFprobe (only needed if running outside Docker)
• An AWS account with an S3 bucket and CloudFront distribution set up

Run with Docker Compose

git clone https://github.com/Ocidemus/streamsphere.git
cd streamsphere
docker-compose up --build -d

This spins up:

• Backend API on localhost:5000
• MongoDB on localhost:27017
• Prometheus on localhost:9090
• Grafana on localhost:3001 (login: admin/admin)

Run locally (without Docker)

You'll need MongoDB running locally and a .env file in the backend directory:

PORT=5000
MONGO_URI=mongodb://localhost:27017/video-streaming
JWT_SECRET=your_jwt_secret
AWS_ACCESS_KEY_ID=your_key
AWS_SECRET_ACCESS_KEY=your_secret
AWS_REGION=us-east-1
AWS_S3_BUCKET=your-bucket-name
CLOUDFRONT_DOMAIN=https://your-distribution.cloudfront.net

Then:

# backend
cd backend
npm install
npm run dev

# frontend (separate terminal)
cd frontend
npm install
npm run dev

Monitoring setup

The Express server tracks two Prometheus metrics:

• http_request_duration_seconds — histogram of response times
• http_requests_total — counter of total requests

These get scraped by Prometheus every 15s (configured in prometheus/prometheus.yml) and can be visualized in Grafana by adding Prometheus as a data source at http://prometheus:9090.