Fetch and Display a Movie List

The Scenario

A streaming startup wants to build a simple web client to display their top movies. Before building the full app, they want a prototype that fetches the top 20 movies from a public API and renders them nicely on the page.

The Brief

Using React (or vanilla JS), make a GET request to a public movie API (e.g., TMDB or a mock JSON endpoint). Display the title, release year, and poster image for each movie in a responsive grid. Handle the loading state and display a simple error message if the fetch fails.

Deliverables

• A code snippet of the data fetching logic (e.g., a custom hook or useEffect block)
• The component code that renders the grid and handles loading/error states
• A brief explanation of how you handle the loading state while waiting for the API

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.