UrMoviez
Cinema discovery platform built with React 19 Concurrent Features (Suspense, deferred rendering) serving a catalog of 10,000+ titles. TanStack Query v5 handles pagination, infinite scroll, and request deduplication — cutting redundant API calls. Multi-parameter search and genre-based filtering via TMDB API, with Framer Motion page transitions in a responsive Tailwind CSS v4 grid.
Timeline
February 2025
Role
Lead Developer
Status
In-progressTechnology Stack
Key Challenges
- TMDB API rate limits required implementing request queuing and intelligent caching strategies.
- Shared layout animations between list and detail views needed careful key management to avoid animation glitches.
- Balancing image quality with load times across different network conditions.
Key Learnings
- React 19 concurrent features dramatically improve perceived performance — the UI stays responsive even during heavy data processing.
- TanStack Query v5 keepPreviousData is essential for pagination UX — it prevents content flashing between page loads.
- Framer Motion shared layout animations create a native app feel that significantly improves user engagement.
The Problem
Movie discovery apps often suffer from slow loading times, poor search UX, and janky transitions that break the cinematic browsing experience. Users abandon the app when pagination feels sluggish or filters don't respond instantly.
Technical Decisions
React 19 Concurrency: I leveraged Suspense boundaries and deferred rendering (useTransition, useDeferredValue) to keep the UI responsive while loading large data sets. This means the search input never lags, even when filtering across 10,000+ titles.
Data Fetching Strategy: TanStack Query v5 handles all server state — with staleTime and gcTime tuned for the TMDB API rate limits. Pagination uses keepPreviousData to avoid layout shifts, and infinite scroll uses intersection observer triggers. Request deduplication prevents duplicate API calls when components re-render.
Animation Layer: Framer Motion powers page transitions (shared layout animations between movie cards and detail views), creating a seamless browsing experience that feels native rather than web-based.
Responsive Grid: Tailwind CSS v4 grid system adapts from 1 column on mobile to 5 columns on desktop, with consistent spacing and typography scales.
The Outcome
A cinema discovery platform serving 10,000+ titles with smooth page transitions, instant search filtering, and zero layout shifts during pagination. The responsive grid works seamlessly across all screen sizes.