Weather Dashboard with APIs
Build a real-time weather dashboard using OpenWeatherMap API, RxJS debounceTime/switchMap, signals, interceptors, and error handling.
What We'll Build
- Real-time weather dashboard for any city
- City search with debounce (500ms)
- Current weather: temperature, humidity, wind
- 5-day forecast with min/max temps
- Loading spinner, error messages, retry button
"Hyderabad ka mausam โ abhi kitni garmi hai, pata karo"
Uses: HTTP (Ch 7), RxJS operators (Ch 9.4), Signals (Ch 10), Interceptors (Ch 7.3), Pipes (Ch 4.3).
API Setup
OpenWeatherMap: free tier, 1000 calls/day. Sign up, get API key.
// Endpoint
api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid=KEY&units=metricCreate interceptor to add API key automatically (Ch 7.3).
"API key = restaurant ka membership card โ bina ke andar nahi jaoge"
Current Weather Feature
- City search input with debounceTime(500) (Ch 9.4)
- switchMap to cancel previous search
- toSignal() to convert Observable to signal (Ch 10.5)
- Display: temperature, humidity, wind speed, icon
"Type karo city name โ 500ms ruko โ API call โ dikhao"
5-Day Forecast Feature
- Separate API call for forecast
- Group by day, show min/max temp
- @for loop with date pipe formatting (Ch 4.3)
"5 din ka forecast โ plan your week"
Error Handling & Loading States
- Loading spinner while API calls
- City not found error โ friendly message
- Network error โ "Check your internet"
- Retry button on error
"Error handling = umbrella โ barish aaye toh ready ho"
Project Summary
- debounceTime + switchMap for search (prevents excessive API calls)
- toSignal() converts Observable to signal
- Interceptor adds API key to all requests
- Loading, success, and error states with signals
- 5-day forecast grouped by day
Want to track your progress?
Log in to save your place and pick up where you left off.
Progress track karna chahte ho?
Login karo apni progress save karne ke liye aur jahan chhoda tha wahan se shuru karo.
Login