Portfolio / Selected work / SAIF FLIX
SAIF / FLIX
SAIF FLIX is a personal streaming catalogue built by Saif Al Jahan with PHP, JavaScript and TMDB data. It combines browsable shelves, a watchlist, multi-source playback fallbacks and a dedicated Android TV interface.
Type
Personal product
Role
Product, design, front end
Stack
JavaScript, TMDB API, custom player
Year
2026
On this page
01 Overview 02 The problem 03 My role 04 Technical approach 05 Design decisions 06 Challenges 07 Outcome 08 Evidence01 Overview
SAIF FLIX is a free streaming catalogue I designed and built end to end. It reads from the TMDB database, presents films and series as shelves, and plays them through a custom player with multiple fallback servers. No account, no payment, no personal data collected — the product is the browsing and the playback.
It is my own product, not a client commission, which is exactly why it is in this portfolio: it is the project where nobody else set the constraints.
02 The problem
Streaming front ends fail in three predictable ways: they are heavy, they break when a third-party source does, and they are designed for a laptop and then squashed onto a TV.
• Thousands of titles need to feel navigable, not dumped into an infinite grid.
• Playback depends on sources I do not control, so the interface has to keep working when one does not.
• Metadata arrives incomplete — missing artwork, missing runtimes, duplicate titles across regions.
• People watch on televisions, where a cursor and a hover state do not exist.
03 My role
Product decisions, interface design, front-end engineering, the player, the routing, the Android TV layout and the search metadata — one person, the whole product. I also wrote the copy, which is the part nobody warns you about.
04 Technical approach
Data
TMDB as the catalogue: trending, top-rated, per-genre collections and per-title metadata, requested on demand rather than baked into the page.
Routing
Query-string routes — /movie?id=, /tv?id= — so a title has a shareable URL and the page renders from an identifier rather than a client-side router.
Player
Multiple servers offered per title with an automatic fallback, so one dead source degrades the experience instead of ending it.
Catalogue logic
De-duplication by title and year across lists, so the same film does not appear three times in a row of shelves.
Television
A dedicated leanback route at /android-tv with larger targets, no hover dependence, and a D-pad-shaped focus order.
Performance
No framework, no animation library, images sized per shelf slot, and nothing fetched that the current shelf does not need.
05 Design decisions
Dark, because the artwork is the interface: posters are the brightest thing on screen and every chrome element steps back so they can be. One accent colour marks the primary action and the active filter, and nothing else competes with it.
Shelves are labelled in plain language — Continue Watching, Because You Watched, Top 10 — because the user's question is never “what is in the database”, it is “what do I watch next”. Badges stay small and factual: rating, year, language, media type.
06 Challenges
Third-party failure
Images 404 and ratings arrive as “NR”. Every slot has a fallback treatment so a missing poster leaves a composed card, not a broken hole.
Long lists, short attention
Horizontal shelves with keyboard and touch support, capped row lengths, and a Top 10 that is a real ranking rather than another poster grid.
Playback reliability
The fallback chain has to be invisible when it works and obvious when it does not. The player tells you which source it is trying and moves on.
Television input
Leanback mode is a different interaction model, not a responsive breakpoint: focus rings become the primary state and the whole grid steps up in size.
07 Outcome
Live at saif-flix.webdev-saif.com, with the Android TV mode at /android-tv. I am not quoting traffic or retention numbers here because I have no verified analytics for the demo.
What is checkable: the catalogue loads, shelves filter by All / Movies / TV Shows, the watchlist persists locally, playback falls back between servers, and the leanback layout is usable with arrow keys alone.
08 Evidence
The SAIF FLIX home screen, showing the cinematic hero, content browsing and Android TV entry point. Supporting feature notes appear below.
Home
Rotating billboard
One featured title at a time, with Watch Now and My List as the only actions.
Catalogue
Continue Watching · Because You Watched · Watchlist · Top 10
Four shelves with different jobs, filtered by All / Movies / TV Shows.
Playback
Multi-server fallback
A failed source is skipped rather than surfaced as an error.
Television
/android-tv
Leanback layout for Android TV, Fire TV and Google TV remotes.