Realtime media case study

AasPas Private Theater

Realtime watch-party platform with synced playback, voice chat, source compatibility, and room persistence

AasPas Private Theater is a realtime watch-party platform built to make remote video sessions feel controlled and social instead of chaotic. The product lets a host create a room around a video source, share a join link, and keep playback synchronized for everyone through Socket.IO state updates. It supports YouTube, Google Drive, direct video files, HLS streams, Streamable links, and generic embedded players. The room also includes WebRTC voice, realtime chat, emoji reactions, MongoDB-backed room recovery, identity persistence, automatic room expiry, and compatibility checks so users do not create broken rooms accidentally.

I built this system end to end across the room lifecycle, source parsing, sync rules, voice integration, persistence model, playback recovery behavior, and the dark streaming-style product interface.

Visit live website Explore other projects

Room topology

Create room

Paste a supported link, validate the source, bind host identity, and generate a private room.

Join link

Guests enter quickly through a shared link and recover their lightweight room identity on return.

Synced player

Playback state stays synchronized through host authority, versioned snapshots, and drift correction.

Voice + chat

WebRTC voice, live chat, and emoji reactions turn passive watching into a real collaborative room.

Host-led sync

Only the room owner controls shared play, pause, and seek for everyone else

Voice + chat

WebRTC voice, live chat, and emoji reactions keep the room social in real time

Flexible sources

Supports YouTube, Google Drive, direct MP4, HLS, Streamable, and embed-style inputs

Mongo-backed state

Playback position, room activity, chat, and member profiles can recover after reloads

Link-based access

Guests can join private rooms quickly without a heavy account system

TTL cleanup

Inactive rooms expire automatically so stale collaboration state does not stay forever

System map

Major product systems

This project is strong portfolio material because it combines media playback, realtime authority rules, collaboration behavior, and persistence instead of only rendering a video player on screen.

Room creation and identity flow

A host enters a video link and name, receives a private room code, and shares that link with guests while lightweight participant identity is preserved locally for smoother re-entry.

Host-controlled synchronized playback

The room creator is the master controller for play, pause, and seek. Other participants receive versioned state updates so the room does not split into multiple conflicting playback timelines.

Universal media compatibility

A parsing layer classifies YouTube, Google Drive, HLS, direct media files, Streamable, and embedded players so the app can route each source through the correct playback strategy.

Realtime collaboration

Socket.IO powers presence, synced playback events, chat, emoji reactions, room join events, and voice participant discovery in one connected collaboration flow.

Voice room layer

SimplePeer-based WebRTC voice gives participants a built-in audio room with mic and speaker controls, making the experience feel closer to a real shared hangout than passive co-watching.

Persistence, expiry, and recovery

Playback state, activity timestamps, chat history, and member profiles are persisted in MongoDB, while inactive room expiry and runtime reset behavior prevent stale state from growing endlessly.

Product surfaces

Four connected experience surfaces

The project spans room creation, collaborative viewing, voice and chat interaction, and backend lifecycle control. That breadth is exactly what makes it look like a real product instead of a single screen demo.

Room creation surface

Fast entry and source validation

The landing experience is built around speed: create a private room quickly, detect the kind of media link the user pasted, and prevent obviously broken sources before the room opens.

Name plus video URL entry with lightweight friction

Automatic source-type detection and badge feedback

Google Drive link normalization and direct-link conversion

Server-assisted inspection for unsupported or misleading responses

Room creation with owner identity binding

Immediate redirect into a shareable join link flow

Watch room surface

Shared video experience

The main room screen combines the player, host controls, participant presence, and fullscreen-friendly interaction patterns into one viewing surface.

Shared player area with playback-state recovery

Host-only timeline control for play, pause, and seek

Guest-side sync requests when playback drifts or buffers

Quality controls for supported YouTube playback

Fullscreen support with floating collaboration UI

Join-live behavior for participants who fall behind playback

Collaboration surface

Voice, chat, and reactions

The social layer is not bolted on. Voice chat, live room messages, floating reactions, and participant status are integrated into the watch session itself.

Realtime chat with capped history replay on join

Emoji reaction bursts across the room

SimplePeer WebRTC voice join and leave behavior

