Netflix GPT

Browsing endless rows of titles is slow when you already know the feeling you want ("a feel-good Hindi comedy", "a mind-bending thriller like Inception"). Netflix GPT recreates the familiar Netflix browsing experience and adds a natural-language search: GPT turns the request into movie names, and TMDB turns those names into real titles with posters and details.

• Recreate the Netflix browse experience: an auto-playing trailer hero and scrollable rows of real, up-to-date movies.
• Let users search by meaning, not just by title, using GPT as a recommendation engine.
• Protect the app behind real authentication, with sign-up, sign-in and sign-out.
• Keep it fast: lazy-loaded routes, cached API data and skeleton loaders instead of blank screens.

• Authentication with Firebase: sign up (name and avatar saved to the profile), sign in, sign out, with email and strong-password validation.
• Protected routes: /browse and movie pages redirect to login when signed out, and the login page is skipped when already signed in.
• Hero section: the top "Now Playing" movie's trailer auto-plays (muted, with a mute toggle) behind its title and overview.
• Movie rows: Now Playing, Popular, Top Rated and Upcoming, live from the TMDB API.
• GPT search: describe what you want in plain words; GPT suggests 5 movies, and each is matched to real TMDB results.
• Multi-language search UI: English, Hindi and Spanish.
• Movie details page: overview, top 10 cast, YouTube trailer and similar movies.
• Shimmer loaders for every section, and a friendly 404 page.

Global, shared data lives in a single Redux store split into five slices, one per concern. Components never fetch directly: custom hooks fetch from the APIs and dispatch into the store, and components only read with useSelector. Purely local UI state (form inputs, the "auth checked" flag, mute toggle) stays in the component with useRef and useState.

The store

// utils/appStore.js
const appStore = configureStore({
  reducer: {
    user: userReducer,               // who is signed in
    movies: moviesReducer,           // browse rows + hero trailer
    gpt: gptReducer,                 // GPT search view and results
    config: configReducer,           // UI language
    movieDetails: movieDetailsReducer, // the open movie page
  },
});

// App.jsx
<Provider store={appStore}>
  <Body />
</Provider>

The slices

How data flows

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      const { uid, email, displayName, photoURL } = user;
      dispatch(addUser({ uid, email, displayName, photoURL }));
    } else {
      dispatch(removeUser());
      dispatch(resetGptSearch()); // no stale search results for the next user
    }
    setAuthChecked(true);
  });

  return () => unsubscribe();
}, [dispatch]);

const useNowPlayingMovies = () => {
  const dispatch = useDispatch();
  const nowPlayingMovies = useSelector((store) => store.movies.nowPlayingMovies);

  const getNowPlayingMovies = async () => {
    const data = await fetch("https://api.themoviedb.org/3/movie/now_playing?&page=1", OPTIONS);
    const json = await data.json();
    dispatch(addNowPlayingMovies(json.results));
  };

  useEffect(() => {
    !nowPlayingMovies && getNowPlayingMovies(); // only fetch if not cached
  }, []);
};

dispatch(setGptSearchLoading(true));

try {
  const gptResults = await openAi.chat.completions.create({
    model: "gpt-5.4-mini",
    messages: [{ role: "user", content: gptQuery }],
  });

  const gptMovies = gptResults.choices[0].message.content
    .split(",")
    .map((movie) => movie.trim());

  // Look up all five movies at the same time
  const tmdbResults = await Promise.all(gptMovies.map(searchMovieTMDB));

  dispatch(addGptMovieResult({ movieNames: gptMovies, movieResults: tmdbResults }));
} catch {
  dispatch(setGptSearchError("Something went wrong while searching. Please try again."));
}

startMovieDetailsFetch: (state, action) => {
  state.movieId = action.payload; // the movie that's open now
  state.isLoading = true;
  state.details = null;
  // ...reset cast, trailer, similar
},
setMovieDetails: (state, action) => {
  const { movieId, details, cast, trailerKey, similarMovies } = action.payload;
  if (state.movieId !== movieId) return; // stale response - ignore it
  state.details = details;
  state.cast = cast;
  state.trailerKey = trailerKey;
  state.similarMovies = similarMovies;
  state.isLoading = false;
},

Design decisions

• Why Redux instead of Context? The user, the GPT toggle and the language are read in places far apart in the tree (header, browse page, search, protected routes). Redux Toolkit keeps that shared state in one predictable place with DevTools support, and useSelector re-renders only the components that read the changed value.
• One slice per concern. user, movies, gpt, config and movieDetails change for different reasons, so each has its own small reducer and actions instead of one large object.
• Fetching lives in custom hooks, not components. Components stay presentational: they read from the store and render. Hooks own the API calls and dispatch.
• The store is the cache. Hooks check the slice before fetching, so data survives view switches without a separate caching library.
• Explicit async states. isLoading and errorMessage are part of the gpt and movieDetails slices, which drive shimmer loaders, disabled inputs and friendly error messages.
• Reset on sign-out. resetGptSearch returns the slice to its initial state, so the next user never sees the previous user's results.
• Local state stays local. Form fields use useRef (no re-render per keystroke) and one-off UI flags use useState; only data shared across components goes into Redux.