Movie Search App

A movie search app depends on user input, but that does not mean every character should immediately trigger a new API request. If the user types “Batman,” the app might send six requests: “B,” “Ba,” “Bat,” “Batm,” “Batma,” and “Batman.” This wastes API quota, makes the interface feel unstable, and increases the chance that older responses arrive after newer ones.

Problematic approach:

          function MovieSearch() {
            const [query, setQuery] = useState("");
            const [movies, setMovies] = useState([]);

            async function handleChange(event) {
              const value = event.target.value;

              setQuery(value);

              const response = await fetch(`/api/movies?search=${value}`);
              const data = await response.json();

              setMovies(data.results);
            }

            return (
              <TextField
                label="Search movies"
                value={query}
                onChange={handleChange}
              />
            );
          }

This code sends a request immediately after every change. It also does not protect against outdated responses arriving in the wrong order.

Better approach:

          function MovieSearch() {
            const [query, setQuery] = useState("");
            const [debouncedQuery, setDebouncedQuery] = useState("");
            const [movies, setMovies] = useState([]);
            const [loading, setLoading] = useState(false);

            useEffect(() => {
              const timeoutId = setTimeout(() => {
                setDebouncedQuery(query.trim());
              }, 500);

              return () => clearTimeout(timeoutId);
            }, [query]);

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

              const controller = new AbortController();

              async function searchMovies() {
                setLoading(true);

                try {
                  const response = await fetch(
                    `/api/movies?search=${encodeURIComponent(debouncedQuery)}`,
                    { signal: controller.signal }
                  );

                  const data = await response.json();

                  setMovies(data.results || []);
                } catch (error) {
                  if (error.name !== "AbortError") {
                    setMovies([]);
                  }
                } finally {
                  setLoading(false);
                }
              }

              searchMovies();

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

            return (
              <TextField
                label="Search movies"
                value={query}
                onChange={(event) => setQuery(event.target.value)}
              />
            );
          }

Pay attention to: Debounce search input and cancel outdated requests. This makes the app feel smoother, protects API limits, and prevents old results from replacing the latest search.

Filtering and sorting should usually be derived from the original search results. A common mistake is overwriting the main movie array every time the user changes a filter. After a few filter changes, the app no longer has the original list, so clearing filters or changing sort order produces incorrect results.

Problematic code:

          const [movies, setMovies] = useState([]);

          function filterByYear(year) {
            const filteredMovies = movies.filter((movie) => {
              return movie.releaseYear === year;
            });

            setMovies(filteredMovies);
          }

          function sortByRating() {
            const sortedMovies = [...movies].sort((a, b) => {
              return b.rating - a.rating;
            });

            setMovies(sortedMovies);
          }

This destroys the original result set. If the user removes the year filter, there is no clean way to restore the previous API response without another request.

Better approach:

          const [movies, setMovies] = useState([]);
          const [selectedYear, setSelectedYear] = useState("all");
          const [sortMode, setSortMode] = useState("relevance");

          const visibleMovies = useMemo(() => {
            let nextMovies = [...movies];

            if (selectedYear !== "all") {
              nextMovies = nextMovies.filter((movie) => {
                return String(movie.releaseYear) === selectedYear;
              });
            }

            if (sortMode === "rating-desc") {
              nextMovies.sort((a, b) => b.rating - a.rating);
            }

            if (sortMode === "year-desc") {
              nextMovies.sort((a, b) => b.releaseYear - a.releaseYear);
            }

            return nextMovies;
          }, [movies, selectedYear, sortMode]);

Template usage:

          <MovieGrid movies={visibleMovies} />

Pay attention to: Keep API results as source data. Filters and sorting should create a derived visible list, not permanently modify the original response.

Movie APIs do not always return complete data. Some movies have no poster, no rating, no description, or an unexpected release date. If your card component assumes every field exists, the layout may show broken images, undefined text, or empty UI blocks. This makes the app feel unfinished even if the search logic works.

Problematic component:

          function MovieCard({ movie }) {
            return (
              <Card>
                <CardMedia
                  component="img"
                  image={`https://image.tmdb.org/t/p/w500${movie.posterPath}`}
                  alt={movie.title}
                />

                <CardContent>
                  <Typography variant="h6">{movie.title}</Typography>
                  <Typography>{movie.releaseDate.slice(0, 4)}</Typography>
                  <Typography>{movie.rating.toFixed(1)}</Typography>
                </CardContent>
              </Card>
            );
          }

This can break if posterPath, releaseDate, or rating is missing. Beginner projects often ignore these edge cases because test data looks clean.

