When searching for an ambitious project to build, I found endless tutorials combining video streaming and microblogging. But they were all just basic YouTube + Twitter clones. I started thinking about the real human psychology of social media: people frequently express raw, honest thoughts, get bullied or dogpiled, and panic-delete their posts because of permanent digital footprints.
I wanted to solve this with a dual-state identity architecture. What if users could post under complete anonymity in Shadows mode, but if their post went viral, they could cryptographically claim authorship? And conversely, if a public post on The Wire became infamous, they could retroactively cloak it into anonymity. I designed StreamWire around this exact balance of free speech and identity protection.
My first implementation of the Stealth Mode had a fatal architectural flaw. I was sanitizing author names and profile avatars on the frontend inside React state before rendering the card.
While testing, I opened Chrome DevTools Network tab and realized that anyone could inspect the raw JSON response and immediately see the author's real _id, username, and avatar URL. True anonymity was completely broken. I scrapped the client-side approach and re-engineered the backend using MongoDB Aggregation Pipelines ($facet, $cond, $project). The database itself checks the stealth flag and sanitizes author data on the fly before the payload ever reaches Express or the network wire.
For the video streaming tier (Cinema), I wanted something far beyond a standard <video> tag. I built an automated AI ingest pipeline powered by Groq's high-speed inference engine.
Upon upload, audio is extracted and transcribed via Whisper. That transcript, along with video title and description, is fed into Llama 3.3. Viewers can click Ask AI during playback to ask questions about the video (e.g., 'What did the speaker say about database indexing?'), receiving instantaneous, context-grounded answers extracted directly from the video's transcript.
Managing authentication across multiple devices while supporting stealth profiles required a rock-solid security boundary. I engineered a session manager that enforces a strict 5-device login limit per account.
Access tokens and refresh tokens are stored in HTTP-Only, SameSite cookies. Each token refresh triggers automatic refresh token rotation with reuse detection: if an old refresh token is reused, the entire session family is instantly invalidated to protect against token theft and man-in-the-middle attacks.
Raw media uploads quickly bloated cloud storage. For images, converting uploads to WebP immediately slashed storage by 70% with zero quality loss. But video was a much harder beast: uploading raw high-res videos consumed massive bandwidth, so I set out to compress videos directly in the user's browser before upload.
What followed was days of client-side experimentation that completely failed. I built an HTML5 canvas frame-capture method which saved file size, but mangled the frame timestamps and sped up playback to 4X, ruining the footage. I tried client-side FFmpeg WebAssembly, but the 30MB+ binary choked user RAM and froze budget browsers. Pure JavaScript encoders dropped frames and crashed memory.
I concluded that high-quality video encoding cannot reliably happen in client sandboxes. I shifted compression to a backend worker: large videos are processed via two-pass FFmpeg on the server before streaming through Cloudinary. I paired this with a 12-hour TTL MongoDB view deduplication pipeline, ensuring clean storage, fast playback, and untampered analytics.