IYRIS
A Netflix-style streaming platform for international and Nigerian movies — browse, discover, and watch in one cinematic experience.
Overview
The product
IYRIS is a streaming-first web experience that puts international and Nigerian cinema side by side. Built on Next.js with TypeScript, it focuses on the two things that make streaming products feel premium: fast, rich discovery and a cinematic viewing interface. Categories, featured tiles, and localized content rails make Nollywood and global titles equally easy to find.
Next.js
Framework
TypeScript
Language
Nollywood + Global
Catalog
Streaming-first
UX
The problem
Local and international cinema rarely share a shelf
Nigerian audiences jump between services to find Nollywood titles and global hits, and most streaming UIs treat local content as an afterthought. IYRIS was built to give both catalogues a first-class, cinematic home.
- Nollywood and international titles live in separate products
- Discovery is often a generic grid instead of a curated, cinematic surface
- Streaming interfaces need speed — slow first paint kills the experience
The solution
One cinematic home for both catalogs
I built IYRIS as a Next.js + TypeScript app with a content-first layout: hero features, category rails, and browsing flows that treat local and international titles equally. Next.js gives it fast static delivery with interactive cinematic surfaces — the kind of feel that separates streaming products from catalog pages.
- International and Nigerian titles on one shelf with equal billing
- Cinematic hero and rail-based discovery instead of a plain grid
- Next.js static delivery keeps browsing fast on any connection
Architecture
The system behind IYRIS
A Next.js app organized around the streaming page model — cinematic hero, browsing rails, and detail surfaces — so content scales without the UI getting busier.
- 01
App Shell
Next.js · App RouterFast static pages with shared layout and navigation.
- 02
Discovery
Hero + RailsFeatured titles, category rails, and browsing flows.
- 03
Catalog
TypeScript data layerTyped title and category data powering every surface.
- 04
Detail Experience
Next.js routesTitle pages with synopsis, metadata, and watch entry points.
Tech stack
Tools that earned their place
Frontend
- Next.js
- TypeScript
Styling
- Tailwind CSS
Media
- Streaming-first UI
Data
- Typed catalog layer
Features
What it does, and why it matters
Cinematic hero
Featured titles presented as an immersive, streaming-first surface.
Category rails
Browse by genre and origin — Nollywood and international side by side.
Typed catalog
A TypeScript data layer keeps titles and metadata consistent everywhere.
Fast browsing
Next.js static rendering keeps discovery instant on any connection.
Title detail pages
Synopsis, metadata, and watch entry points on a dedicated surface.
Challenges
What nearly broke the system
Cinematic without the weight
Streaming UIs lean heavy — hero imagery, motion, and media. I kept IYRIS fast by shipping static-first pages with the cinematic moments layered on top, so discovery stays instant.
Two catalogs, one shelf
International and Nigerian titles needed equal billing. I modeled catalog data so origin is a filter, not a divide — the UI treats every title the same way.
Content that scales
A growing catalog shouldn't mean a busier UI. Rails and typed data mean new titles slot into existing surfaces without touching layout code.
Lessons learned
What shipping taught me
Streaming products are discovery products — hero and rails matter more than feature lists.
Local content is a first-class catalog, not a niche section.
Static-first delivery beats client-side everything for media browsing.
Impact
Why this actually matters
IYRIS gives international and Nigerian cinema one cinematic home — fast discovery, equal billing, and a watching experience designed around content, not chrome.
- Nollywood and international titles discovered on the same cinematic rails
- Fast static-first browsing keeps the experience fluid
- A typed catalog means content grows without the UI growing
Gallery
Inside the product
Cinematic hero
Immersive featured-title surface for the browsing experience.
Category rails
Nollywood and international titles on equal shelves.
Title detail
Synopsis, metadata, and watch entry on a dedicated page.