Remote branches reviewed

Early structure

Module 1 concepts used

Beginner explanation

What the method does

Commented code spec

// SideBar.jsx - presenter version of the method
const links = [
  { to: "/", label: "Home", icon: Home },
  { to: "/movies", label: "Movies", icon: Film },
  { to: "/tv-shows", label: "TV Shows", icon: Tv },
  { to: "/watchlist", label: "Watchlist", icon: Bookmark }
]

// map turns each object into one visible navigation link.
{links.map(({ to, label, icon: Icon }) => (
  <NavLink to={to}>
    <Icon /> {label}
  </NavLink>
))}

Commented code spec

// Search.jsx - presenter version of the UI state flow
const [query, setQuery] = useState("")
const [results, setResults] = useState([])
const [loading, setLoading] = useState(false)

async function handleSearch(event) {
  event.preventDefault()
  // Empty input should not trigger a useless API request.
  if (!query.trim()) return

  setLoading(true)
  const data = await searchMovies(query)
  setResults(data)
  setLoading(false)
}

// Search.css handles the improved visual layout and result states.

Beginner explanation

What the method does

Commented code spec

// MovieProvider.jsx - presenter version of shared movie state
export function MovieProvider({ children }) {
  const [movies, setMovies] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Load shared TMDB data once when the provider starts.
    getPopularMovies()
      .then(setMovies)
      .finally(() => setLoading(false))
  }, [])

  return (
    <MovieContext.Provider value={{ movies, loading }}>
      {children}
    </MovieContext.Provider>
  )
}

Commented code spec

// MovieDetail.jsx - presenter version of detail composition
<InfoOverview media={movie} />

// Each section receives only the data it needs.
<CastCarousel cast={credits.cast} />
<GalleryCarousel images={images.backdrops} />
<ReviewsCarousel reviews={reviews.results} />

// Beginner meaning:
// MovieDetail controls the page data.
// Child components control one visual section each.

Beginner explanation

What the method does

Commented code spec

// Profile.jsx - presenter version of profile composition
const savedCount = watchlist.length
const watchedCount = watchlist.filter((item) => item.watched).length

// Profile stays readable because each section has its own component.
<ProfileHeader user={profile} />
<StatsRow saved={savedCount} watched={watchedCount} />
<MoodBoard items={watchlist} />

// Beginner meaning: profile data changes when watchlist state changes.

Commented code spec

// Defensive rendering pattern used for profile / genre fixes.
if (loading) {
  return <Loading />
}

if (!items || items.length === 0) {
  return <p>No results yet</p>
}

// Only map after the array exists.
return items.map((item) => (
  <MovieCard key={item.id} movie={item} />
))

// The app layout: sidebar always visible,
// page content changes based on the URL
function App() {
  return (
    <div className="app-layout">
      <Sidebar />           // always rendered
      <main>
        <Routes>
          <Route path="/"         element={<Homepage />} />
          <Route path="/movies"   element={<Movies />} />
          <Route path="/tv-shows" element={<TVShows />} />
          <Route path="/movie/:id" element={<MovieDetails />} />
          <Route path="/tv/:id"    element={<TVDetail />} />
          <Route path="/watchlist" element={<Watchlist />} />
          <Route path="*"          element={<NotFound />} />
        </Routes>
      </main>
    </div>
  )
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>        // enables URL routing
      <MovieProvider>      // TMDB data everywhere
        <WatchlistProvider> // watchlist everywhere
          <App />
        </WatchlistProvider>
      </MovieProvider>
    </BrowserRouter>
  </StrictMode>
)

• :id is dynamic — it changes for every movie or TV show
• * is a catch-all — any unknown URL shows the NotFound page
• Wrapping with providers means all pages are inside the providers and can access their data

Line-by-line explanation

// All nav links in one array
// To add a new link: just add one object here
const links = [
  { to: "/movies",    label: "Movies",   icon: Film     },
  { to: "/tv-shows",  label: "TV Shows", icon: Tv       },
  { to: "/search",    label: "Search",   icon: Search   },
  { to: "/watchlist", label: "Watchlist",icon: Bookmark },
]

