All Projects
Intermediate · Case Study

i-Movie 2.0

Discover films the way you actually think about them.

i-Movie 2.0 is a movie discovery and information platform that makes finding great films effortless — combining a rich movie database API, personalised search, mood-based discovery, and a clean card-based UI built with React.

ReactJavaScriptHTMLCSSMovie API
Live DemoGitHub
i-Movie 2.0

The Problem

What needed solving.

Finding a good movie is paradoxically hard despite unlimited choice. Search on streaming platforms is keyword-only. Genre filters are too broad. 'Recommended for you' algorithms are black boxes that feel random. People still ask friends or check Reddit because nothing else works well.

The Solution

How I solved it.

A React movie discovery app with multi-filter search (genre + mood + year + rating), detailed film pages with cast, trailer, and similar recommendations, and a watchlist that persists locally — giving users a fast, clean alternative to algorithmic discovery.

Features

What it does.

Multi-Filter Discovery

Filter by genre, release year, rating range, and mood category simultaneously — the kind of combined filtering that streaming platforms still don't do well.

Multi-Filter Discovery

Rich Film Pages

Each film has a dedicated page with synopsis, cast, crew, trailer embed, user ratings, and a 'Similar Films' section powered by TMDB's recommendation API.

Personal Watchlist

Save films to a local watchlist — persisted in localStorage. No account required, no signup friction.

Trending & New Releases

Homepage curates trending, top-rated, and new release sections — updated daily via TMDB's trending endpoints.

System Architecture

How it's built.

FrontendReact + JavaScriptSPA with React Router, component-level state
APITMDB APIMovie data, search, recommendations, trailers
StoragelocalStorageWatchlist persistence without auth
DeploymentNetlifyCDN deployment, instant builds

Technology Stack

Frontend

ReactJavaScriptHTML5CSS3

API

TMDB API

Deployment

Netlify

Challenges & Solutions

Real problems, real fixes.

Challenge

TMDB API rate limiting on rapid filter changes causing flicker.

Solution

Debounced all filter input changes by 400ms and cancelled in-flight requests on new filter events using AbortController.

Challenge

Large movie card grids causing layout jank on scroll.

Solution

Implemented windowing with react-window — only cards in the visible viewport are rendered in the DOM.

Demo & Screenshots

See it live.

i-Movie 2.0 homepage

Film discovery with multi-filter search

Film detail page

Rich film page with cast, trailer and recommendations

Explore the full source code and documentation.

View on GitHubLive Demo← All Projects