Film Database

TL;DR: Built a movie trailer platform from scratch featuring a type-safe TMDB API wrapper with argument autocompletion, batch requests, response caching, and content filtering. Includes a custom YouTube iFrame solution, native JavaScript drag-and-drop collections, responsive carousels, polished SCSS-based animations, Firebase authentication with Firestore storage, and exploration of advanced TypeScript patterns with Vitest, Jest, and RTL testing.

This self-initiated movie database website was built using Vite, React, TypeScript, and styled with SASS. It integrates TheMovieDatabase (TMDB) API for movie data, React-YouTube for embedded video playback, and Firebase for authentication and full CRUD operations. Form validation is handled with Zod. Vitest was used for unit testing, and advanced TypeScript patterns were explored to ensure the codebase is developer-friendly.

TMDB presented several challenges: inconsistently formatted URLs, limited WEBP support, and adult content slipping through endpoint queries. To reduce API calls and prevent runtime errors, a type-safe API wrapper was built to handle endpoint construction, type inference, sessionStorage caching, and batch requests with Promise.allSettled. Content filtering was a head-scratcher: Since TMDB is an open platform where users contribute content, the 'adult' query parameter only partially filters results, requiring additional checks to keep content appropriate. Various options were considered, including region-locking, genre-based filtering, and rating restrictions. To further refine results, the naughty-words package was applied to titles and overviews, reducing adult content while remaining performant.

To capture a polished feel similar to platforms like Netflix, a custom SCSS-driven loading screen (inspired by camillemormal's JavaScript variant) was created for initial load. It uses staggered animations, subtle transforms, and careful timing to produce a smooth reveal. Designing it required juggling scale effects and transition sequencing—a fun challenge that preserves performance. The loader integrates with React Router v7’s client loader, which prefetches carousel data, helping the UI feel immediately responsive.

For trailer playback, YouTube’s IFrame Player API was used in combination with the React-YouTube UI library to manipulate the player and match TMDB’s trailer data. The iFrame was stretched beyond its native aspect ratio, and a custom controller was built to replace the default YouTube UI, ensuring consistent positioning and styling across breakpoints and preserving the desired cinematic layout. Recommended videos appear when paused, a limitation of the embed.

A major UI challenge was implementing a responsive carousel with dynamically sized items. Instead of relying on JavaScript-heavy solutions, CSS with viewport-based calculations and custom properties determined item dimensions. This approach was inspired by examining Amazon’s DOM for reference calculations, which were then adapted to fit the application's design. Computed styles were placed in context, allowing consumers—like the carousel and collections features—to dynamically and conditionally adjust. IntersectionObserver toggles data-attributes to manage display properties and fetch-priority hints, minimizing network load while keeping the carousel smooth and responsive.

Given the limitations of TMDB’s data, the only feasible feature was a collections page where users can organize movies into custom collections and queue trailers for sequential viewing. Drag-and-drop functionality was implemented natively, revealing the intricacies of drag events, state transitions, and race conditions. Firestore handles persistence and real-time updates. While full WAI-ARIA compliance isn’t achievable for draggable elements due to deprecation, interactions remain fluid and intuitive, preserving usability without compromising the learning experience. Due to data limitations, data visualization features weren't possible.

This project served as a comprehensive exercise in building scalable front-end architecture, refining CSS animations, and optimizing UI responsiveness across devices. Multiple rewrites deepened understanding of React patterns, performance trade-offs, and type-safe API design, culminating in a polished flagship project that balances developer ergonomics with user experience.