Intermediate project
Weather Dashboard
Handle real API loading, empty, and error states with a focused, single-purpose widget.
The problem
A weather widget is a small, self-contained way to practice the request-state modeling used throughout API Explorer and the capstone.
User stories
- As a user, I want to search for a city and see its current weather, so I can plan my day.
- As a user, I want a clear message if the city isn't found, so I'm not left confused.
Planning checklist
- Choose a weather API with a free tier for local development
- List the exact fields the UI needs from the response
Suggested data structure
const weatherState = { status: "idle", city: "", data: null, error: null };UI requirements
- A city search input
- A weather summary card
- Distinct loading, error, and not-found states
Build milestones
Check off each milestone as you complete it — saved to this device.
…
0%Testing checklist
- A misspelled city shows a clear not-found message, not a crash
- A network failure shows a retry-capable error state
Completion criteria
…
0%Progressive support
RequirementsPlanningStarterHintsReference Solution
Bonus features
- Add a 5-day forecast
- Remember the last searched city
- Add unit toggling (°C/°F)