WeatherAI – Woche 1

WeatherAI: Was zieh ich an?! Die App weiß es.

Ich bin jemand, der eigentlich fast jeden Tag das Wetter checkt – und trotzdem oft ratlos vorm Kleiderschrank steht.
T-Shirt? Oder doch lieber Pulli?
Früher gab es auf irgendeiner Wetterseite neben dem Wetterbericht immer ein kleines Icon mit einem Männchen, das passende Kleidung trug – super hilfreich, aber eines Tages wurde das Feature entfernt.
Also hab ich beschlossen:
Ich bau mir das jetzt einfach selbst.

Die Idee: Wetter + AI + hübsche UI

Meine Anforderungen an das Projekt waren von Anfang an klar:

Ich wollte eine optisch schöne App, die Spaß macht.
Sie sollte funktionieren, also echte Wetterdaten verarbeiten und richtige Empfehlungen abgeben.
Und sie sollte unbedingt mit kostenloser AI laufen – in diesem Fall über Groq + LLaMA 3.

Da ich mich langsam in die Fullstack-Entwicklung reinarbeite, wollte ich das Backend nicht selbst schreiben, sondern erstmal mit n8n arbeiten – ein No-/Low-Code-Tool, das man Schritt für Schritt logisch aufbauen kann.

Mein AI-Workflow

Ich habe dieses Projekt nicht einfach von AI bauen lassen, sondern mir eine eigene Arbeitsweise mit Claude & ChatGPT aufgebaut – fast wie ein Toolkasten:

Projektstart mit Claude:
Ich habe die Grundidee beschrieben und Claude gebeten, die Struktur mit mir zu planen.
Kontextbewusstes Arbeiten:
Um Halluzinationen zu vermeiden, habe ich regelmäßig den bisherigen Chat zusammenfassen lassen und bin mit der Zusammenfassung in einem neuen Chat weitergegangen. So blieb der Fokus klar.
Fehlersuche = eigener Chat:
Wenn es Probleme oder Bugs gab, habe ich dafür separate Chats geöffnet, um nicht die komplette Architektur zu verwässern.
Codeweitergabe effizient gemacht:
Mein Mann hat mir ein Python-Skript geschrieben, das den kompletten React-Code inkl. Verzeichnisstruktur in eine .txt exportiert – so konnte ich Claude gezielt sagen: „Hier ist mein Projekt – ändere bitte X“.
Visuals, Icons & Favicons:
Die Blog-Bilder und Favicons habe ich mit ChatGPT Vision erstellt. Und ja – auch das war eine eigene kleine Prompt-Disziplin. 😄

Für mich ist AI keine Blackbox, sondern ein Teammitglied mit Eigenheiten. Man muss wissen, wie man damit spricht – und was man besser aufteilt. Genau das will ich in den kommenden Wochen weiter lernen.

Was die App kann

Du kannst die App hier direkt testen:
👉 weather.hilkebuss.de

Das Tool:

Nimmt deine Eingabe (Stadt, Datum, Uhrzeit)
Holt Wetterdaten über die OpenWeatherMap API
Schickt sie über einen Webhook an meinen n8n-Workflow
Der erzeugt daraus einen Prompt für die AI
Die AI liefert strukturierte Empfehlungen (Analyse, Kleidungsstücke, Tipps, Confidence)
Das Frontend zeigt alles an – visuell aufbereitet mit Icons, Emojis und Bewertung

Stack & Tools

Frontend: React, TailwindCSS, Context API
Automation: n8n (Webhooks, Code-Nodes, HTTP Calls)
APIs: OpenWeatherMap (Wetterdaten), Groq (AI mit LLaMA 3)
AI-Tools: Claude, ChatGPT, GPT Vision
Sonstiges: eigenes Python-Skript zum Export ganzer Projekte in Textform

Entwicklung in Etappen

Claude baute mir auf Basis einer bestehenden App-Struktur (von meinem Mann) eine neue App mit Dummy-Daten
Ich habe UI & Farbgestaltung angepasst, mit Fokus auf Barrierefreiheit
Den n8n-Workflow habe ich Node für Node aufgebaut, mit curl-Tests nach jedem Schritt
Am Ende habe ich die Dummy-Daten durch Live-Daten ersetzt und alles auf meinen Server deployed

Herausforderungen & Learnings

Prompt-Tuning ist ein echter Skill: Die AI empfahl mir anfangs teilweise Shorts bei 14 °C – ich hab’s dann leicht angepasst, aber bewusst allgemein gehalten.
Fehlermeldungen sind noch zu generisch – die UX könnte noch besser differenzieren.
AI kann helfen – aber nur, wenn man auch selbst mitdenkt.
n8n ist ein super Einstieg in Automatisierung – visuell, logisch und schnell testbar.

Fazit

Das Projekt hat richtig Spaß gemacht.
Es war mein erstes vollständiges Tool dieser Art – AI-gestützt, datengetrieben, visuell umgesetzt. Und es ist schöner geworden, als ich gedacht hätte.
Vor allem der n8n-Teil war unterhaltsam – jedes Mal, wenn ein Node funktionierte: „Yes! Weiter geht’s.“

Woche 1: geschafft.
Jetzt freue ich mich auf Woche 2. ChatGPT hatte beim Brainstorming schon eine richtig gute Idee!