Better approach:

          const POSTER_BASE_URL = "https://image.tmdb.org/t/p/w500";
          const FALLBACK_POSTER = "/images/movie-placeholder.png";

          function getReleaseYear(releaseDate) {
            if (!releaseDate) {
              return "Unknown year";
            }

            return releaseDate.slice(0, 4);
          }

          function MovieCard({ movie }) {
            const posterUrl = movie.posterPath
              ? `${POSTER_BASE_URL}${movie.posterPath}`
              : FALLBACK_POSTER;

            return (
              <Card>
                <CardMedia
                  component="img"
                  image={posterUrl}
                  alt={movie.title ? `${movie.title} poster` : "Movie poster"}
                />

                <CardContent>
                  <Typography variant="h6">
                    {movie.title || "Untitled movie"}
                  </Typography>

                  <Typography color="text.secondary">
                    {getReleaseYear(movie.releaseDate)}
                  </Typography>

                  <Typography>
                    {movie.rating ? movie.rating.toFixed(1) : "No rating yet"}
                  </Typography>
                </CardContent>
              </Card>
            );
          }

Pay attention to: Design movie cards for incomplete API data. Add fallback posters, safe date formatting, missing rating labels, and clean empty text states.

Search results and movie details are related, but they are not the same state. Search results usually contain lightweight data for cards. Detail views often require a separate request for cast, overview, runtime, genres, trailers, or recommendations. A common mistake is using the selected card object as the full detail object and then mutating it directly.

Problematic approach:

          const [movies, setMovies] = useState([]);
          const [selectedMovie, setSelectedMovie] = useState(null);

          function openMovie(movie) {
            setSelectedMovie(movie);
          }

          function MovieDetailsDialog() {
            return (
              <Dialog open={Boolean(selectedMovie)}>
                <h2>{selectedMovie.title}</h2>
                <p>{selectedMovie.overview}</p>
                <p>Runtime: {selectedMovie.runtime} minutes</p>
              </Dialog>
            );
          }

The result item may not contain runtime or full genre data. The dialog can show empty fields or force the card object to carry too much information.

Better approach:

          const [selectedMovieId, setSelectedMovieId] = useState(null);
          const [movieDetails, setMovieDetails] = useState(null);
          const [detailsLoading, setDetailsLoading] = useState(false);

          useEffect(() => {
            if (!selectedMovieId) return;

            const controller = new AbortController();

            async function loadMovieDetails() {
              setDetailsLoading(true);

              try {
                const response = await fetch(
                  `/api/movies/${selectedMovieId}`,
                  { signal: controller.signal }
                );

                const data = await response.json();

                setMovieDetails(data);
              } finally {
                setDetailsLoading(false);
              }
            }

            loadMovieDetails();

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

Dialog usage:

          <MovieDetailsDialog
            open={Boolean(selectedMovieId)}
            loading={detailsLoading}
            movie={movieDetails}
            onClose={() => {
              setSelectedMovieId(null);
              setMovieDetails(null);
            }}
          />

Pay attention to: Store the selected movie ID separately from the details payload. This keeps the result list lightweight and lets the detail view manage its own loading, error, and empty states.

A Movie Search App has several “nothing to show” moments: before the user searches, after a failed request, after a query returns no matches, or when filters hide all results. If all of these states render the same blank screen, users cannot tell what happened. Clear empty states make a small app feel much more complete.

Problematic rendering:

          function MovieResults({ movies }) {
            return (
              <Grid container spacing={2}>
                {movies.map((movie) => (
                  <Grid item xs={12} sm={6} md={4} key={movie.id}>
                    <MovieCard movie={movie} />
                  </Grid>
                ))}
              </Grid>
            );
          }

If movies is empty, the component renders nothing. The user does not know whether they should search, wait, retry, or change filters.

Better approach:

          function MovieResults({ movies, query, loading, error, filtersActive }) {
            if (loading) {
              return <MovieGridSkeleton count={8} />;
            }

            if (error) {
              return (
                <Alert severity="error">
                  Movies could not be loaded. Please try again.
                </Alert>
              );
            }

            if (!query) {
              return (
                <EmptyState
                  title="Search for a movie"
                  description="Type a title to find movies, view details, and compare results."
                />
              );
            }

            if (!movies.length && filtersActive) {
              return (
                <EmptyState
                  title="No movies match your filters"
                  description="Try changing the year, rating, or sort options."
                />
              );
            }

            if (!movies.length) {
              return (
                <EmptyState
                  title="No results found"
                  description={`No movies matched "${query}". Try another title.`}
                />
              );
            }

            return (
              <Grid container spacing={2}>
                {movies.map((movie) => (
                  <Grid item xs={12} sm={6} md={4} key={movie.id}>
                    <MovieCard movie={movie} />
                  </Grid>
                ))}
              </Grid>
            );
          }

Pay attention to: Separate initial state, loading state, error state, no-result state, and filter-empty state. A good search interface should always explain what the user can do next.