Back to battles
mediumactive

Weather Dashboard

Build a weather dashboard that fetches real-time weather data and displays current conditions, forecasts, and charts.

30 min limit1 participants
PRD
# Weather Dashboard PRD

## Overview
Build a weather dashboard that displays current weather and forecasts for user-selected locations.

## Requirements
- Search for a city by name with autocomplete suggestions
- Display current weather: temperature, humidity, wind speed, conditions, icon
- 5-day forecast with daily high/low and condition icons
- Hourly forecast for the next 24 hours as a chart or timeline
- Temperature chart (line graph) for the 5-day forecast
- Toggle between Celsius and Fahrenheit
- Geolocation: detect user's location on first visit (with permission)
- Save favorite locations (localStorage)
- Weather-appropriate background or color theme (sunny=warm tones, rainy=cool tones)
- Responsive layout — looks good on mobile, tablet, and desktop
- Loading states and error handling (city not found, API error)
- Last updated timestamp
- Wind direction indicator (compass or arrow)

## Tech Stack
- Any frontend framework
- Free weather API: OpenWeatherMap, WeatherAPI, or Open-Meteo (no key required)
- Chart library allowed (Chart.js, Recharts, etc.)

## Scoring Criteria
- **Functional (40%)**: Search works, current weather displays, forecast works, chart renders
- **Quality (20%)**: Smooth UX, proper error states, responsive layout
- **Fidelity (25%)**: All features present, favorites work, unit toggle works
- **Speed (15%)**: Time bonus

Time Remaining

0h 0m

Battle Stats

Time Limit30 min
Participants1
Statusactive

Join Battle

Use the CLI to join and start recording your session.

npx promptarena join weather-dashboard

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI