Skip to main content

Build a Weather App in React

Neither Learn React nor Advanced React builds a weather app end to end, but Learn React's free Side Effects section teaches the exact pattern one needs: fetch data inside useEffect, store it in state, render it conditionally. Type that pattern yourself in Scrimba's in-browser editor, then point it at a weather API instead of a meme API for a portfolio piece that proves you can connect a UI to the real world.

Why Watching Isn't Enough​

A YouTube tutorial teaches the tutorial illusion: you follow along, nod at each step, then open a blank VS Code file the next day and freeze. The code made sense while someone else typed it. It stops making sense the moment you have to type it yourself.

Scrimba fixes this by making the video the editor. The instructor says "now let's write the fetch() call," the video pauses, and you write the line yourself, on the instructor's own screen. Get it wrong and you press play; the instructor types the exact fix on the exact line you were stuck on.

Three Skills a Weather App Tests​

A weather app is a favorite portfolio project because it forces three things at once:

  1. Fetching external data. Calling a real REST API and handling what comes back.
  2. Managing state that can fail. Coordinates, temperature, loading, and error all live in state at the same time.
  3. Rendering conditionally. Sun renders one background, rain another; a loading flag swaps in a spinner.

Where to Learn the Fetch Pattern​

Learn React (opens in a new tab)'s Side Effects section runs 108 minutes across 22 scrims. It fetches meme templates from an API inside useEffect, works through the dependencies array and the cleanup function, and ends with the Chef Claude project wiring a form to a live API call. Everything in that section is free, and it is the same shape of code a weather fetch needs: swap the meme endpoint for a weather endpoint and the pattern holds.

Advanced React (Pro) covers the piece Learn React does not: loading and error states built with try/catch/finally, worked through in its VanLife build. Start it through Scrimba (opens in a new tab). A weather app needs both, since an API call can be slow or can fail.

Push the finished app to GitHub and deploy it. A weather app that fetches real data, handles a failed request, and changes its own background is the kind of thing a hiring manager reads the code of, not just the demo.

Who This Fits​

This project fits anyone who already knows basic React and wants a useEffect/useState project with a real API behind it, not another to-do list. If useEffect and dependency arrays are still new, work through Learn React's Side Effects section first; the weather app is the exercise, not the lesson.

Related Guides

Next step

Practice Guides

Docs
Last updated on