WeatherAI

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. 😄

Was die App kann

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

Das Tool:

1. Nimmt deine Eingabe (Stadt, Datum, Uhrzeit)
2. Holt Wetterdaten über die OpenWeatherMap API
3. Schickt sie über einen Webhook an meinen n8n-Workflow
4. Der erzeugt daraus einen Prompt für die AI
5. Die AI liefert strukturierte Empfehlungen (Analyse, Kleidungsstücke, Tipps, Confidence)
6. 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!