TL;DR
Diese Woche habe ich ein Finanz-Dashboard gebaut, das Kennzahlen und Finanzberichte aus einer externen API bezieht, lokal speichert und performant im Frontend visualisiert. Im Backend bin ich bewusst von Flask auf FastAPI gewechselt, um asynchrone Routen und ein klareres Typing zu testen. Im Frontend laufen React 19, Vite 7, Tailwind und Recharts; Datenabfrage und Caching erledigt React Query. Spannend: Ein veralteter API‑Pfad (heute Premium‑only) und ein Typfehler im Frontend (Zahlen als Strings) waren die größten Stolpersteine. Ich habe mit Claude gestartet, zwischendurch auf ChatGPT gewechselt, und erstmals „Claude Code“ verwendet, um direkt am Repo zu arbeiten.
Kontext & Ziel
Bei der Suche nach dem nächsten Projekt ist mir aufgefallen, dass mir die Dashboards, die ich bisher programmiert habe, viel Spaß gemacht haben. Und da habe ich mir gedacht: bevor ich mich auf „meinen“ Tech-Stack festlege, sollte ich mich weiter durch verschiedene Tools und Bibliotheken testen.
Ziel dieser Woche: Ein sauberes Finance‑Dashboard mit realistischen Datenflüssen, das typische Investor‑Workflows abbildet (Symbol suchen, Kennzahlen sichten, Finanzberichte vergleichen).
Dafür wollte ich:
– Eine andere Backend‑Basis als sonst (FastAPI statt Flask) ausprobieren.
– Eine externe Finanzdatenquelle integrieren und die Daten lokal vorhalten.
– Ein Frontend mit solider Datenabfrage, Zustand und Visualisierung liefern.
Meine Anforderungen
Konzernsuche und Abruf relevanter Kennzahlen sowie Finanzberichte.
Daten Sync aus externer Quelle und Speicherung in lokaler DB.
Schnelle, asynchrone API mit robustem Fehlerhandling.
Dashboard mit KPIs, Charts und einer Detailansicht pro Konzern.
Dunkles Theme mit stimmiger Farbpalette und unaufdringlichen Animationen.
Mein AI-Workflow
Ich habe das Backend initial mit Claude entworfen und implementiert, dann auf ChatGPT gewechselt, als mein Claude‑Kontingent aufgebraucht war. Das war ein Glücksfall: Ein API‑Bug (veralteter Endpoint) wurde so schnell gefunden und gezielt umgeschrieben. Früher konnte man über die API einige Daten noch über einen Free-Zugang auslesen, jetzt sind diese Daten nur noch für Premoium-User erhältlich. Claude wusste das nicht, ChatGPT wohl.
Für das Frontend habe ich mit Claude begonnen und anschließend erstmals „Claude Code“ ausprobiert – eine Konsole, die direkt auf Dateien im Projekt zugreift. Das spart Kontext‑Tokens, weil nur relevante Dateien gelesen werden, und erspart Copy‑Paste, wenn man Schreibrechte gewährt. Claude Code schlägt also nicht nur Code vor, er schreibt den Code auch direkt in die Dateien, was einiges an Zeit einspart.
Parallel teste ich, welche Projektdateien (z. B. Konventionen, ESLint‑Regeln, Projektstruktur) ich dem LLM vorab gebe, damit es sich an meine Vorlieben hält. Das reduziert Nacharbeit und Setup‑Zeit, etwa wenn Docker‑Templates oder Vite‑Konfigurationen wiederverwendet werden.
Was das Dashboard kann
👉 Suche und Überblick: Eingabe eines Tickers, schnelle Übersicht über Stammdaten und letzte Kennzahlen.
👉 Finanzberichte laden: Abruf und Ablage von Income Statement, Balance Sheet und Cashflow für definierte Perioden (jährlich/Quartal).
👉 Kennzahlen anzeigen: Zugriff auf konsolidierte Metriken pro Symbol.
👉 Dashboard & Detail: Startseite mit KPIs und kompakten Charts, Detailseite mit Verlauf und Kontext pro Unternehmen.
👉 Datenhaltung: Gecachte Daten in lokaler Datenbank, sodass das Dashboard unabhängig von API Schwankungen nutzbar bleibt.
👉 Stabilität in der Demo: Für die Demo sind Daten vorbefüllt – damit bleiben Kernfunktionen jederzeit demonstrierbar.
Stack & Tools
Backend: FastAPI mit modularen Routern (Financials, Metrics, Prices, Stocks), Repository Pattern und einem dedizierten Client für die Finanz API (FMP).
Daten: Lokale relationale Speicherung; klare Trennung zwischen Rohdaten, Kennzahlen und abgeleiteten Aggregationen.
Frontend: React 19 mit Vite 7, React Router, Tailwind für Styles, Lucide Icons für UI Details.
Datenzugriff: React Query für Fetching/Caching/Invalidation, Axios als HTTP Client.
Charts: Recharts für Zeitreihen und KPI Visualisierungen.
Qualität: ESLint Konfiguration mit React Hooks Regeln; strukturierte Projektordner (components, hooks, pages, services).
Arbeitsmodus: LLM gestützt (Claude, ChatGPT); Claude Code für kontextarmes Editieren direkt am Repo.
Herausforderungen & Learnings
Die erste größere Hürde war eine API‑Änderung: Ein zuvor frei zugänglicher Endpunkt ist inzwischen Premium‑only. Das fiel mitten im Implementieren auf. Der Wechsel von Claude zu ChatGPT brachte hier Geschwindigkeit. ChatGPT hat die veralteten Stellen sauber markiert und umgeschrieben.
Frontend‑seitig gab es eine vermeintlich banale, aber wirkungsvolle Quelle für leere Kacheln: Zahlen kamen in einzelnen Fällen als Strings durch und wurden deshalb in Recharts/KPI‑Cards nicht als Number interpretiert. Das sichtbare Symptom war „Daten vorhanden, aber Anzeige leer“.
Ein weiteres Thema war die Node‑Version für Vite. Das hat etwas Zeit gekostet, bis die Kombination aus Node‑Version, Vite und den ESLint‑Plugins stabil zusammenlief.
Ich werde mich definitiv noch weiter in FastAPI einlesen, um abschließend zwischen FastAPI und Flask wählen zu können.
Was mir am meisten gefallen hat: das Zusammenspiel aus LLM‑Unterstützung und klarer Projektstruktur. Mit Claude Code konnte ich gezielt Dateien öffnen/bearbeiten, ohne ständig Kontext manuell zusammenzukopieren. Gleichzeitig hilft es enorm, dem LLM zu Beginn ein strukturiertes Gerüst zu geben. So wird die Zusammenarbeit effizienter und nervenschonender!
Live-Demo
Nach langer Zeit haben wir dieses Mal endlich wieder eine Demo!
👉 Live-Demo: finance.hilkebuss.de
Fazit
Woche 14: ✅
Ein robustes Dashboard mit realen Datenflüssen und einem anschaulichem Design. Der Stack‑Wechsel hat Spaß gemacht, ebenso der erste Einsatz von Claude Code.
Mal schauen, welche Tools und Bibliotheken ich nächste Woche teste!
