HyperTube
A video streaming platform built to explore distributed system design end to end, from responsive UI to async media processing pipelines.
01 · Problem
What made this hard
Building a streaming platform means solving several engineering problems simultaneously: responsive video playback with subtitle synchronization, a search experience backed by external metadata APIs, multilingual support that persists across requests, and an async media pipeline that doesn't block the UI during transcoding.
02 · Approach
How I solved it
Designed and implemented the frontend with Next.js and TypeScript, handling responsive layouts, video playback, and the search experience. Built backend endpoints in Django REST Framework to support the home page, library, continue watching, search, and watch history. Implemented language switching across English, French, and Spanish with language-aware API requests. Contributed to subtitle handling and worked within an existing async media architecture built on Redis, Celery, FFmpeg, and PostgreSQL. Containerized the full stack with Docker Compose.
03 · Result
What came out of it
A responsive streaming platform where users browse, search, and watch videos with subtitles in multiple languages. The media processing pipeline runs asynchronously via Celery workers, keeping the interface responsive during transcoding operations.
04 · Highlights
Key technical details
Constraints
- →Real-time media processing without blocking the UI
- →Subtitle synchronization across multiple formats
- →Language-aware requests across the full stack
05 · Architecture
How the pieces fit
Frontend
Next.js application with TypeScript and TailwindCSS, handling video playback, user authentication, metadata browsing, and responsive layouts.
Backend API
Django REST API serving media metadata, user management, search, and subtitle data with PostgreSQL persistence.
Async Pipeline
Celery workers with Redis broker handling FFmpeg transcoding, thumbnail generation, and subtitle extraction asynchronously.
06 · Decisions
Choices worth naming
- 01
Next.js for the frontend
Server-side rendering benefits on metadata-heavy pages and simpler routing for the streaming interface.
- 02
Django REST Framework
Django's ORM and admin interface reduced iteration time for the data-heavy media management workflows.
- 03
Celery + Redis async queue
Decoupled media processing from the request cycle, keeping the UI responsive during transcoding.
07 · Trade-offs
What I gave up
Media metadata has clear relational structure. SQL constraints prevented data inconsistencies across related entities.
Single-machine deployment was sufficient for the project scope. K8s would add complexity without proportional benefit.
08 · Reflection
Lessons and what's next
Lessons
- ·Async architectures require careful error handling for truly resilient pipelines
- ·Media processing benefits from early investment in test fixtures
- ·Streaming state is harder to manage than traditional request-response flows
Future
- →Add WebSocket-based real-time transcoding progress
- →Explore adaptive bitrate streaming
- →Implement collaborative watchlists
Team Project
My Contributions
Frontend
- →Designed and implemented the Home page
- →Built the Movie Library interface
- →Implemented Continue Watching and Watch History views
- →Built the Search UI and search experience
- →Responsive UI with Next.js, TypeScript, and TailwindCSS
Backend
- →Implemented backend endpoints for Home, Library, Search, Watchlist, and Watch History
- →Built Continue Watching and Search API integration
Localization
- →Implemented language switching across the application
- →Added support for English, French, and Spanish
- →Implemented language-aware API requests
Streaming
- →Worked on subtitle handling for multiple formats
- →Debugged streaming issues and improved playback reliability
Engineering Knowledge
- →Contributed to an existing async media architecture built on Django, Redis, Celery, FFmpeg, and PostgreSQL
Next case study
BADAsS
A datacenter network architecture exploring modern routing and scalable infrastructure.