Create a new Vite + React project and verify it runs.

npm create vite@latest cinetrack -- --template react
cd cinetrack
npm install
npm run dev

Install every package we'll need across both days in one go, so we never interrupt the session for installs.

npm install -D tailwindcss @tailwindcss/vite
npm install react-router-dom firebase zod

Wire Tailwind into Vite and register our custom brand colour.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
});

@import "tailwindcss";

@theme {
  --color-brand: #c0392b;
  --color-brand-light: #e74c3c;
}

body {
  @apply bg-gray-950 text-gray-100 min-h-screen;
}

Store credentials in environment variables and create two helper files the rest of the app will import.

VITE_TMDB_TOKEN=eyJhbGc...        # your TMDB Read Access Token (long JWT)
VITE_FIREBASE_API_KEY=AIza...
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey:     import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId:  import.meta.env.VITE_FIREBASE_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);

export const auth     = getAuth(app);
export const provider = new GoogleAuthProvider();

const BASE  = 'https://api.themoviedb.org/3';
const TOKEN = import.meta.env.VITE_TMDB_TOKEN;

export const HEADERS = {
  accept: 'application/json',
  Authorization: `Bearer ${TOKEN}`,
};

export const imgUrl = (path, size = 'w500') =>
  path ? `https://image.tmdb.org/t/p/${size}${path}` : null;

Set up React Router with four routes. Each route renders a stub page for now.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import HomePage from './pages/HomePage';
import MovieDetailPage from './pages/MovieDetailPage';
import WatchlistPage from './pages/WatchlistPage';
import ProfilePage from './pages/ProfilePage';

export default function App() {
  return (
    <div className="min-h-screen bg-gray-950">
      <Navbar />
      <main className="max-w-7xl mx-auto px-4 py-8">
        <Routes>
          <Route path="/"          element={<HomePage />} />
          <Route path="/movie/:id" element={<MovieDetailPage />} />
          <Route path="/watchlist" element={<WatchlistPage />} />
          <Route path="/profile"   element={<ProfilePage />} />
        </Routes>
      </main>
    </div>
  );
}

A working nav bar with links. No auth yet — login button is added in Chapter 2 once AuthContext exists.

import { Link } from 'react-router-dom';

export default function Navbar() {
  return (
    <header className="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 h-14 flex items-center justify-between">
        <Link to="/" className="text-brand font-bold text-lg tracking-wide">
          🎬 CineTrack
        </Link>
        <nav className="flex gap-4 text-sm">
          <Link to="/"          className="text-gray-300 hover:text-white">Home</Link>
          <Link to="/watchlist" className="text-gray-300 hover:text-white">Watchlist</Link>
        </nav>
      </div>
    </header>
  );
}

Four minimal page components so routing works and returns a visible result. We replace each one chapter by chapter.

export default function HomePage() {
  return <h1 className="text-2xl font-bold">Home</h1>;
}

export default function MovieDetailPage() {
  return <h1 className="text-2xl font-bold">Movie Detail</h1>;
}

export default function WatchlistPage() {
  return <h1 className="text-2xl font-bold">Watchlist</h1>;
}

export default function ProfilePage() {
  return <h1 className="text-2xl font-bold">Profile</h1>;
}

A reusable card that displays a movie poster, title, year, and rating.

import { Link } from 'react-router-dom';
import { imgUrl } from '../lib/tmdb';

export default function MovieCard({ movie }) {
  return (
    <div className="bg-gray-900 rounded-lg overflow-hidden hover:ring-2 hover:ring-brand transition-all">
      <Link to={`/movie/${movie.id}`}>
        <img
          src={imgUrl(movie.poster_path)}
          alt={movie.title}
          className="w-full aspect-[2/3] object-cover bg-gray-800"
          loading="lazy"
        />
      </Link>
      <div className="p-3">
        <h3 className="font-semibold text-sm truncate">{movie.title}</h3>
        <p className="text-gray-400 text-xs mt-1">
          {movie.release_date?.slice(0, 4)} · ⭐ {movie.vote_average?.toFixed(1)}
        </p>
        {/* Watchlist buttons added in Chapter 6 */}
      </div>
    </div>
  );
}

