Beginner~4 hours
Weather Dashboard
Fetch live weather from a public API and render it with Server Components, caching, and a clean responsive layout. A great first taste of data fetching.
Data FetchingCachingAPI
1
Get an API key
Sign up for a free weather API (e.g. OpenWeather) and store the key in `.env.local`.
2
Fetch in a Server Component
Make the page an async Server Component and `await fetch()` the current conditions for a city.
3
Cache and revalidate
Use `next: { revalidate: 600 }` so the data refreshes every 10 minutes instead of on every request.
4
Search by city
Add a form that updates the URL `searchParams`, and read them in the page to fetch a different city.
5
Polish the UI
Show a loading skeleton via `loading.tsx` and handle the 'city not found' error gracefully.
Finished building?
Ship it and share it in a community challenge — or move on to the next project.