Sinemata — Streaming Platform
Web DevelopmentProject Overview
Sinemata is a streaming platform with a dual-mode architecture. As a public portfolio demo it runs fully static on Vercel from a curated, legally-sourced catalog. Run locally with its Node.js backend, the same codebase becomes a self-hosted media server that indexes a personal movie library and streams it with full HTTP Range support. A single hostname check decides which mode to boot — so one codebase serves both worlds with zero runtime dependencies.
What I Built
Dual-mode design. One codebase, two deploy targets: a static public demo (Vercel) and a local full-stack server, selected automatically by hostname so the demo never needs a backend.
Streaming engine. Implemented HTTP Range streaming from scratch on Node's native http module — every local title plays back with instant seek, resume, and partial-content support.
Legal-by-design content. The public demo ships only public-domain films (Internet Archive) and official YouTube trailer embeds — no copyrighted media, safe to share publicly.
Original branding. Designed the Sinemata identity (wordmark + play-mark) and a complete streaming UX: login, profiles, My List, search, and a bilingual interface.
Application Gallery
Technical Implementation
Mode detection. A hostname check in the client config flips between the static demo catalog and the live /api/catalog backend — no build flags, no separate branches.
Backend. Pure Node.js on the native http module — no Express. Serves static files, a catalog API, thumbnail generation, subtitles, and the streaming endpoint.
Streaming. GET /stream honours the Range header and returns 206 Partial Content, enabling seek without downloading the whole file; non-MP4 formats are transcoded on the fly with FFmpeg.
Deployment. The demo deploys to Vercel as a pure static site via vercel.json rewrites and a .vercelignore that keeps the local backend, media, and secrets out of the bundle.
Front-end. Vanilla JS modules — app, auth, config, data, and a custom i18n layer — with a CSS-only streaming UI and HTML5 video playback.