Weatherly

Find a city or use your location

City search uses Open-Meteo geocoding, debounces input by 300 ms and lets keyboard users select suggestions. Browser geolocation can look up the current coordinates.

Read the forecast

The dashboard shows temperature, feels-like, humidity, wind, visibility, pressure and sunrise/sunset, alongside the next 24 hours and seven calendar days.

Explore the location

An OpenStreetMap iframe shows the selected coordinates. The interface can open the location in OpenStreetMap or copy the latitude and longitude.

Save preferences

Favorites, the selected city, temperature units and the light/dark preference are stored in localStorage. Favorites are limited to eight.

Share or discover cities

A share action copies a URL containing the selected coordinates. A discover section offers three other cities and a shuffle action.

Open-Meteo through Next.js route handlers

The weather and geocoding routes call Open-Meteo on the server and normalize the response to the app's weather types. Weather requests use a ten-minute revalidation window.

Debounced, cancellable city search

Search uses a debounce timer and an AbortController so canceled suggestion requests do not replace newer input. The UI tracks the currently selected location separately.

A forecast bundle for the UI

The weather route maps one Open-Meteo response into current, hourly and daily data. The dashboard slices the next 24 hours and seven days for display.

Browser-local state

The page stores favorites, units, last city and theme in localStorage. It does not require accounts, a database or a weather API key.

Embedded location map

A lazy-loaded OpenStreetMap iframe displays a selected region. A separate link opens the map externally and a button copies coordinates.

Avoid stale search suggestions

Problem: Typing a new city before the previous request finishes can display suggestions for the old query.

Solution: The search effect waits 300 ms, aborts the previous request when inputs change, and clears obsolete suggestions.

Keep coordinates and forecast together

Problem: Switching cities while a weather request is running risks rendering the wrong place's results.

Solution: The page tracks the latest request ID and only applies the corresponding response to the selected city.

Persist preferences without a backend

Problem: Favorites and display settings should survive a reload without creating an account.

Solution: The page stores these choices as one localStorage object after hydration and restores validated favorites on load.