All workYOUNESS / WORK / SKYWARD WEATHER2025

Weather dashboard

Skyward Weather

A readable weather dashboard that turns location search and forecast data into a calm daily interface.

View source

01 / Context

What this project is solving

Skyward uses Next.js and TypeScript to organize location search, current conditions, hourly forecasts, and daily forecasts. Open-Meteo supplies geocoding and forecast data, while localStorage preserves weather state, units, and recent searches so returning to the app does not begin from an empty screen.

ConstraintPrefer a readable weather decision surface over a dashboard that merely exposes raw metrics.

02 / Architecture

How the system is arranged

01

app/

Next.js App Router entry point, layout, page, and global styles

02

components/

Navbar, SearchHeader, CurrentWeather, ForecastHourly, ForecastDaily, WeatherDetails, LoadingState, and shadcn/ui primitives

03

components/WeatherProvider.tsx

Client context owns weather state, loading/searching/error state, unit selection, recent searches, and localStorage persistence

04

lib/weather.ts

WeatherData types, WMO condition mapping, mock data, icons, AQI status, and display helpers

05

Open-Meteo

Geocoding and forecast requests feed current, hourly, and daily weather data; hooks/use-mobile.ts handles responsive behavior

03 / Shipped

What made it into the build

  • Location search
  • Browser geolocation
  • Current weather view
  • Hourly forecast
  • Daily forecast
  • Persistent units and recent searches