A context that holds the Firebase user object and exposes login and logout. Any component calls useAuth() to get them.

import { createContext, useContext, useEffect, useState } from 'react';
import { onAuthStateChanged, signInWithPopup, signOut } from 'firebase/auth';
import { auth, provider } from '../lib/firebase';

const AuthContext = createContext(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside <AuthProvider>');
  return ctx;
}

export function AuthProvider({ children }) {
  const [user,    setUser]    = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      setUser(firebaseUser);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const login  = () => signInWithPopup(auth, provider);
  const logout = () => signOut(auth);

  if (loading) {
    return <div className="text-center py-20 text-gray-400">Loading…</div>;
  }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Wrap the whole app in AuthProvider. We only add AuthProvider now — WatchlistProvider is added in Chapter 6 after we've built the reducer and custom hooks it depends on.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <App />
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Show a "Sign in with Google" button when logged out, and the user's avatar + "Sign out" when logged in. The Profile link only appears when signed in.

import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function Navbar() {
  const { user, login, logout } = useAuth();

  return (
    <header className="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 h-14 flex items-center justify-between">
        <Link to="/" className="text-brand font-bold text-lg tracking-wide">
          🎬 CineTrack
        </Link>
        <nav className="flex items-center gap-4 text-sm">
          <Link to="/"          className="text-gray-300 hover:text-white">Home</Link>
          <Link to="/watchlist" className="text-gray-300 hover:text-white">Watchlist</Link>
          {user && (
            <Link to="/profile" className="text-gray-300 hover:text-white">Profile</Link>
          )}
          {user ? (
            <button onClick={logout} className="flex items-center gap-2 text-gray-400 hover:text-white">
              <img
                src={user.photoURL}
                alt=""
                referrerPolicy="no-referrer"
                className="w-7 h-7 rounded-full"
              />
              Sign out
            </button>
          ) : (
            <button
              onClick={login}
              className="bg-brand hover:bg-brand-light text-white px-3 py-1.5 rounded text-sm"
            >
              Sign in with Google
            </button>
          )}
        </nav>
      </div>
    </header>
  );
}

Write this on the whiteboard. Ask trainees: "what's the problem here?"

function HomePage() {
  const [query, setQuery] = useState('');
  const [genre, setGenre] = useState(null);

  // ❌ Runs on EVERY render — even if movies and genre haven't changed
  const filtered = movies.filter(m => m.genre_ids.includes(genre));
  const sorted   = [...filtered].sort((a, b) => b.popularity - a.popularity);

  // ❌ New function object created on EVERY render
  const handleChange = (val) => setQuery(val);
  // If a memoized child receives this prop, it sees a "new" function and re-renders
  // even though the function does exactly the same thing
}

Build the search input as a separate memoized component. The console.log inside is intentional — we use it in Step 8 to demonstrate the effect of useCallback.

import { memo } from 'react';

const SearchBar = memo(function SearchBar({ value, onChange }) {
  console.log('SearchBar rendered');

  return (
    <div className="relative">
      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">🔍</span>
      <input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder="Search for a movie…"
        className="w-full bg-gray-800 border border-gray-700 rounded-lg
                   pl-10 pr-4 py-3 text-sm placeholder-gray-500
                   focus:outline-none focus:ring-2 focus:ring-brand"
      />
    </div>
  );
});

export default SearchBar;

Replace the stub HomePage with a real page that fetches trending movies once on mount. No search yet — just display. Build up incrementally.

import { useState, useEffect } from 'react';
import { HEADERS } from '../lib/tmdb';
import MovieCard from '../components/MovieCard';
import SearchBar from '../components/SearchBar';

const BASE = 'https://api.themoviedb.org/3';

export default function HomePage() {
  const [query,    setQuery]    = useState('');
  const [trending, setTrending] = useState([]);
  const [loading,  setLoading]  = useState(true);
  const [error,    setError]    = useState(null);

  useEffect(() => {
    fetch(`${BASE}/trending/movie/week`, { headers: HEADERS })
      .then(r => r.json())
      .then(data => {
        setTrending(data.results || []);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <SearchBar value={query} onChange={setQuery} />

      {loading && <p className="text-gray-400 text-center py-8">Loading…</p>}
      {error   && <p className="text-red-400  text-center py-8">{error}</p>}

      {!loading && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-4">
          {trending.map(movie => (
            <MovieCard key={movie.id} movie={movie} />
          ))}
        </div>
      )}
    </div>
  );
}

Add a second useEffect that fires the search API when query changes, and cancels the previous in-flight request on cleanup.

import { useState, useEffect } from 'react';
import { HEADERS } from '../lib/tmdb';
import MovieCard from '../components/MovieCard';
import SearchBar from '../components/SearchBar';

const BASE = 'https://api.themoviedb.org/3';

export default function HomePage() {
  const [query,    setQuery]    = useState('');
  const [movies,   setMovies]   = useState([]);
  const [trending, setTrending] = useState([]);
  const [loading,  setLoading]  = useState(true);
  const [error,    setError]    = useState(null);

  // Fetch trending once on mount
  useEffect(() => {
    fetch(`${BASE}/trending/movie/week`, { headers: HEADERS })
      .then(r => r.json())
      .then(data => { setTrending(data.results || []); setLoading(false); })
      .catch(err  => { setError(err.message); setLoading(false); });
  }, []);

  // Fetch search results when query changes
  useEffect(() => {
    if (!query.trim()) { setMovies([]); return; }

    const controller = new AbortController();
    setLoading(true);
    setError(null);

    fetch(`${BASE}/search/movie?query=${encodeURIComponent(query)}&page=1`, {
      signal:  controller.signal,
      headers: HEADERS,
    })
      .then(r => r.json())
      .then(data => { setMovies(data.results || []); setLoading(false); })
      .catch(err => {
        if (err.name === 'AbortError') return;
        setError(err.message);
        setLoading(false);
      });

    return () => controller.abort();
  }, [query]);

  return (
    <div>
      <SearchBar value={query} onChange={setQuery} />

      {loading && <p className="text-gray-400 text-center py-8">Loading…</p>}
      {error   && <p className="text-red-400  text-center py-8">{error}</p>}

      {!loading && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-4">
          {(query.trim() ? movies : trending).map(movie => (
            <MovieCard key={movie.id} movie={movie} />
          ))}
        </div>
      )}
    </div>
  );
}

Add genre filter and sort controls. Use useMemo so filtering and sorting only re-run when the data or filter options change.

import { useState, useEffect, useMemo } from 'react';
import { HEADERS } from '../lib/tmdb';
import MovieCard from '../components/MovieCard';
import SearchBar from '../components/SearchBar';

const BASE = 'https://api.themoviedb.org/3';

export default function HomePage() {
  const [query,       setQuery]       = useState('');
  const [movies,      setMovies]      = useState([]);
  const [trending,    setTrending]    = useState([]);
  const [loading,     setLoading]     = useState(true);
  const [error,       setError]       = useState(null);
  const [genreFilter, setGenreFilter] = useState(null);
  const [sortBy,      setSortBy]      = useState('popularity');

  useEffect(() => {
    fetch(`${BASE}/trending/movie/week`, { headers: HEADERS })
      .then(r => r.json())
      .then(data => { setTrending(data.results || []); setLoading(false); })
      .catch(err  => { setError(err.message); setLoading(false); });
  }, []);

  useEffect(() => {
    if (!query.trim()) { setMovies([]); return; }
    const controller = new AbortController();
    setLoading(true); setError(null);
    fetch(`${BASE}/search/movie?query=${encodeURIComponent(query)}&page=1`, {
      signal: controller.signal, headers: HEADERS,
    })
      .then(r => r.json())
      .then(data => { setMovies(data.results || []); setLoading(false); })
      .catch(err => { if (err.name === 'AbortError') return; setError(err.message); setLoading(false); });
    return () => controller.abort();
  }, [query]);

  const displayMovies = useMemo(() => {
    const source = query.trim() ? movies : trending;
    const filtered = genreFilter
      ? source.filter(m => m.genre_ids?.includes(genreFilter))
      : source;
    return [...filtered].sort((a, b) => {
      if (sortBy === 'popularity')   return b.popularity - a.popularity;
      if (sortBy === 'rating')       return b.vote_average - a.vote_average;
      if (sortBy === 'release_date') return new Date(b.release_date) - new Date(a.release_date);
      return 0;
    });
  }, [movies, trending, query, genreFilter, sortBy]);

  return (
    <div>
      <SearchBar value={query} onChange={setQuery} />

      <div className="flex gap-2 my-4">
        {['popularity', 'rating', 'release_date'].map(s => (
          <button key={s} onClick={() => setSortBy(s)}
            className={`px-3 py-1 rounded-full text-sm border transition-colors
              ${sortBy === s ? 'bg-brand border-brand text-white' : 'border-gray-700 text-gray-400'}`}
          >{s.replace('_', ' ')}</button>
        ))}
      </div>

      {loading && <p className="text-gray-400 text-center py-8">Loading…</p>}
      {error   && <p className="text-red-400  text-center py-8">{error}</p>}

      {!loading && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {displayMovies.map(movie => <MovieCard key={movie.id} movie={movie} />)}
        </div>
      )}
    </div>
  );
}

Wrap handlers in useCallback so memoized child components don't re-render when unrelated state changes in the parent.

import { useState, useEffect, useMemo, useCallback } from 'react';
import { HEADERS } from '../lib/tmdb';
import MovieCard from '../components/MovieCard';
import SearchBar from '../components/SearchBar';
import GenreFilter from '../components/GenreFilter';

const BASE = 'https://api.themoviedb.org/3';

export default function HomePage() {
  const [query,       setQuery]       = useState('');
  const [movies,      setMovies]      = useState([]);
  const [trending,    setTrending]    = useState([]);
  const [loading,     setLoading]     = useState(true);
  const [error,       setError]       = useState(null);
  const [genreFilter, setGenreFilter] = useState(null);
  const [sortBy,      setSortBy]      = useState('popularity');

  useEffect(() => {
    fetch(`${BASE}/trending/movie/week`, { headers: HEADERS })
      .then(r => r.json())
      .then(data => { setTrending(data.results || []); setLoading(false); })
      .catch(err  => { setError(err.message); setLoading(false); });
  }, []);

  useEffect(() => {
    if (!query.trim()) { setMovies([]); return; }
    const controller = new AbortController();
    setLoading(true); setError(null);
    fetch(`${BASE}/search/movie?query=${encodeURIComponent(query)}&page=1`, {
      signal: controller.signal, headers: HEADERS,
    })
      .then(r => r.json())
      .then(data => { setMovies(data.results || []); setLoading(false); })
      .catch(err => { if (err.name === 'AbortError') return; setError(err.message); setLoading(false); });
    return () => controller.abort();
  }, [query]);

  const displayMovies = useMemo(() => {
    const source = query.trim() ? movies : trending;
    const filtered = genreFilter
      ? source.filter(m => m.genre_ids?.includes(genreFilter))
      : source;
    return [...filtered].sort((a, b) => {
      if (sortBy === 'popularity')   return b.popularity - a.popularity;
      if (sortBy === 'rating')       return b.vote_average - a.vote_average;
      if (sortBy === 'release_date') return new Date(b.release_date) - new Date(a.release_date);
      return 0;
    });
  }, [movies, trending, query, genreFilter, sortBy]);

  // Empty deps [] — setQuery and setGenreFilter from useState are guaranteed stable
  const handleQueryChange = useCallback((val) => setQuery(val), []);
  const handleGenreChange = useCallback((id)  => setGenreFilter(id), []);

  return (
    <div>
      <SearchBar value={query} onChange={handleQueryChange} />
      <GenreFilter selected={genreFilter} onChange={handleGenreChange} />

      <div className="flex gap-2 my-4">
        {['popularity', 'rating', 'release_date'].map(s => (
          <button key={s} onClick={() => setSortBy(s)}
            className={`px-3 py-1 rounded-full text-sm border transition-colors
              ${sortBy === s ? 'bg-brand border-brand text-white' : 'border-gray-700 text-gray-400'}`}
          >{s.replace('_', ' ')}</button>
        ))}
      </div>

      {loading && <p className="text-gray-400 text-center py-8">Loading…</p>}
      {error   && <p className="text-red-400  text-center py-8">{error}</p>}

      {!loading && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {displayMovies.map(movie => <MovieCard key={movie.id} movie={movie} />)}
        </div>
      )}
    </div>
  );
}

