TL;DR
In dieser Woche habe ich ein Dashboard gebaut, das aktuelle Wetterdaten und Energie-Potenziale (Solar, Wind) für ausgewählte Städte zusammenführt und verständlich visualisiert. Die Daten kommen live und historisch aus der Open‑Meteo‑API, werden in einer Datenbank gespeichert und regelmäßig aufbereitet. Neu ist die Kombi aus Dark Mode und Light Mode. Das Backend war schnell stabil, beim Frontend brauchte es Feinschliff für Zeiträume und Charts, plus ein paar LLM‑bedingte Überraschungen 😊
Kontext & Ziel
Ich möchte verschiedene Tools und Bibliotheken rund um Dashboards ausprobieren, meinen Tech‑Stack erweitern und herausfinden, was mir im Alltag am besten gefällt. Diese Woche stand deshalb ein kompaktes Wetter‑ und Energie‑Dashboard im Fokus: aktuelle Messwerte, historische Verläufe und ein Gefühl dafür, wie sich Sonnen‑ und Windpotenziale je Stadt entwickeln. Der Umfang ist eher schlank: Daten abrufen, speichern, visualisieren; keine User‑Accounts, keine Schreibfunktionen, keine komplexen Admin‑Views.
Meine Anforderungen
- Auf einen Blick sehen, wie das Wetter gerade ist und wie sich die Lage in der letzten Zeit entwickelt hat
- Energie‑Potenziale (Solar/Wind) verständlich aufbereiten, um Tendenzen zu erkennen
- Dark Mode als Standard, zusätzlich ein Light Mode zum Umschalten
- Ein paar schöne, gut lesbare Charts
- Regelmäßige Aktualisierung ohne manuelles Zutun, inklusive täglicher Kennzahlen
- Städteauswahl mit Fokus auf Hamburg, Münster und Aachen
Mein AI-Workflow
Das Braindstorming für die Idee habe ich mit ChatGPT gemacht. Danach habe ich die Projektbeschreibung an Claude weitergegeben und dort das Backend gebaut. Fürs Frontend bin ich zu Claude Code gewechselt. Das Blogbild ist mal wieder von ChatGPT generiert worden.
Mein Eindruck: Mit Claude Code komme ich beim UI‑Feinschliff und beim Debuggen deutlich schneller voran. Das ständige Copy-Paste fällt weg, und Claude Code hat immer Zugriff auf meinen Projektordner, dadurch verliert er nicht den Kontext. Und habe ich schon erwähnt, dass Claude Code deutlich weniger Tokens verbraucht als Claude?
Was das Dashboard kann
👉 Du wählst eine Stadt und siehst sofort aktuelle Wetterwerte wie Temperatur, Niederschlag, Wind und Bewölkung, ergänzt um die berechneten Solar‑ und Windpotenziale ⚡
👉 Historische Verläufe geben dir ein Gefühl für die letzten Tage: Temperatur, Solarstrahlung, Wind – sauber getrennt und in stimmigen Farbschemata
👉 Ein Donut‑Chart zeigt, welche Stadt im gewählten Zeitraum insgesamt am besten abschneidet (Solar + Wind kombiniert)
👉 Der Dark Mode sorgt für hohe Lesbarkeit und angenehmen Kontrast; bei Bedarf wechselst du in den Light Mode 🌗
👉 Im Hintergrund laufen automatische Datensammlungen und Tagesauswertungen; du musst nichts manuell anstoßen
Stack & Tools
- Frontend: React, Vite, TailwindCSS, Recharts
- Backend: FastAPI, APScheduler
- Daten: MariaDB
- APIs: Open‑Meteo
- Deployment/Proxy: Traefik, Docker
Herausforderungen & Learnings
– Live‑ und historische Daten kommen aus unterschiedlichen Open‑Meteo‑Endpoint; die Archive‑API liefert Daten, die mindestens ~5 Tage alt sind. Mit dem anderen Endpoint lesen wir Live-Daten aus, also bleibt die Lücke von 5 Tagen erst einmal. Das kann aber bei Bedarf noch in einigen Tagen durch das Ausführen eines Extra-Scripts aufgefüllt werden.
– Reverse‑Proxy‑Konflikte: Ein älteres Projekt lief bereits auf weather.hilkebuss.de; beim Deployen kam es zu Kollisionen. Nach Bereinigung der Traefik‑Konfiguration läuft das neue Dashboard stabil.
– LLM‑Anekdote: Claude Code ging beim Speichern der Archive-Daten zunächst davon aus, dass wir im Jahr 2024 leben. Er war schon dabei mir vorzuschlagen, dass ich die Uhr meines Servers korrigieren soll, als ich ihn korrigiert habe. Nach kurzem Entsetzen auf Claudes Seite 🙂 war der Fix schnell da: gutes Beispiel dafür, wie wichtig es ist nicht blind zuzustimmen.
– Frontend brauchte länger als das Backend: die Zeiträume und Chart‑Daten mussten sorgfältig aufeinander abgestimmt werden, damit Achsen und Skalen wirken.
Live-Demo
Live-Demo: weather-dashboard.hilkebuss.de
Fazit
Woche 15: ✅
Das Projekt zeigt, wie man Wetter‑ und Energie‑Informationen zu einer klaren, alltagstauglichen Übersicht kombiniert – ohne zu viel Drumherum. Besonders zufrieden bin ich mit den unterschiedlichen Zeiträumen und dem Wechsel zwischen Dark Mode und Light Mode.
Gibt es nächste Woche wieder ein Dashboard? Wer weiß.
