Payify — Ein Design-System für Rechnungen, das ruhig bleibt
April 2025
Ein Rechnungssystem für Freelancer und kleine Unternehmen, das den kompletten Abrechnungsprozess abdeckt — von der Kundenverwaltung bis zur Zahlungsverfolgung, mit automatischer PDF-Generierung, E-Mail-Versand und deutscher Umsatzsteuerkonformität.
Die Vision
Bestehende Rechnungstools fehlten entweder wesentliche Funktionen für den deutschen Markt oder waren für Solo-Freelancer überladen. Payify schließt diese Lücke mit einer fokussierten Lösung, die den gesamten Rechnungslebenszyklus abdeckt — vom Entwurf bis zur Bezahlung — ohne sich wie Verwaltungssoftware anzufühlen.
Zustände statt Dokumente
Die wichtigste Design-Entscheidung kam vor der ersten Zeile UI-Code: Eine Rechnung ist kein PDF, das irgendwann existiert — sie ist eine Entität mit einem Lebenszyklus. Entwurf, freigegeben, versendet, bezahlt. Jeder Zustand beantwortet eine andere Frage, und die Oberfläche beantwortet sie, bevor man sie stellen muss. Eine bereits bezahlte Rechnung lässt sich deshalb bewusst nicht mehr bearbeiten — wer etwas korrigieren will, erstellt eine Gutschrift, genau wie in der echten Buchhaltung.
Hauptfunktionen
- Modernes Dashboard mit Echtzeit-Übersicht des Rechnungsstatus
- Professionelle PDF-Generierung mit anpassbaren Vorlagen
- Automatisierte E-Mail-Benachrichtigungen über React Email
- Statusmaschinen-gesteuerter Rechnungs-Workflow (Entwurf → Freigegeben → Gesendet → Bezahlt)
- Unterstützung für deutsche Kleinunternehmerregelung und Standard-Umsatzsteuer
- Kundendatenbank mit Historienverfolgung
- KI-gestützter PDF-Import zur Spesen-Erkennung
Mobile war nie optional
Der ehrlichste Teil dieser Fallstudie: Bis vor Kurzem war der Rechnungs-Flow auf einem Handy schlicht unbenutzbar. Die Zwei-Spalten-Ansicht (Formular links, Live-Vorschau rechts) war fest verdrahtet — auf 375px Breite ergab das zwei Spalten mit je der Hälfte einer Visitenkarte Platz. Der Rewrite hat einen Denkfehler offengelegt, der vorher nicht auf dem Schirm war: Tablet-Querformat ist nicht Desktop. Die naheliegende Breakpoint-Grenze liegt bei den meisten Frameworks standardmäßig bei 1024 Pixeln — genau dort landen praktisch alle iPads im Querformat. Die Lösung war denkbar einfach, sobald das Problem klar war: die Grenze für den Zwei-Spalten-Split höher legen als die Grenze für „genug Platz“, und darunter konsequent stapeln statt quetschen.
Der zweite Fund war die Positions-Tabelle: feste Spaltenbreiten für Menge, Einheit, Bezeichnung, Einzelpreis und Summe brauchen mehr als 400 Pixel, egal wie sehr man die Eingabefelder zusammendrückt. Statt die Felder unleserlich klein zu machen, scrollt jetzt nur die Tabelle selbst horizontal — Summe und „Position hinzufügen“ bleiben davon bewusst ausgenommen und immer sichtbar.
Design-Philosophie
Die Benutzeroberfläche priorisiert Klarheit vor Alarm. Überfällige Rechnungen leuchten nicht knallrot — ein gedämpftes Amber informiert, ohne Panik zu erzeugen. Aktive und fokussierte Elemente werden ausschließlich über einen dezenten, transparenten Ring markiert, nie über einen farbigen Balken am Rand — ein Muster, das in generischen Dashboards inflationär auftaucht und dabei selten überzeugt. Und die Rechnungsübersicht blieb bewusst ein Karten-Raster statt einer dichten Tabelle, weil sich das für wenige, aber wichtige Rechnungen schlicht schneller liest.
72 Komponenten, ein System
Um beim Design-System selbst konsequent zu bleiben, wurde in Storybook jede einzelne UI-Komponente isoliert dokumentiert — 72 Bausteine, von einfachen Badges bis zu komplexeren Mustern wie Command-Menüs und Datumsauswahl. Kein Nice-to-have für später: der Grund, warum neue Features sich nicht wie Flickwerk anfühlen, sondern wie derselbe Baukasten, nur an neuer Stelle zusammengesetzt.
Technische Grundlage
Entwickelt mit Next.js 16 App Router und React 19, unter Verwendung von Drizzle ORM für typsichere Datenbankoperationen auf PostgreSQL. Die Benutzeroberfläche kombiniert benutzerdefinierte Komponenten mit Radix-Primitiven, gestylt mit Tailwind CSS 4. Das State Management nutzt TanStack Query und Form für optimale Leistung.
Noch Work in Progress — ganz bewusst
Payify ist kein fertiges Produkt. Was heute solide steht: der komplette Rechnungs-Flow inklusive PDF- und E-Rechnungs-Export, ein Angebots-Modul mit Umwandlung in eine Rechnung, ein automatischer Zahlungsabgleich und ein Benachrichtigungssystem für Mailversand, Statuswechsel und Zahlungseingänge. Was noch fehlt, ist strukturell größer: ein echtes Multi-User-System mit Login und ein Preismodell für alle, die das Tool nicht nur für sich selbst nutzen wollen. Beides ist in Arbeit, keins davon ist heute schon live.