A filter bar that fetches TMDB genre names and lets the user click to filter the grid. Wrapped in React.memo and uses useMemo internally to sort alphabetically.

import { useState, useEffect, useMemo, memo } from 'react';
import { HEADERS } from '../lib/tmdb';

const BASE = 'https://api.themoviedb.org/3';

const GenreFilter = memo(function GenreFilter({ selected, onChange }) {
  const [genres, setGenres] = useState([]);

  useEffect(() => {
    fetch(`${BASE}/genre/movie/list`, { headers: HEADERS })
      .then(r => r.json())
      .then(data => setGenres(data.genres || []));
  }, []);

  const sorted = useMemo(
    () => [...genres].sort((a, b) => a.name.localeCompare(b.name)),
    [genres]
  );

  return (
    <div className="flex flex-wrap gap-2 my-3">
      <button onClick={() => onChange(null)}
        className={`px-3 py-1 rounded-full text-xs border transition-colors
          ${!selected ? 'bg-brand border-brand text-white' : 'border-gray-700 text-gray-400'}`}
      >All</button>
      {sorted.map(g => (
        <button key={g.id} onClick={() => onChange(g.id)}
          className={`px-3 py-1 rounded-full text-xs border transition-colors
            ${selected === g.id ? 'bg-brand border-brand text-white' : 'border-gray-700 text-gray-400'}`}
        >{g.name}</button>
      ))}
    </div>
  );
});

