Stop 22 · Build Portfolio ProjectsProjects · 3/15

Weather App

In short

A weather app is your first real API project. The interesting part isn't showing 32°C, it's handling slow networks, wrong city names and the user's location politely.

A polished weather app with a 5-7 day forecast, geolocation-based default city, and thoughtful loading/error states — demonstrating real API integration maturity.

The jaadu listens to a vintage radio with little sun and rain cloud shapes floating above.

Think of it like this

The AIR weather bulletin

The announcer doesn't make up the forecast. They get it from the met department and read it out clearly. If the report is late, they say so. Your app does the same: fetch, show clearly, and admit when something's wrong.

Watch it happen

Changing city mid-request

User

React app

Weather API

city = 'Pune'

1/5The user searches Pune. The effect starts a fetch with a new AbortController.

The big ideas

What you need to know

Loading, error, empty

Every fetch has three states besides success. Showing all three proves you've built real UIs.

Uses location, with consent

Ask for geolocation, and fall back to a search box if the user says no.

Shows a forecast

Current weather plus the next few days, with icons and both °C and °F.

Keeps API keys safe

If your API needs a key, call it from a server route, not straight from the browser.

How it works

Build plan

1
Pick an API
Choose a free weather API and read its docs for current and forecast data.
2
City search
Input plus a fetch, with loading and error states.
3
Forecast cards
Map the daily data into small cards.
4
Geolocation
Load the user's city on first visit if they allow it.
5
Polish
Unit toggle, last searched city saved, deploy.

See it in code

Walk through the code

1async function getWeather(url, signal) {2  const res = await fetch(url, { signal });3  if (!res.ok) throw new Error(`Weather API error: ${res.status}`);4  return res.json();5}6 7// In a React effect: cancel the old request if the city changes8useEffect(() => {9  const controller = new AbortController();10  getWeather(buildUrl(city), controller.signal)11    .then(setData)12    .catch((err) => err.name !== "AbortError" && setError(err.message));13  return () => controller.abort();14}, [city]);