Mission 4 of 12
Build an Activity Discovery Dashboard
Build a dashboard that pulls live activity ideas from a public API and lets users browse and filter them. Your first taste of working with real data over the network.
By the end of this mission: “I can fetch live data from a REST API and render it dynamically in the UI.”
The tech stack for this mission
HTML5
CSS3
JavaScript
Bootstrap
VercelWhat you learn, checkpoint by checkpoint
Checkpoint A
Fetch activities from a public REST API and read the JSON
- Call a public REST API with fetch and await the JSON response
- Read and understand the shape of the JSON you get back
- Handle the request lifecycle - start, success and failure
Checkpoint B
Render cards and handle loading and error states
- Render an activity card for each item returned by the API
- Show a loading state while the request is in flight
- Handle and display errors when the API call fails
Checkpoint C
Add filtering and deploy the finished dashboard
- Add filters (by type, participants or price) over the fetched data
- Handle the no-results state cleanly
- Polish the UI with Bootstrap and deploy the dashboard
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 activity dashboard using a live API + Loom
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.