export default GenreFilter;

Show trainees the before and after in React DevTools Profiler. This converts abstract knowledge into something observable.

Part 1 — with useCallback (current state):

1. Open React DevTools → Profiler → click Record
2. Type a character in the search box
3. Stop recording — SearchBar should NOT appear highlighted (skipped re-render)
4. Point to the console — SearchBar's console.log did not fire

Part 2 — temporarily remove useCallback:

1. Change onChange={handleQueryChange} back to onChange={(val) => setQuery(val)}
2. Record again, type a character — SearchBar now appears in the flamegraph and the console logs
3. Revert and explain: the inline function is a new object every render → React.memo sees a prop change → re-renders

// WITHOUT useReducer — logic scattered across many setter calls
const addToWatchlist      = (movie) => setWatchlist(prev => [...prev, movie]);
const removeFromWatchlist = (id)    => setWatchlist(prev => prev.filter(m => m.id !== id));
const clearWatchlist      = ()      => setWatchlist([]);
const addToFavourites     = (movie) => setFavourites(prev => [...prev, movie]);
// ...4 more

// WITH useReducer — all logic in one testable function
dispatch({ type: 'WATCHLIST_ADD',    payload: movie });
dispatch({ type: 'WATCHLIST_REMOVE', payload: id });
dispatch({ type: 'WATCHLIST_CLEAR' });

