Weather Now — Real-Time Weather Web App

A real-time weather app that paints instantly, never jumps, and works for keyboard, screen reader, and touch users alike.

Search any city or use your location, see current conditions plus 24-hour and 7-day forecasts, and switch units with zero reload — all on top of the free, keyless Open-Meteo APIs.

Overview

Weather Now is a frontend-only web application. There is no backend or database of its own; the engineering challenge is coordinating several external data sources client-side without the app ever feeling slow: fast search that never lies, forecasts that fill in place, unit switching that never refetches, and an interface everyone can use.

The Problem

A weather interface sits on top of several external sources — forecast data, city-name geocoding, reverse geocoding, and browser location. Gluing them together naively creates familiar failures:

• A fast typist triggers overlapping search requests, and stale results flicker in.
• Weather arrives after first paint, so a naive loading state swaps a small box for a huge grid — layout shift and one blocking render.
• Unit changes trigger wasteful refetches and loading spinners for what should be instant.
• Search dropdowns and unit switchers are usually inaccessible to keyboard and screen-reader users.

The Solution

A server-rendered shell paints immediately; only the interactive pieces hydrate as client islands. TanStack Query caches weather data by coordinates, Zustand holds instant preferences (persisted across visits), services isolate every external API, and the forecast grid reserves its full layout from first paint — skeletons shaped like the final widgets fill in place.

Key Features

• Debounced, cancellable search — 500 ms debounce + AbortController mean only the latest query can win.
• Geolocation with a local cache — cached coordinates fire instantly on revisit; a fresh fix overwrites them silently.
• Current conditions at a glance — temperature hero plus feels-like, humidity, wind, and precipitation widgets.
• 24-hour / 7-day forecasts — hourly rows grouped by day selector; seven daily cards with high/low ranges.
• Instant unit switching — raw Celsius converted at render time; no network request, persisted preferences.
• Accessibility as architecture — full ARIA combobox pattern, skip link, focus management, aria-pressed controls, reduced-motion support.
• SEO on a single page — OG/Twitter cards, JSON-LD structured data, robots, sitemap.

Architecture at a Glance

One rule: dependencies point inward, and only the services layer talks to external APIs.

See Design Docs above for the request flow, the two-halves state model, rendering strategy, and hard problems solved.

Tech Stack

What This Project Shows

Product sense — makes a data-heavy app feel instant: skeleton-first loading, coordinate caching, client-side unit conversion.

Engineering care — clean separation of server vs. client state, isolated service modules, a documented contract around an awkward SDK, and accessibility built in rather than bolted on.

Scope Notes

Honest limitations: no backend, accounts, offline mode, or automated tests; forecast accuracy depends on Open-Meteo; reverse geocoding needs a BigDataCloud key behind its server action. Some repository docs predate recent work — skeletons, icons, and the accessibility pass are implemented in code.