Back to Portfolio
Frontend Web App Entertainment UI

CineVault — Film Discovery Platform

A cinema discovery and tracking web application powered by the TMDb API, providing film lovers with instant access to trending releases, high-definition trailers, cast breakdowns, and customized watchlists.

CineVault Film Discovery Preview

Role

Frontend React Engineer

Data Source

The Movie Database (TMDb REST API)

Tech Stack

React.js TMDb API CSS3 Glassmorphism React Router

Experience

Infinite Scroll • Debounced Search • Trailer Modals

The Vision

Modern movie catalogs are often cluttered with invasive ads, slow loading interfaces, and fragmented streaming metadata. CineVault was designed as a sleek, distraction-free movie discovery hub, putting visual posters, critical ratings, and video previews front and center.

Core Capabilities

Curated Feeds

Real-time feeds highlighting trending movies of the week, top-rated all-time classics, and upcoming theatrical premieres.

Instant Search & Filter

Live debounced querying allowing users to filter by genre, release decade, user score, and language with instantaneous UI updates.

Inline YouTube Trailers

Integrated official trailer modals fetching YouTube video IDs via TMDb video endpoints without redirecting away from the page.

Client-Side Watchlist

Persistent bookmarking system allowing users to save movies they want to watch later, saved locally in browser storage.

Engineering Challenges & Solutions

Challenge 1: API Rate Limiting on Rapid Search Typing

Typing in search bars without safeguards triggers dozens of redundant HTTP requests, triggering TMDb rate limits. Implemented a custom useDebounce React hook that waits 350ms post-keystroke, reducing outbound API calls by over 75%.

Challenge 2: Image Heavy Grid Performance

Loading hundreds of high-res backdrop and poster images can bog down browser memory. Implemented native lazy loading with blur placeholders and prioritized loading only for above-the-fold viewport elements.

Previous Project Portfolio Website Next Case Study ReadLib