Frontend to
Cinedash
A high-performance film-discovery interface delivered within a seven-day constraint.
Engineering Overview & Positioning
A film-discovery frontend combining typed URL state, infinite queries, virtualized rendering, persistent user state, explicit interface states, automated tests, CI, and Cloudflare Pages deployment.
Data & State Flow Architecture
URL Query Params
Navigable Router State
TanStack Query
Server Cache & Prefetch
Zustand Store
Persistent Watchlist
TanStack Virtual
DOM Viewport Rendering
Execution Sequence:URL Search Params ➔ TanStack Query Fetching & Deduplication ➔ Virtualized Viewport Grid ➔ Zustand Persistence
Engineering Focus & Core Themes
- Assigning each form of state to a mechanism matching its lifecycle
- Representing search and filters as navigable URL product state
- Keeping rendering work proportional to the viewport as collections expand through virtualization
- Treating loading, failure, and absence as explicit interface states
- Combining broad engineering scope with rigorous testing under a strict deadline
Key Engineering Trade-offs & Decisions
- Separated URL search state (TanStack Router) from transient UI filters and persistent watchlists (Zustand)
- Implemented TanStack Virtual to keep rendering costs proportional to the visible viewport as catalog collections grow
- Built intent-based prefetching on movie cards to streamline route transitions and reduce perceived delay
- Configured MSW network mocks to simulate realistic network behavior, loading states and failure scenarios during testing
Verified Implementation Evidence
- The repository contains 77 specification files using Vitest, React Testing Library and MSW
- Explicit loading, skeleton, error, empty, and populated interface states
- Watchlist search, sorting, pagination, and route synchronization
- Debounced movie search with deduplication across infinite query pages
Verified Technology Stack
- React 19
- Vite
- Strict TypeScript
- TanStack Query
- TanStack Router
- TanStack Table
- TanStack Virtual
- Zustand Persistence
- React Hook Form
- Zod
- Tailwind CSS
- Vitest & RTL
- MSW
- Cloudflare Pages
Project Scope
- Authentication is simulated, while film discovery is integrated with TMDB. The implementation focuses on frontend architecture, remote-state coordination, navigable filters, scalable collection rendering, persistent watchlists and explicit interface states.