Intermediate project · Week 6
API Explorer
Fetch public data with loading, empty, success, retry, and error states.
The problem
Every real app talks to at least one API — this project forces you to handle every realistic outcome of a network call, not just the happy path.
User stories
- As a user, I want to search for public data and see results, so I can explore it.
- As a user, I want a clear loading indicator while a request is in flight, so I know the app is working.
- As a user, I want a retry option when a request fails, so a flaky network doesn't dead-end me.
Planning checklist
- Choose a public API with no required authentication for local development
- List every UI state a single request can produce (idle, loading, success, empty, error)
- Decide how retries and repeated searches are handled
Suggested data structure
const requestState = { status: "idle", data: null, error: null };
// status: "idle" | "loading" | "success" | "empty" | "error"UI requirements
- A search input and submit control
- Distinct visuals for loading, empty, error, and success states
- A retry button visible only in the error state
Build milestones
Check off each milestone as you complete it — saved to this device.
…
0%Testing checklist
- A failed request shows the error state, not a blank screen
- An empty result set shows a distinct empty state, not the error state
- Retrying after a failure re-issues the request
Completion criteria
…
0%Progressive support
RequirementsPlanningStarterHintsReference Solution
Bonus features
- Debounce the search input
- Cache recent results in memory
- Add pagination for large result sets