function reducer(state, action) {
  switch (action.type) {
    case 'WATCHLIST_ADD':
      return { ...state, watchlist: [...state.watchlist, action.payload] };
    // all transitions in one place
  }
}

A pure function — no side effects, no async, no API calls — that handles all watchlist and favourites state transitions.

export const INITIAL_STATE = {
  watchlist:  [],
  favourites: [],
};

export function watchlistReducer(state, action) {
  switch (action.type) {

    case 'WATCHLIST_ADD': {
      if (state.watchlist.some(m => m.id === action.payload.id)) return state;
      return {
        ...state,
        watchlist: [...state.watchlist, { ...action.payload, addedAt: Date.now() }],
      };
    }

    case 'WATCHLIST_REMOVE':
      return {
        ...state,
        watchlist: state.watchlist.filter(m => m.id !== action.payload),
      };

    case 'WATCHLIST_CLEAR':
      return { ...state, watchlist: [] };

    case 'FAVOURITES_ADD': {
      if (state.favourites.some(m => m.id === action.payload.id)) return state;
      return {
        ...state,
        favourites: [...state.favourites, { ...action.payload, addedAt: Date.now() }],
      };
    }

    case 'FAVOURITES_REMOVE':
      return {
        ...state,
        favourites: state.favourites.filter(m => m.id !== action.payload),
      };

    default:
      return state;
  }
}

