Mission 7 of 12
Build a Movie Search Application with Live Data
Build a movie search app in React that queries a live movie API, handles search state, and gracefully handles loading, errors and empty results.
By the end of this mission: “I can build a responsive React app that fetches and displays live API data on demand.”
The tech stack for this mission
React
Bootstrap
VercelWhat you learn, checkpoint by checkpoint
Checkpoint A
Build the UI and connect to a live movie API
- Build the search UI and component structure in React
- Call a live movie API with fetch and render the results grid
- Store the query and results in React state with useState
Checkpoint B
Handle search, state, loading and error cases
- Re-fetch the API when the user submits a new search
- Show loading and error states while waiting on the response
- Handle empty queries and no-results cleanly
Checkpoint C
Make it responsive and deploy
- Make the layout responsive across mobile and desktop
- Polish the visual styling and interaction details
- Review the full app and deploy to Vercel
AI companion mode · AI as Tutor
Most guidance · you still write first
Companion explains concepts, walks you through setup, and reviews your code. You still write the first draft and must explain what you shipped.
What proves you’re done
Deployed React movie search app + Loom walkthrough
Every mission ships something real and public. If you can’t explain it, you can’t submit it.
Reading is not building.
This mission is part of the paid 12-week programme - but the way we teach is free to try. The free trial puts you inside Sigmo, the learning portal our students use daily, with the 6 Projects in 6 Days precourse: real projects, real code, published to your own GitHub.
Start the free trialReady for the real thing?
The AI-Native Software Development Programme - all 12 missions with a live cohort, daily Buildroom, and mentors watching your back.