Build a Weather Dashboard with API Integration
Build a weather dashboard that fetches real-time data from a weather API, displays forecasts, and implements caching for performance.
Setting up the weather API
A weather dashboard teaches you API integration, data transformation, caching, and responsive UI design — skills that apply to any data-driven application. You will use the OpenWeatherMap API, which has a free tier allowing 1000 calls per day. Sign up at openweathermap.org and get your API key from the API Keys section of your account. It takes about 10 minutes for a new key to activate. Ask Claude Code: Create a Next.js project with TypeScript and Tailwind for a weather dashboard. Set up environment variables for the OpenWeatherMap API key. Create an API utility at src/lib/weather-api.ts with typed interfaces for the API responses. The OpenWeatherMap API returns deeply nested JSON. The current weather endpoint (/data/2.5/weather) returns temperature, humidity, wind speed, weather description, and an icon code. The forecast endpoint (/data/2.5/forecast) returns 5-day forecasts in 3-hour intervals. Ask Claude Code: Define TypeScript interfaces for the current weather response and the forecast response. Map the raw API fields to cleaner names — dt becomes timestamp, main.temp becomes temperature, weather[0].description becomes description. Create two API functions: getCurrentWeather(city: string) and getForecast(city: string). Each should make a fetch request, parse the response, transform it into your clean types, and handle errors. Common error: 401 Unauthorized means your API key is invalid or not yet activated. 404 means the city name was not found. 429 means you have exceeded the rate limit. Ask Claude Code: Add proper error handling for all API error codes. Return user-friendly error messages instead of raw API errors.
Building the current weather display
The main dashboard shows current conditions at a glance. Ask Claude Code: Create a WeatherCard component that displays the current temperature (large, prominent), weather description and icon, feels-like temperature, humidity percentage, wind speed and direction, visibility distance, and atmospheric pressure. Use the OpenWeatherMap icon codes to display weather icons — the URL format is https://openweathermap.org/img/wn/{icon}@2x.png where {icon} is the code from the API response. Ask Claude Code: Create a temperature unit toggle that switches between Celsius and Fahrenheit. Store the preference in localStorage so it persists. Convert temperatures on the client side rather than making new API calls — the API returns Kelvin by default, so convert to Celsius (subtract 273.15) or Fahrenheit (multiply by 9/5 then add 32). Add a location search bar at the top of the dashboard. Ask Claude Code: Build a search component with autocomplete. As the user types a city name, show suggestions from the OpenWeatherMap geocoding API (/geo/1.0/direct). Debounce the search input by 300 milliseconds to avoid excessive API calls. When the user selects a city, fetch and display its weather. Add geolocation support: when the user first loads the dashboard, request their browser location and show local weather automatically. Ask Claude Code: Add a Get My Location button that uses the browser Geolocation API to get coordinates, then fetches weather using the lat/lon endpoint instead of the city name endpoint. Handle the case where the user denies location permission with a friendly message suggesting manual search.
Five-day forecast with charts
The forecast section shows upcoming weather so users can plan ahead. The API returns data in 3-hour intervals, but most users want daily summaries. Ask Claude Code: Create a forecast processing function that takes the raw 3-hour forecast data and aggregates it into daily summaries. For each day, calculate: the high temperature (maximum across all intervals), the low temperature (minimum across all intervals), the dominant weather condition (most frequent description), total precipitation (sum of rain and snow volumes), and average wind speed. Display the 5-day forecast as a row of daily cards, each showing the day name, weather icon, high and low temperatures, and precipitation probability. Ask Claude Code: Build a ForecastRow component that displays daily forecast cards in a horizontally scrollable row on mobile and a grid on desktop. Add a chart showing the temperature trend over the next 5 days. Ask Claude Code: Create a temperature chart using SVG (no charting library needed for this). Plot the high temperatures as a line and the low temperatures as another line. Add dots at each data point with hover tooltips showing the exact temperature and day. Fill the area between the two lines with a gradient to visually represent the daily temperature range. The chart should be responsive — full width on desktop, horizontally scrollable on mobile. Below the chart, add an hourly forecast for the selected day. When the user clicks a day in the forecast row, show the 3-hour breakdown for that day. Ask Claude Code: Create an HourlyForecast component that displays temperature, weather icon, precipitation chance, and wind speed for each 3-hour interval. Common error: timezone issues — the API returns timestamps in UTC. Convert them to the local timezone of the queried city, not the user's browser timezone, using the timezone offset from the API response.
Caching and performance optimisation
Weather data does not change every second. Calling the API on every page load wastes your rate limit and slows the user experience. Ask Claude Code: Implement a caching layer at src/lib/weather-cache.ts. Cache API responses in memory with a configurable TTL (time to live). Current weather should be cached for 10 minutes — weather does not change faster than that. Forecasts should be cached for 30 minutes. Use a Map with city names as keys and objects containing the response data and the timestamp it was cached. Before making an API call, check the cache. If the cached data is fresh (timestamp plus TTL is greater than now), return the cached data. If stale, fetch new data, update the cache, and return. Ask Claude Code: Add a cache status indicator to the UI. Show when the data was last updated and whether the current display is from cache or a fresh API call. Add a refresh button that bypasses the cache and fetches new data. For server-side rendering, use Next.js fetch caching. Ask Claude Code: Convert my API calls to use Next.js server components with fetch and the revalidate option. Set revalidate to 600 (10 minutes) for current weather and 1800 (30 minutes) for forecasts. This means the server caches the API response and serves it to all users, only re-fetching when the cache expires. Implement stale-while-revalidate: serve the cached data immediately while fetching fresh data in the background. The next request gets the fresh data. This gives users instant loading with data that is at most one TTL period old. Ask Claude Code: Implement stale-while-revalidate for the weather data. Show a subtle loading indicator when background refresh is happening. Common error: if your cached data seems to never update, check that your cache key includes all relevant parameters (city name, units, API endpoint). A cache key of just the city name will return current weather data when you request a forecast.
Responsive design and weather visualisations
A weather dashboard must look great on phones — that is where most people check weather. Ask Claude Code: Make the dashboard fully responsive. On mobile (under 640px): single column layout, current weather card takes full width, forecast scrolls horizontally, chart is full width with horizontal scroll for details. On tablet (640 to 1024px): two-column layout with current weather and forecast side by side. On desktop (over 1024px): three-column layout with current weather, forecast, and additional details. Add weather-appropriate visual design. Ask Claude Code: Create dynamic backgrounds or colour themes based on the current weather condition. Sunny weather should have a warm yellow-orange gradient. Rainy weather should have a cool blue-grey gradient. Snowy weather should have a light blue-white palette. Cloudy weather should have a muted grey palette. Transition smoothly between themes when the weather data updates. Add a weather map showing the selected city's location. Ask Claude Code: Embed a simple map using an iframe from OpenStreetMap showing the weather station location. Add weather overlay layers from OpenWeatherMap's tile API — temperature, precipitation, and cloud cover layers that can be toggled. Implement dark mode that respects the system preference. Ask Claude Code: Add dark mode support using Tailwind's dark variant. Toggle based on the system preference (prefers-color-scheme media query) with a manual override button. Persist the preference in localStorage. Ensure all weather cards, charts, and the map look good in both light and dark modes. Common error: weather icons from OpenWeatherMap have transparent backgrounds that look wrong on dark backgrounds. Create a subtle backdrop for icons or use a custom icon set with proper theming.
Favourites, history, and offline support
Turn the dashboard from a single-use tool into a personal weather station. Ask Claude Code: Add a favourites system. Users can save multiple cities as favourites. Store favourites in localStorage as an array of city objects (name, coordinates, country code). Show favourite cities as quick-access buttons below the search bar. On page load, fetch weather for all favourites and show them as a compact grid of mini weather cards — city name, current temperature, and weather icon. Add search history: remember the last 10 searched cities and show them as recent searches when the search bar is focused. Ask Claude Code: Create a weather comparison view. The user selects 2 to 4 cities from their favourites and sees their weather side by side — temperatures, conditions, and forecasts in a comparison table. Highlight the warmest, coldest, wettest, and windiest cities. Add weather alerts. Ask Claude Code: Check the OpenWeatherMap alerts endpoint for the selected city and display any active weather warnings prominently at the top of the dashboard. Use red backgrounds for severe warnings and yellow for moderate warnings. Add offline support with a service worker. Ask Claude Code: Configure a service worker that caches the application shell (HTML, CSS, JavaScript) and the most recent weather data. When the user is offline, show the last cached weather with a clear indicator that the data is from a specific timestamp and may be outdated. When connectivity returns, automatically refresh. Deploy the completed dashboard to Vercel. Ask Claude Code: Configure the project for Vercel deployment. Set up the environment variable for the API key in the Vercel dashboard. Test the deployed version with different cities, different devices, and with network throttling to verify the caching and offline behaviour work correctly.
Working with APIs
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson