Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/cristhianblaffita-web/Weather-App-Ts/llms.txt

Use this file to discover all available pages before exploring further.

Every user interaction in Weather App TS follows the same pipeline: a keystroke in the search bar eventually produces rendered temperature readings, icons, and forecasts. The journey passes through debouncing, a geocoding API call, a city selection, a coordinate extraction, a full weather API fetch, two useMemo transformations, a theme toggle, and finally a React render. Understanding this pipeline makes it straightforward to trace bugs, add features, or replace any individual stage without disrupting the rest of the system.

​
Flow Overview

1

User types in search bar

WeatherNav contains a controlled input that calls setSearch on every keystroke, updating the search string in WeatherContext. The raw value is not forwarded to the API immediately — it first passes through useDebounce, which suppresses updates until the user pauses typing for 300 ms.
2

Geocoding request

Once debouncedSearch settles, useGeocoding(debouncedSearch) fires a fetch to the Open-Meteo geocoding endpoint:
https://geocoding-api.open-meteo.com/v1/search?name={city}&count=10&language=en&format=json
The response is a GeocodingResponse containing up to ten Place objects, each with a name, country, country code, and coordinates. The result is stored as cities in the context and displayed as a dropdown in WeatherNav.
3

City selection

The user clicks a result in the dropdown. WeatherNav attaches the selection handler via onMouseDown rather than onClick so that the event fires before the input’s onBlur event closes the dropdown. Calling handleSelect(city) inside WeatherContext calls setSelectedCity(city), which updates state. A companion useEffect that watches selectedCity then serialises the new value to localStorage automatically.
4

Coordinate extraction

A useMemo inside WeatherProvider derives a coords object from selectedCity. If the city is null, both values are null and the weather hook skips the fetch:
const coords = useMemo(
    () => ({
        latitude: selectedCity?.latitude ?? null,
        longitude: selectedCity?.longitude ?? null
    }), [selectedCity]
);
5

Weather fetch

useWeather({ latitude, longitude }) fires a fetch to the Open-Meteo forecast endpoint whenever the coordinates change:
https://api.open-meteo.com/v1/forecast
  ?latitude={lat}&longitude={lon}
  &current=temperature_2m,relative_humidity_2m,apparent_temperature,
           is_day,weather_code,cloud_cover,wind_speed_10m
  &hourly=temperature_2m,weather_code
  &daily=weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset
  &timezone=auto
The hook manages its own loading and error state and returns a typed WeatherResponse object on success.
6

Data transformation

Two useMemo calls in WeatherProvider reshape the raw API response into UI-ready arrays. hourlyWeather locates the current hour in the hourly time array, maps the parallel data arrays into HourlyWeather objects (each with an isDay boolean from isDayTime), and slices out the next seven entries. dailyWeather maps the daily arrays into DailyWeather objects and filters to the first seven days. Both arrays are written into context and consumed directly by HourlyWeather and DailyWeather as the weatherList prop.
7

Theme update

App reads currentWeather?.is_day from context and passes it to useWeatherTheme(isDay). The hook toggles the dark CSS class on document.documentElement based on the value:
html.classList.toggle('dark', !isDay);
Tailwind’s dark: variants respond to this class automatically, switching the entire colour palette without any user interaction.
8

Render

With loading false and weather non-null, App renders the full layout. WeatherNav receives the formatted city name, date, hour, weather code, and isDay flag. CurrentWeather receives individual numeric values with units from weather.current_units. HourlyWeather and DailyWeather each receive their pre-transformed weatherList arrays from context.

​
Debounce Behaviour

Without debouncing, every keystroke would immediately trigger a geocoding fetch — typing a six-letter city name would fire at least six requests before the user finishes. The use-debounce library collapses rapid updates into a single value that only propagates after a 300 ms idle period: 
const [debouncedSearch] = useDebounce(search, 300);
const { cities } = useGeocoding(debouncedSearch);
This means a typical search generates one or two API calls regardless of how quickly the user types, keeping the geocoding API well within any rate limits and reducing unnecessary network traffic.

​
Day/Night Detection

Day/night state is determined at two different granularities in the app. The is_day field in the Open-Meteo current weather response reflects whether it is currently daytime at the selected location. App reads this value and passes it to useWeatherTheme, which toggles the global dark class. The same value is forwarded to WeatherNav so the navigation header can render the correct weather icon variant for the present moment. For the hourly forecast, each HourlyWeather entry needs its own independent day/night flag because the slice of seven hours may span a sunrise or sunset boundary. The isDayTime utility handles this by comparing each hourly timestamp against the sunrise and sunset string arrays from the daily API response, computing a per-entry boolean that drives the icon variant in each hourly card.

​
Error Handling

Both useWeather and useGeocoding maintain their own internal error state. If either fetch throws, the hook captures the error and exposes it alongside its data. WeatherContext surfaces the weather hook’s error value directly through the context object. App checks for this error after confirming loading is false and renders the <WeatherError> component with the message when it is present: 
{!loading && error && <WeatherError message={error} />}
Geocoding errors are contained within useGeocoding and result in cities remaining null, which causes the dropdown in WeatherNav to stay empty — the user simply sees no suggestions rather than an explicit error message.
The loading field exposed by WeatherContext reflects only the weather fetch from useWeather. The geocoding hook manages its own loading state internally and does not contribute to the context-level loading boolean.

Build docs developers (and LLMs) love

Get started for freeTalk to us