CineVault

CineVault is a React 19 movie discovery application powered by the TMDB API. It is a refactored rebuild of an earlier movie project, created to improve the code structure, deployment reliability and automated testing. Users can browse popular, top-rated and upcoming films or search by title with live suggestions, then filter and sort the results.

The main challenge was coordinating API-driven categories with local filtering and sorting while keeping the interface predictable. Live search needed to coordinate debounced requests, immediate submission and keyboard-accessible suggestions. Clearing search or changing category needed to restore category browsing, while filters and sorting remained usable for both search and category results.

The application keeps the active movie category in the top-level App component and delegates discovery behaviour to MovieList. MovieList fetches the selected TMDB endpoint, stores both the original response and the visible movie collection, and manages loading, rating and sorting state. Focused Header, FilterMovies, SortMovies, MovieCard and MovieCardSkeleton components separate navigation, controls and presentation. A Headless UI combobox presents up to five suggestions with posters and release years. Title search uses a 300 ms debounce, with immediate submission through Enter or Search. Clearing the query restores the current category, and category navigation resets search. The TMDB key is supplied through a Vite environment variable and requests are made directly from the browser.

Vitest and React Testing Library cover movie discovery components and interactions, with V8 coverage generated from the current checkout. Playwright starts a local Vite server and mocks TMDB responses and images, covering page loading, rating filters, sorting, live search, immediate submission, clearing and category navigation. Suggestion tests exercise mouse and keyboard selection, dismissal, and desktop and mobile layouts. GitHub Actions runs unit, integration and browser tests for pushes and pull requests targeting main or master.