Case Study Showcase

Live TV - Real-time Streaming Platform

Multi-protocol live TV streaming with WebSocket real-time synchronization

Next.jsReactTypeScriptMongoDBMongooseSocket.ioRedisHLS.jsMPEGTS.jsTailwind CSSLucide React Icons
๐Ÿ”’ frenzicast.vercel.app
Live TV - Real-time Streaming Platform
Click to Expand
DeploymentCloudinary + CDN
AccessPrivate
Codebase1.5 MB
Stack11 Technologies
The Challenge & Bottleneck

Core Problem Statement

"Traditional TV streaming requires complex infrastructure to handle concurrent viewers, protocol compatibility, and real-time viewer state synchronization. Existing solutions are either closed-source or lack modern web capabilities."

Engineered Solution

Architectural Implementation

Next.js full-stack application with a three-layer architecture: Frontend (React 19 with Tailwind CSS for UI), Backend (Next.js API routes with Mongoose/MongoDB), and Real-time Layer (Socket.io with Redis adapter for scalable WebSocket connections). HLS.js and MPEGTS.js handle different streaming protocols client-side.

Engineering Deep Dive

Detailed review of tradeoffs, database models, scaling strategies, and microservices

Structural Trade-offs & Decisions

Server-side rendering adds latency for dynamic content but improves SEO and initial load time. Redis caching trades memory usage for query performance. Horizontal scaling with Socket.io/Redis adds operational complexity compared to simpler polling-based systems.

Context & Constraints

  • Built as a portfolio project demonstrating full-stack streaming capabilities
  • Deployed on Vercel for serverless scalability
  • Implements industry-standard HLS protocol for adaptive bitrate streaming
  • Demonstrates real-time communication patterns with Socket.io

Database Modeling & Storage Strategy

MongoDB collections for: Streams (channel metadata, status), Viewers (viewer state, presence), ChatMessages (real-time messages), StreamStats (analytics, viewer counts). Mongoose schemas with indexes on frequently queried fields (stream_id, created_at). Denormalization of viewer counts in streams collection for fast queries.

Scaling Plan & Performance Roadmap

Add message queuing (Bull/BullMQ) for chat processing. Implement database replication for high availability. Separate WebSocket servers from API servers. Add CDN for HLS segment distribution. Implement stream recording to persistent storage (S3/GCS). Sharding strategy for MongoDB based on stream_id.

System Subservices & Workers

Vercel (hosting)
MongoDB Atlas (database)
Redis Cloud (caching)
Socket.io (WebSocket)
Next.js API Routes
Next Case Study

RepoInsight

AI-Powered GitHub Repository Analysis Tool