// .map() builds a NavLink for each item
{links.map((link) => (
  <NavLink
    to={link.to}
    className={({ isActive }) =>
      isActive ? "sidebar__link--active" : ""
    }
  >
    <link.icon size={18} />
    <span>{link.label}</span>
  </NavLink>
))}

Concepts Used

What each part is doing

// Both movie and TV show objects are accepted
// They have different field names — we handle both:
const title    = movie.title || movie.name || "Untitled"
const released = movie.release_date || movie.first_air_date

// Detect if it's a TV show to build the right link
const isTv     = Boolean(movie.name && !movie.title)
const link     = isTv ? `/tv/${movie.id}` : `/movie/${movie.id}`

// Backdrop image builds the CSS background
const bgUrl = `https://image.tmdb.org/t/p/original${movie.backdrop_path}`

Add to Watchlist — 4 Button States

const [status, setStatus] = useState("idle")

const handleAdd = async () => {
  setStatus("saving")        // → "Saving..."
  try {
    const result = await onAdd(movie)
    setStatus(
      result?.alreadySaved ? "already-saved" : "idle"
    )                          // → "Already Saved" or "+ Add"
  } catch {
    setStatus("error")        // → "Try Again"
  }
}

Why the code is written this way

// Only movies with a backdrop image are used
const backdropMovies = useMemo(() =>
  popularMovies.filter((m) => m.backdrop_path).slice(0, 8)
, [popularMovies])

// Background image rotates every 9 seconds
useEffect(() => {
  const timer = window.setInterval(() => {
    setIndex((i) => (i + 1) % backdropMovies.length)
    // % = modulo: loops back to 0 after the last image
  }, 9000)

  return () => window.clearInterval(timer)
  // ↑ cleanup: cancels the timer when page unmounts
}, [backdropMovies.length])

// Get data + functions from context
const { popularMovies, getPopularMovies } = useMovies()
const { addToWatchlist } = useWatchlist()

// Fetch once when the page loads
useEffect(() => { getPopularMovies() }, [])

// Only movies with backdrop go into the hero
const heroMovies = useMemo(() =>
  popularMovies.filter((m) => m.backdrop_path)
, [popularMovies])

// Hero auto-rotates every 5 seconds
const [heroIndex, setHeroIndex] = useState(0)
const featured = heroMovies[heroIndex % heroMovies.length]

// Same hero component as Movies —
// but onAdd passes "tv" as the media type
<HeroBanner
  movie={featuredShow}
  featuredMovies={heroShows.slice(0, 5)}
  onAdd={(show) => addToWatchlist(show, "tv")}
/>

// Same carousel — but mediaType tells it to
// link to /tv/:id instead of /movie/:id
<MovieCarousel
  movies={popularTvShows}
  mediaType="tv"
/>

const { id } = useParams() // e.g. "12345" from /tv/12345

// requestedId = id that has FINISHED loading
const [requestedId, setRequestedId] = useState(null)

useEffect(() => {
  let cancelled = false

  getTvDetails(id).finally(() => {
    if (!cancelled) setRequestedId(id) // mark done
  })

  return () => { cancelled = true } // ← safety cleanup
}, [id])

// Only render the page when BOTH are ready
if (loading || requestedId !== id) {
  return <Loading />
}

What each guard protects

TMDB does not use one universal shape

export default function MovieDetailHero({
  movie,               // the movie or TV show object
  mediaType = "movie",  // "movie" or "tv"
  savedEntry,          // null = not in watchlist
  onAdd,               // add to watchlist
  onToggleWatched,     // mark watched/unwatched
  onRemove,            // remove from watchlist
})

// Shows seasons for TV, runtime for movies
const runtimeText = mediaType === "tv"
  ? `${movie.number_of_seasons} seasons`
  : `${movie.runtime} min`

Smart Buttons — 2 States Based on savedEntry

{savedEntry ? (
  // Already saved → show watchlist controls
  <>
    <button onClick={onToggleWatched}>
      {savedEntry.watched ? "Mark Unwatched" : "Mark Watched"}
    </button>

    <button onClick={handleRemove}>
      {removeStatus === "removing"
        ? "Removing..."
        : "Remove"}
    </button>
  </>
) : (
  // Not saved → show add button
  <button onClick={handleAdd}>+ Add to Watchlist</button>
)}

