Weather Dashboard with Public API

Project roadmap

1. 01

   Create the project and types

   ~1h

   Create a project with npm create vite@latest using the vanilla-ts template, and install chart.js. Look at an Open-Meteo geocoding response and a forecast response in the browser, and write TypeScript interfaces for the parts you need (city name, country, latitude and longitude; current weather; daily highs and lows). Done when: the project runs with npm run dev, and the types file compiles.

2. 02

   Search for cities

   ~1.5h

   Add a search box. When the user stops typing for 300 ms (a debounce), call the Open-Meteo geocoding API and show up to 5 matching cities with their country. Don't search for fewer than 2 characters. Selecting a city loads its weather. Done when: typing a city name shows suggestions, and clicking one selects it.

3. 03

   Load the weather

   ~1.5h

   Write a typed fetchJson<T> helper that throws an error when the response isn't OK. Use it to load the current weather and a 7-day daily forecast for the chosen coordinates. Show the temperature, feels-like, wind speed and a description with an icon, based on the weather code. Done when: selecting a city shows its current weather.

4. 04

   Draw the forecast chart

   ~1.5h

   Use Chart.js to draw a line chart of the daily high and low temperatures for the next 7 days, labeled with weekday names. When another city is chosen, update the chart (or destroy and recreate it) instead of stacking charts. Done when: the chart shows 7 days of highs and lows, and changes with the city.

5. 05

   Handle loading and errors

   ~1h

   Show a loading state while requests run, and a friendly message with a Try again button when a request fails or the network is offline. If the user picks another city before the first one finishes loading, ignore the older response (for example with AbortController). Done when: switching cities quickly always shows the last city picked, and errors show a message instead of a blank page.

6. 06

   Remember recent searches

   ~1h

   Save the last 5 chosen cities (name and coordinates) in localStorage, without duplicates, most recent first. Show them as buttons under the search box for one-click access, with a way to clear them. Load the most recent city when the page opens. Done when: recent cities survive reloading the page and load with one click.

Resources

• DocsOpen-Meteo API documentation
• DocsOpen-Meteo geocoding API
• DocsVite: getting started
• DocsChart.js documentation
• DocsTypeScript handbook