CodingNic

Build Movie Discovery

Make the Browse Controls Drive the Results

Build Movie Discovery 4 min read

Make the Browse Controls Drive the Results

Make the Browse Controls Drive the Results

The home page is now connected to live movie data, but the controls are still decorative. In this module you will turn them into the actual discovery system: search, genre filtering, sorting, Surprise Me, and pagination.

The important decision in this module is where the current browse selection lives. Instead of keeping the whole selection in component state, Matinee uses the URL as the source of truth for the search query, active genres, sort choice, and page number. That means the current discovery view can survive a refresh, be shared as a link, and be revisited with browser navigation.

You will build this behavior incrementally inside FilterBar.tsx and app/page.tsx. Each new control will update the URL, the home page will read those parameters, and discoverMovies will turn them into the appropriate TMDB request.

By the end of the module, changing a control will cause a real browse request, fast typing will be debounced, genre chips will toggle correctly, sorting and pagination will work, and Surprise Me will open one of the movies currently on screen.