Plex.tv
A complex React front‑end development for Plex's web‑based media library and player, helping users browse, manage, and play large personal video, audio, and image collections across devices.
In Detail
At the time, Plex's web interface lagged well behind its native application counterparts. Users could access their media through native apps, but browser‑based access was constrained by web platform capabilities and the complexity of playing personal media collections reliably across devices.
The web app had originally been built ten years ago with Handlebars and Backbone. As browser capabilities improved, the distributed Plex development team began introducing React into the front end, starting with targeted interface enhancements before moving towards a broader rebuild.
Early work included animation, micro‑interactions, and media‑grid zoom features. The platform later moved towards larger React‑led features, including the removal of Handlebars and a new media player capable of handling both audio and video within a single component.
Library Screen
Plex libraries can contain thousands of items, so browsing and organisation had to stay simple. The library grid used user‑defined categories, filtering, layout controls, zoom‑level controls, and item‑count preferences to help users navigate large media collections without overwhelming the interface.
Details Screen
Plex's detail screens rely on metadata agents that enrich scanned media with information from online sources such as The Movie Database. Posters, cover art, plot summaries, background imagery, and other metadata are then used across the library grid and detail views to create a richer browsing experience and make large collections easier to navigate.
Media Player
A scratch‑built media player was central to expanding browser‑based support across devices and providing an experience closer to Plex's native players. The work became more practical as HTML5 media support and standardised formats improved, allowing the server to transcode media specifically for the capabilities of the user's browser.
The player supported both audio and video, with playback state and user preferences stored on the server so users could resume media across devices, sessions, and different versions of the Plex app.
The Outcome
My work with Plex contributed to the ongoing transition of its web application from a Backbone and Handlebars front end towards React, improving the way users could browse, manage, and play their personal media collections in the browser.
The work helped bring the web experience closer to Plex's native applications, from richer library interactions and metadata‑driven detail screens through to a unified browser‑based player supporting both audio and video.
- "
John Kavanagh is the best front‑end developer I've worked with. His knowledge of HTML, CSS, and JavaScript is impeccable and he's always happy to help out and share his knowledge when his expertise is required.
John's a great guy to work with and I have and will continue to recommend him to people who need someone who really knows what they are doing."