Functions that return action objects — prevents typos in type strings and makes dispatch calls readable.

export const actions = {
  addToWatchlist:      (movie) => ({ type: 'WATCHLIST_ADD',    payload: movie }),
  removeFromWatchlist: (id)    => ({ type: 'WATCHLIST_REMOVE', payload: id }),
  clearWatchlist:      ()      => ({ type: 'WATCHLIST_CLEAR' }),
  addToFavourites:     (movie) => ({ type: 'FAVOURITES_ADD',    payload: movie }),
  removeFromFavourites:(id)    => ({ type: 'FAVOURITES_REMOVE', payload: id }),
};

Show trainees that a reducer is a plain JavaScript function — no React needed to test it.

const s0 = { watchlist: [], favourites: [] };

// Add a movie
const s1 = watchlistReducer(s0, { type: 'WATCHLIST_ADD', payload: { id: 1, title: 'Inception' } });
console.log(s1.watchlist.length);  // → 1

// Add same movie again (duplicate guard)
const s2 = watchlistReducer(s1, { type: 'WATCHLIST_ADD', payload: { id: 1, title: 'Inception' } });
console.log(s2.watchlist.length);  // → still 1 (idempotent)

// Remove
const s3 = watchlistReducer(s2, { type: 'WATCHLIST_REMOVE', payload: 1 });
console.log(s3.watchlist.length);  // → 0

// Confirm original state was never mutated
console.log(s0.watchlist.length);  // → 0 ✓
console.log(s1.watchlist.length);  // → 1 ✓

Three requirements for a custom hook:

1. Name starts with use — required by the ESLint plugin. Without it, rules-of-hooks lint checks don't apply to the function
2. Calls at least one React hook inside it
3. Is a regular JavaScript function — no special registration or class

User types:   i    n    c    e    p    (pause 400ms)
Timer starts: ✓
Timer resets:      ✓    ✓    ✓    ✓
API call fires:                              ✓  (once, for "incep")

A hook that returns a delayed copy of a value — only updates after the user stops changing it for the specified delay.

import { useState, useEffect } from 'react';

export function useDebounce(value, delay = 400) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

A drop-in replacement for useState that reads from and writes to localStorage automatically.

import { useState, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const [stored, setStored] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback(
    (value) => {
      try {
        const toStore = value instanceof Function ? value(stored) : value;
        setStored(toStore);
        localStorage.setItem(key, JSON.stringify(toStore));
      } catch (err) {
        console.warn(`useLocalStorage: could not save "${key}"`, err);
      }
    },
    [key, stored]
  );

  return [stored, setValue];
}

Extract all TMDB fetch logic from HomePage into a reusable hook. This hook calls useDebounce internally so the search effect only fires after the user pauses.

import { useState, useEffect } from 'react';
import { HEADERS } from '../lib/tmdb';
import { useDebounce } from './useDebounce';

const BASE = 'https://api.themoviedb.org/3';