• savedEntry = null → "Add to Watchlist"
• savedEntry.watched = false → "Mark Watched"
• savedEntry.watched = true → "Mark Unwatched"

// watchlistStore.js — creates the context
export const WatchlistContext = createContext(null)

// useWatchlist.js — the hook pages import
export function useWatchlist() {
  const ctx = useContext(WatchlistContext)
  if (!ctx) throw new Error("Must be inside WatchlistProvider")
  return ctx
}

// WatchlistContext.jsx — the provider component
export function WatchlistProvider({ children }) {
  const [watchlist,          setWatchlist]          = useState([])
  const [isWatchlistLoading, setIsWatchlistLoading] = useState(true)
  ...
  return <WatchlistContext.Provider value={value}>
    {children}
  </WatchlistContext.Provider>
}

CRUD Methods

// CREATE
const addToWatchlist = useCallback(async (item, type) => {
  if (findSavedTitle(watchlist, item.id, type))
    return { alreadySaved: true }  // no duplicates
  const res = await watchlistApi.post("/watchlist", newEntry)
  setWatchlist((cur) => [...cur, res.data])
}, [watchlist])

// UPDATE
const updateWatchlistEntry = useCallback(async (id, fields) => {
  const res = await watchlistApi.put(`/watchlist/${id}`, {
    ...currentEntry, ...fields  // merge changes
  })
  setWatchlist((cur) => replaceSavedTitle(cur, res.data))
}, [watchlist])

// DELETE
const removeFromWatchlist = useCallback(async (id) => {
  await watchlistApi.delete(`/watchlist/${id}`)
  setWatchlist((cur) => removeSavedTitle(cur, id))
}, [])

Why this method is safe

// Movies have .title, TV shows have .name
export function getTitle(item) {
  return item?.title || item?.name || "Untitled"
}

// Check BOTH tmdbId AND mediaType
// (a movie and a TV show can share the same numeric ID!)
export function findSavedTitle(watchlist, tmdbId, type) {
  return watchlist.find((item) =>
    String(item.tmdbId) === String(tmdbId) &&
    getMediaType(item)  === type
  ) || null
}
// String() cast: URL params are strings ("123"),
// TMDB IDs are numbers (123) — cast both to compare safely

// Movies use .release_date, TV shows use .first_air_date
export function getReleaseDate(item) {
  return item?.release_date || item?.first_air_date || ""
}

buildWatchlistEntry — Normalises TMDB Data

export function buildWatchlistEntry(item, typeOverride) {
  return {
    mediaType:    getMediaType(item, typeOverride),
    tmdbId:       item.id,
    title:        getTitle(item),         // .title or .name
    overview:     item.overview,
    poster_path:  item.poster_path,
    release_date: getReleaseDate(item),  // release or air date
    vote_average: item.vote_average,
    watched:      false,
    addedAt:      new Date().toISOString().split("T")[0],
  }
}

• removeSavedTitle() — uses .filter() to return the list minus the deleted entry
• replaceSavedTitle() — uses .map() to swap one updated entry in the list

What this protects

// All data comes from context
const { watchlist, watchlistCounts } = useWatchlist()

// Filtering with .filter() — curriculum
const filteredTitles = watchlist.filter((title) => {
  if (filter === "movie")    return getMediaType(title) === "movie"
  if (filter === "tv")       return getMediaType(title) === "tv"
  if (filter === "watched")  return title.watched === true
  if (filter === "unwatched")return !title.watched
  return true  // "all"
})

Important: Two Different IDs

// title.id     → the backend's own ID (for CRUD calls)
// title.tmdbId → the real TMDB movie/TV ID (for links)

// Using title.id for links would go to the wrong page!
const detailPath = mediaType === "tv"
  ? `/tv/${title.tmdbId}`   // ✓ correct
  : `/movie/${title.tmdbId}`

<Link to={detailPath}><MovieCard movie={title} /></Link>

✓ Applied from Ironhack Curriculum

↑ Applied Beyond Curriculum

🗺 Routing & Setup

🧭 Navigation

🧩 UI Components

📄 Pages

🖼 Assets

🗄 Context / State

🌐 API Layer

🖥 Backend (separate repo)