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, filter results by rating and change how the current collection is ordered.

The main challenge was coordinating API-driven categories with local filtering and sorting while keeping the interface predictable. Changing category needed to load a new TMDB collection, rating filters needed to remain reversible, and multiple sorting options needed to update the visible movies without mutating the original API 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. The TMDB key is supplied through a Vite environment variable and requests are made directly from the browser.

The project has 30 passing Vitest and React Testing Library tests across six files. They cover category endpoints, loading skeletons, rendered movie details, TMDB links, rating filters, filter toggling, sorting controls, empty results and navigation states. The current report shows 95.52% statement and line coverage, 96% branch coverage and 95.65% function coverage. Four Playwright tests run against the deployed Netlify site in Chromium and cover page loading, rating filtering and sorting. Separate GitHub Actions workflows run both test suites for pushes and pull requests.