export function useMovies(query) {
  const [movies,   setMovies]   = useState([]);
  const [trending, setTrending] = useState([]);
  const [loading,  setLoading]  = useState(false);
  const [error,    setError]    = useState(null);

  const debouncedQuery = useDebounce(query, 400);

  useEffect(() => {
    fetch(`${BASE}/trending/movie/week`, { headers: HEADERS })
      .then(r => r.json())
      .then(d => setTrending(d.results || []))
      .catch(e => setError(e.message));
  }, []);

  useEffect(() => {
    if (!debouncedQuery.trim()) { setMovies([]); return; }

    const controller = new AbortController();
    setLoading(true);
    setError(null);

    fetch(`${BASE}/search/movie?query=${encodeURIComponent(debouncedQuery)}&page=1`, {
      signal:  controller.signal,
      headers: HEADERS,
    })
      .then(r => r.json())
      .then(data => { setMovies(data.results || []); setLoading(false); })
      .catch(err => {
        if (err.name === 'AbortError') return;
        setError(err.message);
        setLoading(false);
      });

    return () => controller.abort();
  }, [debouncedQuery]);

  return { movies, trending, loading, error };
}

Replace all the fetch state and effects in HomePage with a single hook call. Show trainees the before and after.

import { useState, useMemo, useCallback } from 'react';
import { useMovies } from '../hooks/useMovies';
import MovieCard from '../components/MovieCard';
import SearchBar from '../components/SearchBar';
import GenreFilter from '../components/GenreFilter';

export default function HomePage() {
  const [query,       setQuery]       = useState('');
  const [genreFilter, setGenreFilter] = useState(null);
  const [sortBy,      setSortBy]      = useState('popularity');

  const { movies, trending, loading, error } = useMovies(query);

  const displayMovies = useMemo(() => {
    const source = query.trim() ? movies : trending;
    const filtered = genreFilter
      ? source.filter(m => m.genre_ids?.includes(genreFilter))
      : source;
    return [...filtered].sort((a, b) => {
      if (sortBy === 'popularity')   return b.popularity - a.popularity;
      if (sortBy === 'rating')       return b.vote_average - a.vote_average;
      if (sortBy === 'release_date') return new Date(b.release_date) - new Date(a.release_date);
      return 0;
    });
  }, [movies, trending, query, genreFilter, sortBy]);

  const handleQueryChange = useCallback((val) => setQuery(val), []);
  const handleGenreChange = useCallback((id)  => setGenreFilter(id), []);

  return (
    <div>
      <SearchBar value={query} onChange={handleQueryChange} />
      <GenreFilter selected={genreFilter} onChange={handleGenreChange} />

      <div className="flex gap-2 my-4">
        {['popularity', 'rating', 'release_date'].map(s => (
          <button key={s} onClick={() => setSortBy(s)}
            className={`px-3 py-1 rounded-full text-sm border transition-colors
              ${sortBy === s ? 'bg-brand border-brand text-white' : 'border-gray-700 text-gray-400'}`}
          >{s.replace('_', ' ')}</button>
        ))}
      </div>

      {loading && <p className="text-gray-400 text-center py-8">Loading…</p>}
      {error   && <p className="text-red-400  text-center py-8">{error}</p>}

      {!loading && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {displayMovies.map(movie => <MovieCard key={movie.id} movie={movie} />)}
        </div>
      )}

      {!loading && displayMovies.length === 0 && query && (
        <p className="text-gray-500 text-center py-16">No results for "{query}"</p>
      )}
    </div>
  );
}

import { createContext, useContext, useReducer, useEffect } from 'react';
import { watchlistReducer, INITIAL_STATE } from '../store/watchlistReducer';
import { actions } from '../store/actions';
import { useLocalStorage } from '../hooks/useLocalStorage';

const WatchlistContext = createContext(null);

export function useWatchlist() {
  const ctx = useContext(WatchlistContext);
  if (!ctx) throw new Error('useWatchlist must be used inside <WatchlistProvider>');
  return ctx;
}

