A cinematic streaming platform I built as my final-year project.

It isn't a Netflix clone. I wanted to build a movie experience with its own identity — dark, calm, editorial, and focused on discovery rather than endless scrolling.

Live: movie-haytam.vercel.app

Most streaming interfaces rely heavily on carousels, gradients, and repeated content. I wanted to take the opposite approach.

The goal was to make the interface feel closer to a cinematic experience than a traditional streaming dashboard — while keeping the product practical, responsive, and fast.

The real challenge was making the simplicity feel intentional.

React 19 + Vite 8 Fast frontend architecture with a component-driven UI.

TanStack Query Handles server state, caching, synchronization, and API fetching.

Framer Motion + GSAP Used for controlled cinematic transitions and interaction design without compromising performance.

Tailwind CSS 4 Utility-first styling with a consistent visual system.

Supabase Authentication and persistent application data.

TMDB API Movie metadata, posters, backdrops, genres, and discovery data.

The homepage looks simple.

The system behind it isn't.

I built several layers to make the content feel curated rather than randomly assembled:

Media deduplication — prevents the same movie from appearing repeatedly across different sections.

Content curation — balances genres and moods so the homepage doesn't become several variations of the same category.

Smart discovery — combines different recommendation sources to create more useful movie suggestions.

Reusable cinematic primitives — atmosphere effects, backdrop transitions, lighting, blur, and vignette depth are built as reusable systems rather than one-off page effects.

A lot of the hardest engineering work became invisible once it worked correctly.

That's probably the biggest lesson this project taught me.

A cinematic atmosphere system Backdrop blur, transitions, light leaks, and depth effects are composed from reusable primitives.

Content deduplication The system actively prevents repeated titles across homepage sections.

Responsive design Designed to work across desktop, tablet, and mobile rather than simply shrinking the desktop layout.

Performance-conscious animation Animations primarily rely on transform and opacity to avoid unnecessary layout work.

Keyboard navigation Interactive movie rows and navigation remain usable without relying entirely on a mouse.

If I rebuilt it today, I'd start with TypeScript from day one.

I'd also add proper end-to-end testing with Playwright and refactor parts of the subtitle/content system into a more strongly typed architecture.

Those are things I'd change with the benefit of hindsight — not because the current system doesn't work, but because I understand the architecture better now.

Haytam Cinema started as a UI project.

It ended up teaching me much more about frontend systems:

state architecture

data normalization

recommendation composition

rendering performance

reusable UI primitives

responsive design

motion and usability

designing systems that stay maintainable as the interface grows

The most important lesson was simple:

Built by Haytam · PFE 2026 MIT License