Weather Dashboard

Overview

A modern, responsive weather dashboard application built with Next.js 15, React 19, TypeScript, and Tailwind CSS v4. The app features a beautiful neumorphism UI design and integrates with the Open-Meteo API (free, no API key required) to provide real-time weather data, forecasts, and air quality information.

Features

• 🌤️ Real-time Weather Data: Temperature, humidity, wind speed (mph), UV index, barometric pressure (mmHg), visibility (miles)
• 🌍 Location Search: Autocomplete search powered by Open-Meteo Geocoding API
• 📍 Current Location: Uses browser geolocation API
• 💾 Saved Locations: Persistent location storage with easy removal
• 📅 7-Day Forecast: Daily weather predictions with min/max temperatures
• 🌫️ Air Quality Index: Real-time AQI data with category indicators
• 🌓 Dark/Light Mode: Theme toggle with localStorage persistence
• 🌡️ Unit Switching: Toggle between Celsius and Fahrenheit
• 💨 Wind Speed: Displayed in miles per hour (mph) with direction
• 🌡️ Pressure: Barometric pressure displayed in mmHg
• 👁️ Visibility: Displayed in miles for improved navigation awareness
• 💧 Precipitation: Rain amounts shown in inches with probability percentages
• 🎨 Neumorphism Design: Deep, embossed UI elements with multi-layer shadows

Recent Changes (October 9, 2025)

• Initial project setup with Next.js 15 and Tailwind CSS v4
• Implemented all weather dashboard features
• Configured Tailwind CSS v4 with CSS-first approach (@import "tailwindcss")
• Created custom neumorphism styling using CSS variables
• Integrated Open-Meteo API for weather, forecast, geocoding, and air quality
• Built theme and unit context providers with localStorage persistence
• Critical fixes for production readiness:
  • Fixed SSR compatibility in ThemeProvider and UnitProvider (removed hydration blocking)
  • Improved accessibility in SavedLocations (eliminated nested button structure)
  • Added proper error handling in all API functions (response.ok checks)
  • Implemented user-facing error messages with retry capability
• Enhanced UI/UX features:
  • Converted both temperature and theme toggles to matching neumorphic toggle switches
  • Added weather condition text labels (e.g., "Sunny", "Partly cloudy") alongside emojis
  • Display precipitation in inches (converted from millimeters)
  • Added precipitation probability percentages to current weather and forecasts
  • Enhanced Current Location button with loading states and specific error messages
  • Wind speed displayed in miles per hour (mph) for US standard measurements
  • Barometric pressure shown in mmHg with gauge icon
  • Visibility displayed in miles to even out card layouts on small screens
• All components tested and verified working by architect review

Project Architecture

Tech Stack

• Framework: Next.js 15.5.4 with App Router
• Language: TypeScript 5.9.3
• Styling: Tailwind CSS v4.1.14 (CSS-first configuration)
• Icons: Lucide React 0.545.0
• API: Open-Meteo (free, no authentication required)

Directory Structure

├── app/
│   ├── layout.tsx           # Root layout with providers
│   ├── page.tsx             # Main dashboard page
│   └── globals.css          # Global styles and neumorphism
├── components/
│   ├── Header.tsx           # Header with theme/unit toggles
│   ├── LocationSearch.tsx   # Search with autocomplete
│   ├── SavedLocations.tsx   # Saved locations bar
│   ├── CurrentWeather.tsx   # Current weather display
│   └── WeatherForecast.tsx  # 7-day forecast cards
├── contexts/
│   ├── ThemeContext.tsx     # Dark/light mode provider
│   └── UnitContext.tsx      # Celsius/Fahrenheit provider
├── lib/
│   ├── api.ts               # Open-Meteo API functions
│   ├── utils.ts             # Helper functions
│   ├── weatherCodes.ts      # Weather code mappings
│   └── airQuality.ts        # AQI calculations
├── types/
│   └── weather.ts           # TypeScript interfaces
├── next.config.ts           # Next.js configuration
├── postcss.config.mjs       # PostCSS with @tailwindcss/postcss
└── package.json             # Dependencies and scripts

Key Files

API Integration (lib/api.ts)

• searchLocations(): Geocoding search
• getCurrentWeather(): Current weather data
• getAirQuality(): AQI and pollutant data
• getWeatherForecast(): 7-day forecast

Styling (app/globals.css)

• Tailwind CSS v4 with @import "tailwindcss"
• Custom theme variables using @theme directive
• Neumorphism classes (.neu-card, .neu-button, .neu-input)
• Dark/light mode variants

Context Providers

• ThemeContext: Manages dark/light mode with localStorage
• UnitContext: Manages Celsius/Fahrenheit preference with localStorage

User Preferences

• Styling: Neumorphism design with soft shadows and embossed elements
• Responsiveness: Mobile-first design with responsive grid layouts
• Persistence: Local storage for theme, units, and saved locations
• User Experience: Smooth transitions, loading states, and error handling

Development Commands

npm run dev    # Start development server on port 5000
npm run build  # Build for production
npm start      # Run production server

API Information

The app uses Open-Meteo APIs (completely free, no API key required):

• Weather API: https://api.open-meteo.com/v1/forecast
• Geocoding API: https://geocoding-api.open-meteo.com/v1/search
• Air Quality API: https://air-quality-api.open-meteo.com/v1/air-quality

Deployment Notes

• Server runs on port 3001
• No environment variables required
• Static assets are optimized by Next.js
• Works in all modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+)

Future Enhancements (Not Implemented)

• Hourly forecast breakdown
• Weather alerts and warnings
• Weather map visualization
• Detailed air quality pollutant breakdown
• Location-based weather comparisons