export function WatchlistProvider({ children }) {
  const [persisted, setPersisted] = useLocalStorage('cinetrack-state', INITIAL_STATE);

  const [state, dispatch] = useReducer(watchlistReducer, persisted);

  useEffect(() => {
    setPersisted(state);
  }, [state, setPersisted]);

  const isInWatchlist  = (id) => state.watchlist.some(m  => m.id === id);
  const isInFavourites = (id) => state.favourites.some(m => m.id === id);

  const value = {
    watchlist:  state.watchlist,
    favourites: state.favourites,
    isInWatchlist,
    isInFavourites,
    addToWatchlist:      (movie) => dispatch(actions.addToWatchlist(movie)),
    removeFromWatchlist: (id)    => dispatch(actions.removeFromWatchlist(id)),
    clearWatchlist:      ()      => dispatch(actions.clearWatchlist()),
    addToFavourites:     (movie) => dispatch(actions.addToFavourites(movie)),
    removeFromFavourites:(id)    => dispatch(actions.removeFromFavourites(id)),
  };

  return (
    <WatchlistContext.Provider value={value}>
      {children}
    </WatchlistContext.Provider>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider }      from './context/AuthContext';
import { WatchlistProvider } from './context/WatchlistContext';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <WatchlistProvider>
          <App />
        </WatchlistProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Add watchlist and favourites toggle buttons. WatchlistContext now exists so MovieCard can call useWatchlist().

import { Link } from 'react-router-dom';
import { imgUrl } from '../lib/tmdb';
import { useWatchlist } from '../context/WatchlistContext';

export default function MovieCard({ movie }) {
  const {
    isInWatchlist,    addToWatchlist,    removeFromWatchlist,
    isInFavourites,   addToFavourites,   removeFromFavourites,
  } = useWatchlist();

  const inWatchlist  = isInWatchlist(movie.id);
  const inFavourites = isInFavourites(movie.id);

  return (
    <div className="bg-gray-900 rounded-lg overflow-hidden hover:ring-2 hover:ring-brand transition-all">
      <Link to={`/movie/${movie.id}`}>
        <img
          src={imgUrl(movie.poster_path)}
          alt={movie.title}
          className="w-full aspect-[2/3] object-cover bg-gray-800"
          loading="lazy"
        />
      </Link>
      <div className="p-3">
        <h3 className="font-semibold text-sm truncate">{movie.title}</h3>
        <p className="text-gray-400 text-xs mt-1">
          {movie.release_date?.slice(0, 4)} · ⭐ {movie.vote_average?.toFixed(1)}
        </p>
        <div className="mt-2 flex gap-1">
          <button
            onClick={() => inWatchlist ? removeFromWatchlist(movie.id) : addToWatchlist(movie)}
            className={`flex-1 text-xs py-1 rounded transition-colors
              ${inWatchlist ? 'bg-brand text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}
          >
            {inWatchlist ? '✓ Watchlist' : '+ Watchlist'}
          </button>
          <button
            onClick={() => inFavourites ? removeFromFavourites(movie.id) : addToFavourites(movie)}
            className={`px-2 py-1 rounded text-sm transition-colors
              ${inFavourites ? 'text-yellow-400' : 'text-gray-600 hover:text-gray-400'}`}
          >♥</button>
        </div>
      </div>
    </div>
  );
}

import { useMemo } from 'react';
import { useWatchlist } from '../context/WatchlistContext';
import MovieCard from '../components/MovieCard';

export default function WatchlistPage() {
  const { watchlist, favourites, clearWatchlist } = useWatchlist();

  const sorted = useMemo(
    () => [...watchlist].sort((a, b) => b.addedAt - a.addedAt),
    [watchlist]
  );

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">
          Watchlist <span className="text-gray-500 text-lg">({watchlist.length})</span>
        </h1>
        {watchlist.length > 0 && (
          <button onClick={clearWatchlist} className="text-sm text-red-400 hover:text-red-300">
            Clear all
          </button>
        )}
      </div>

      {sorted.length === 0 ? (
        <p className="text-gray-500 text-center py-16">Your watchlist is empty.</p>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {sorted.map(movie => <MovieCard key={movie.id} movie={movie} />)}
        </div>
      )}

      {favourites.length > 0 && (
        <div className="mt-12">
          <h2 className="text-xl font-bold mb-4">
            Favourites <span className="text-gray-500">({favourites.length})</span>
          </h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {favourites.map(movie => <MovieCard key={movie.id} movie={movie} />)}
          </div>
        </div>
      )}
    </div>
  );
}