Weather Dashboard
api
weather
dashboard

Weather Dashboard

Build a weather dashboard that displays current conditions and forecasts using a weather API

Time Breakdown

Planning: ~1 hours
Coding: ~2 hours
Testing: ~1 hours

Difficulty: Beginner Friendly

Weather Dashboard

Create a beautiful weather dashboard that provides current conditions and forecasts.

Example Code

async function fetchWeather(city: string) {
  const API_KEY = process.env.NEXT_PUBLIC_WEATHER_API_KEY;
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`
  );
  return response.json();
}

Learning Outcomes

  • Working with REST APIs
  • Handling API keys securely
  • Managing application state
  • Creating responsive layouts
  • Implementing error handling

Project Requirements

Progress Tracker

0 of 7 completed
  • Display current weather conditions
  • Show 5-day weather forecast
  • Allow location search
  • Display temperature in Celsius/Fahrenheit
  • Show weather icons and conditions
  • Implement loading states
  • Handle API errors gracefully

Share Project