Dashboard

Ledgerly

Ein Finanz-Dashboard für kleine Agenturen, das Rechnungen, Zeiterfassung und Kontoumsätze zu einer laufend aktuellen Liquiditätsübersicht zusammenführt.

Live-Demo

Platzhalter-Vorschau der Oberfläche von Ledgerly

Daten zum Projekt

Rolle: Leitender Full-Stack-Entwickler
Art: Dashboard
Stack: Next.js
TypeScript
PostgreSQL
tRPC
Playwright
Dauer: 5 Monate
Jahr: 2026
Status: Live
Links: Demo Repository

Die Herausforderung

Liquidität, die niemand sehen konnte

Die befragten Agenturen führten Rechnungen, Zeiterfassung und Kontoexporte in drei verschiedenen Tools. Der Monatsabschluss kostete zwei Tage Tabellenarbeit und war schon veraltet, als er fertig war.

Das neue Produkt sollte alle drei Quellen importieren, automatisch abgleichen und auch auf den einfachen Laptops schnell bleiben, die die meisten Account-Managerinnen nutzen.

So entstand es

Der Entwicklungsprozess

Sechs Phasen vom ersten Gespräch bis zum Release. Der Balken zeigt, wie sich die Zeit verteilt hat.

6 Wochen insgesamt

Analyse
Gespräche mit Agenturinhabern und ein Blick in ihre Monatsabschluss-Tabellen zeigten, wohin die zwei Tage verschwanden.
2 Tage · Nutzungsdaten-Auswertung
Architektur
Datenmodell, Rendering-Strategie und API-Verträge standen fest, bevor der erste Screen entstand.
1 Woche · ADR, Datenmodell
Oberfläche
Ein Komponenteninventar und responsive Layouts, vollständig aus Design-Tokens aufgebaut.
1 Woche · Token-Set, Komponenteninventar
Umsetzung
Funktionen gingen in kleinen Schritten hinter Feature-Flags live, mit typisierten Grenzen zwischen Client und Server.
13 Tage · Feature-Schnitte
Tests
Unit-, End-to-End- und Barrierefreiheitstests liefen bei jedem Pull Request.
3 Tage · Testsuite in der CI
Deployment
Jeder Branch bekam eine Vorschau-Umgebung; der Rollout in die Produktion war ein Klick.
2 Tage · Vorschau- und Release-Pipeline
Ergebnis
Der Monatsabschluss sank bei den Pilot-Agenturen von zwei Tagen auf unter eine Stunde.
Live-Demo öffnen

Ansichten

Wirkung

Die Ergebnisse

Was sich nach dem Launch verändert hat

Der Monatsabschluss sank bei den Pilot-Agenturen von zwei Tagen auf unter eine Stunde.

Next.js
TypeScript
PostgreSQL
tRPC
Playwright

Kennzahlen

Lighthouse: 98
Ladezeit: −60 %
Aktive Nutzer: 2.000

Unter der Haube

Server zuerst, Client nur wo nötig

Jeder Bericht wird auf dem Server aus materialisierten Views gerendert, sodass das erste Bild nie auf Client-JavaScript wartet. Nur Filter, Datumsauswahl und die Inline-Editoren werden hydriert.

Die Abgleich-Engine läuft als Queue-Worker. Sie bewertet mögliche Zuordnungen nach Betrag, Datumsabstand und Ähnlichkeit des Verwendungszwecks und fragt nur dann einen Menschen, wenn zwei Kandidaten weniger als fünf Punkte auseinanderliegen.

Next.js
TypeScript
PostgreSQL
tRPC
Playwright

Bewertung von Zuordnungen (vereinfacht)

export function score(tx: Tx, inv: Invoice) {
  const amount = tx.amount === inv.total ? 50 : 0;
  const days = Math.abs(daysBetween(tx.date, inv.due));
  const date = Math.max(0, 30 - days);
  const ref = similarity(tx.reference, inv.number) * 20;
  return amount + date + ref;
}

Architektur