codeseed
Sign in
Explore Projects
TypeScriptbeginnerwebAI generated

Weather Dashboard with Public API

Build a web dashboard that fetches current weather and a multi-day forecast for a searched city from a public API, displaying results with icons and a temperature chart. Learners practice typed fetch wrappers, async/await error handling, and rendering typed API responses.

Estimate
~9.5h
Steps
6
Completed by
0
Proposed by
codeseed.app

Vite · Chart.js

Sign in to claim this project

Project roadmap

  1. 01

    Scaffold the project and define types

    ~1.5h

    Set up a Vite project and define TypeScript interfaces for the weather API responses.

  2. 02

    Build the city search input

    ~1.5h

    Build a debounced search input for looking up a city.

  3. 03

    Fetch weather data

    ~2h

    Fetch current conditions and forecast data with a typed fetch wrapper.

  4. 04

    Render the forecast chart

    ~2h

    Display forecasted temperatures over the coming days using Chart.js.

  5. 05

    Handle loading and error states

    ~1h

    Show loading indicators and friendly error messages for failed requests.

  6. 06

    Add a recent-searches list

    ~1.5h

    Persist recently searched cities locally and let users quickly reselect them.

Resources

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~9.5h · 6 steps

Tech stack

ViteChart.js