Mic and speaker controls for each participant

Voice participant discovery over Socket.IO signalling

Floating chat overlay during fullscreen playback

Backend control plane

State, authority, and lifecycle rules

The backend decides room lifecycle, persistence, sync authority, and media validation so the product remains recoverable and predictable.

MongoDB room model with playback and activity state

TTL cleanup for inactive rooms

Versioned playback snapshots with timestamps

Capped chat history and bounded member profile storage

Host authority enforcement for player actions

Source inspection and compatibility endpoints

Technical architecture

Technology footprint

The stack spans media players, realtime room sync, Mongo persistence, WebRTC voice, compatibility checks, and a responsive client experience that behaves well under real multi-user usage.

Next.js client product

The UI is built as a client-heavy realtime product with a create-room flow, join-room flow, fullscreen behavior, and collaboration-first room layout.

Next.jsReact 19TypeScriptapp routerresponsive dark UI

Player abstraction layer

A universal player interface routes YouTube, direct media, HLS, Streamable, and iframe-like sources through the right playback implementation while exposing a consistent control API.

ReactPlayerreact-youtubeHLS handlingplayer control abstractionquality control

Realtime room sync

Room playback behavior is coordinated through Socket.IO messages, versioned state snapshots, drift thresholds, and explicit recovery sync requests.

Socket.IOstate versioningsync requestsdrift handlinghost authority

Persistence and lifecycle

MongoDB stores room state, chat, and member profiles, while TTL expiry keeps temporary collaboration rooms from becoming permanent clutter.

MongoDBMongooseTTL indexroom activity timestampsbounded history

Voice communication

WebRTC voice is layered on top of socket signalling so participants can speak inside the room without relying on third-party meeting software.

WebRTCSimplePeerSTUN/TURN-assisted signallingmic controlsspeaker controls

Source compatibility and validation

The backend helps evaluate remote media responses so users are warned about unsupported HTML previews, blocked downloads, or non-streamable content before a broken room is created.

source parsingcontent-type inspectionlink normalizationfallback URL strategyproxy-compatible playback

Playback compatibility

Source support and playback orchestration

One of the deepest parts of the system is the way it treats media sources as a real product problem instead of assuming every URL behaves like a perfect MP4.

YouTube detection with quality-aware embedded playback

Google Drive link extraction, direct-url conversion, and fallback URLs

Direct MP4, WebM, MOV, MKV-style link recognition

HLS stream handling for `.m3u8` media

Streamable and generic embed detection for iframe playback

Pre-room compatibility inspection to prevent obviously broken sources

Realtime behavior

Sync rules, recovery, and room authority

Realtime correctness matters here. The room needs a clear source of truth, drift correction, and recovery behavior when clients buffer, refresh, or re-enter.

Socket.IO room join, leave, and participant presence events

Host-only shared playback control enforcement

Versioned player snapshots with timestamps and updated-by markers

Drift-aware sync rules plus explicit request-sync recovery

Realtime guest join notifications and room population awareness

Live emoji reactions and chat events across active participants

Collaboration layer

Voice, chat, and shared-room feel

The product becomes memorable because watching is not the only action. Users can talk, react, and stay socially connected inside the same room surface.

Realtime chat with replayed room history on join

Emoji reaction bursts for lightweight social feedback

WebRTC voice room with participant discovery through sockets

Mic mute and speaker mute controls inside the same room UI

Fullscreen floating chat overlay for immersive watching

Local identity persistence so users rejoin rooms more smoothly

Ownership

What I personally handled

This project matters in a portfolio because it proves I can think across media, realtime sync, communication, persistence, and product UX without needing a big team.

Room creation flow, source parsing, and media compatibility decisions

Socket.IO playback sync rules and authority enforcement

WebRTC voice integration and participant signalling flow

MongoDB room model, TTL cleanup, and capped history design

Universal player abstraction across multiple source types

Dark streaming-style product UI and responsive room experience

Technology index

Core technologies used

Next.jsReact 19TypeScriptNode.jsExpress.jsMongoDBMongooseSocket.IOWebRTCSimplePeerReactPlayerreact-youtubeHLS-compatible playbackLink parsing and source validationRealtime chat and emoji reactionsTTL room expiry