Vom ursprünglichen Plan zur spontanen Idee
Eigentlich wollte ich diese Woche etwas ganz anderes zeigen:
Ein Tool, das automatisch Arbeitszeiten berechnet – basierend auf PC-Aktivitäten wie Datei-Updates oder App-Nutzung.
Dafür hätte ich aber deutlich mehr Vorarbeit und genauere Anforderungen gebraucht.
Also habe ich ein Projekt vorgezogen, an dem ich schon letzte Woche angefangen habe zu arbeiten: WorkHours Dashboard – ein Tool, das Arbeitszeiten aus einem Google Sheet zieht, automatisch aktualisiert und in einem hübschen Web-Interface visualisiert.
Meine Anforderungen
Automatische Datenquelle: Stunden aus einem Google Sheet einlesen
Live-Statistiken: Projekte, Mitarbeiter und Zeitverläufe auswerten
Einfaches Deployment: Frontend & Backend in Containern, schnell startklar
Design mit Überblick: Klar, modern, mobil nutzbar
Mein AI-Workflow
Dieses Projekt war ein Zusammenspiel meiner Lieblings-LLMs mit einem „Newcomer“:
Ideenfindung: Zuerst habe ich mit ChatGPT nach Projektideen für Woche 7 gebrainstormt.
Struktur & Coding: Danach habe ich mit Claude die Architektur ausgearbeitet und den Code entwickelt.
Spannend: Ich habe diesmal sehr lange im selben Chat gearbeitet – normalerweise fangen Modelle irgendwann an zu halluzinieren.
Hier blieb Claude aber über viele Iterationen erstaunlich stabil und lieferte am Ende die richtige Lösung.Durch die Erfahrung weiß ich inzwischen, wann ich eingreifen muss und welche Struktur sinnvoll ist.
Schrittfolge: Backend mit Mockdaten → Frontend → Google-Sheets-Anbindung → Design-Feinschliff.
Blogbild: Für die Grafik habe ich mein neues (kostenloses!) Gemini-Abo genutzt.
Positiv: Die ersten erstellten Bilder gefielen mir besser als die, die ChatGPT normalerweise produziert und es rendert schneller.
Aber: nerviges Wasserzeichen und ständige Aussetzer. Gemini schreibt „Hier ist dein fertiges Bild.“ ohne ein Bild zu generieren. Dabei gibt es dann weder Fehlermeldung noch Erklärung. Zusätzlich erstellt Gemini auf seinen generierten Bildern Texte, die völlig Banane sind. Und er weigert sich Formatvorgaben einzuhalten, so dass ich das Bild nachträglich zuschneiden musste. Die Arbeit mit Gemini hat mich echt aufgeregt, so macht das noch keinen Spaß.
Grundsätzlich habe ich diese Woche wieder einiges bei der Zusammenarbeit mit verschiedenen LLMs gelernt, ohne lange googlen zu müssen.
Was das Dashboard kann
👉 Du trägst Arbeitszeiten in ein privates Google Sheet ein.
👉 Das Dashboard holt regelmäßig Arbeitszeiten aus dem Google Sheet.
👉 Die Arbeitszeiten werden in einer Datenbank zwischengespeichert.
👉 Das Dashboard zeigt KPIs, Balken- und Kreisdiagramme sowie eine aktuelle Eintragsliste.
👉 Es aktualisiert sich per Buttonklick und automatisch im Hintergrund.
Stack & Tools
Frontend: React + Vite + TailwindCSS + Recharts
Backend: Flask + SQLAlchemy + MySQL
Deployment: Docker & docker-compose
Worker: Python-Script, das Google Sheets in Intervallen abfragt
Entwicklung: Claude, ChatGPT & Gemini als AI-Partner
Herausforderungen & Learnings
Docker-Compose für Frontend & Backend
Beide Dienste laufen auf work.hilkebuss.de.
Ich musste herausfinden, wie sich React-Frontend und Flask-API hinter einer Domain nicht in die Quere kommen – Reverse-Proxy sei Dank.Google-Sheets-Worker
Statt OAuth brauchte ich diesmal einen Service-Account mit eigenen API-Keys, damit der Server ohne Benutzerinteraktion Daten holen kann.
Der Worker prüft in festen Intervallen das Sheet und schreibt neue Einträge in die Datenbank.Fehler, die man kennt
Kommentare mit Umlauten im Dockerfile können zu Encoding-Problemen führen – das hatte ich glatt vergessen, jetzt erkenne ich solche Stolperfallen sofort.Bessere Struktur
Erst Backend mit Dummy-Daten, dann Frontend, zuletzt Google-Sheets-Anbindung: Diese Reihenfolge hat sich bewährt.
Ich merke, dass mir Architekturentscheidungen leichter fallen und ich bekannte Bugs schneller finde.
Live-Demo
👉 Live-Demo: work.hilkebuss.de
(Das Dashboard zeigt Beispieldaten; Eingaben ins echte Google Sheet sind nicht öffentlich.)
Fazit
Das WorkHours Dashboard war ein richtiges Spaßprojekt – von der Datenbank bis zum Design.
Ich habe mehr über docker-compose, Hintergrund-Worker und Google-APIs gelernt und gleichzeitig ein Tool gebaut, das man sofort einsetzen kann. Und ich habe wieder gesehen, dass jedes LLM Schwächen hat.
Woche 7: ✅
Ich bin gespannt, was mich in Woche 8 erwartet! Vermutlich wird die automatische Arbeitszeitenberechnung noch warten müssen.
