Voxo Streaming Platform
Overview
Voxo began as a project built for fun: an opportunity to explore what goes into creating a polished, Netflix-inspired streaming experience from the ground up.
The goal was not to reproduce a full commercial streaming service, but to build the important parts of the viewing experience — a browsable catalogue, support for movies and episodic series, responsive playback controls, and reliable browser-based video streaming.
The project became a practical experiment in modern frontend tooling, media playback, HLS streaming, and the interaction details that make a video platform feel cohesive across desktop and mobile devices.
Technical Highlights
Voxo combines a modern Next.js application with a custom Vidstack player and an HLS-compatible streaming pipeline. The architecture keeps catalogue content, playback behaviour, and presentation separate, making it straightforward to add new titles, series, seasons, and streaming sources.
Voxo is available as a working live experience, allowing visitors to explorethe catalogue, stream content, and interact with the custom media player.
Streaming-Ready Playback
Vidstack provides the underlying media framework, with HLS.js enabling segmented HLS playback in supported browsers and adaptive quality selection when multiple stream variants are available.
Custom Player Experience
The player includes custom controls for playback, seeking, volume, fullscreen, quality selection, audio tracks, touch gestures, and automatic episode progression.
Movies and Episodic Content
A shared catalogue model supports both standalone movies and multi-season series, including episode navigation and automatic transition to the next episode.
Responsive Interface
The catalogue and viewing experience were designed for desktop and mobile using Tailwind CSS, shadcn/ui, Base UI primitives, and responsive interaction patterns.
Architecture
The application is built with Next.js, React, and TypeScript, with catalogue content represented through strongly typed configuration rather than being coupled directly to the interface.
Movies and series share a common content model, while series extend it with seasons and episodes. This allows the catalogue, media cards, watch routes, and player interfaces to work from the same structured source of truth.
Playback is handled by a reusable Vidstack-based player component. Movies pass a single stream directly into the player, while series add state for the selected season and episode. Previous, next, and playback-ended events are connected to the episode model so viewers can move naturally through a series without the media player needing to understand the catalogue itself.
The interface is assembled using Tailwind CSS, shadcn/ui, Base UI, and Lucide icons, with lightweight password protection available for gated deployments.
Media Streaming
The central technical focus was delivering real streaming playback rather than treating video as a simple downloadable file.
Voxo consumes HLS manifests, such as streams delivered through Mux, which divide media into smaller segments that can be loaded progressively. Through Vidstack and HLS.js, the player can expose the quality levels and audio tracks provided by the stream while adapting playback to the capabilities of the browser.
The playback interface is built on top of Vidstack’s media primitives rather than using its default visual theme. This made it possible to create a distinct Voxo experience while retaining the more difficult underlying behaviour: media state management, seeking, buffered progress, fullscreen handling, volume control, touch gestures, quality switching, and cross-browser HLS support.
Outcome
The result is a compact but complete streaming-platform prototype that demonstrates the core experience behind a modern video product.
Voxo brings together a configurable movie and series catalogue, HLS-based streaming, custom media controls, episode progression, responsive design, and lightweight access protection in a single application.
More importantly, it provided a hands-on way to explore the engineering beneath familiar streaming interfaces — turning a project built for fun into a focused study of browser media, interaction design, and modern frontend tooling.