CineVault — Film Discovery Platform
A cinema discovery and tracking web application powered by TMDb API, providing movie lovers with instant access to trending releases, trailer modals, and persistent watchlists.
Custom debouncing hook eliminates keystroke request thrashing.
Near-instant reactive genre, rating, and decade filtering in UI.
IntersectionObserver lazy-loads media to protect render thread.
Client-side persistence survives browser restarts with zero auth friction.
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.
Data Flow & Rendering Pipeline
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.
Technical Implementation: Debounced Search Hook
Preventing search flood was accomplished with a custom React debounce hook that isolates state updates until user typing pauses:
import { useState, useEffect } from 'react';
export function useDebounce<T>(value: T, delay: number = 350): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}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.