Flask Weather Dashboard

Project roadmap

1. 01

   Set up the Flask app

   ~1h

   Create a virtual environment, install Flask and requests, and list them in requirements.txt. Create app.py with a route for / that renders templates/index.html, a page with a form containing a city text field and a Search button that submits with GET to /weather. Done when: flask run shows the search form in the browser.

2. 02

   Find the city's coordinates

   ~1.5h

   Write get_coordinates(city) that calls the Open-Meteo geocoding API (https://geocoding-api.open-meteo.com/v1/search?name=...&count=1) with requests and a 5-second timeout. Return the name, country, latitude and longitude of the first result, or None when nothing is found. Done when: get_coordinates('Paris') returns Paris, France and its coordinates, and a made-up name returns None.

3. 03

   Get the weather

   ~2h

   Write get_weather(lat, lon) that calls the Open-Meteo forecast API asking for current temperature, wind speed and weather code, plus daily minimum and maximum temperatures and weather codes for 3 days. Convert the weather codes into a short description and an icon (for example sunny, cloudy or rain) using a dictionary. Done when: calling it with real coordinates returns current conditions and a 3-day forecast.

4. 04

   Show the results page

   ~2h

   The /weather route reads the city from the query string, looks up its coordinates and weather, and renders templates/weather.html, which extends a base.html layout, with the current conditions and a 3-day forecast in cards. Keep the search form at the top. Done when: searching a city shows its weather and forecast.

5. 05

   Handle errors

   ~1.5h

   Show a friendly message on the page instead of an error when the city is empty, when it isn't found, or when the API times out or returns an error. Add custom 404 and 500 pages. Done when: each of these cases shows a clear message, and the app never shows a Python traceback.

6. 06

   Add caching and configuration

   ~1.5h

   Cache results in a dictionary keyed by city name in lowercase, storing the time of each lookup, and reuse entries younger than CACHE_TTL seconds (default 600). Read CACHE_TTL and the request timeout from environment variables with sensible defaults. Show a small from cache note when a cached result is used. Done when: searching the same city twice within 10 minutes calls the API only once.

7. 07

   Add styling and tests

   ~1.5h

   Add a CSS file so the dashboard looks clean on desktop and mobile. Write pytest tests using Flask's test client with the API calls mocked: a successful search, an unknown city, and an API timeout. Done when: the app looks tidy and pytest passes without calling the real API.

Resources

• DocsFlask quickstart
• DocsOpen-Meteo forecast API
• DocsOpen-Meteo geocoding API
• DocsJinja2 template designer documentation
• DocsRequests documentation