Hinweis: Planero ist ein Portfolio-Projekt, kein Kundenauftrag. Ziel war es, die Art von Komplexität zu demonstrieren, die eine echte Web-Anwendung von einer reinen Website unterscheidet — Authentifizierung, Echtzeitdaten, Rollenmodelle.
Die Herausforderung
Kanban-Boards mit Drag-and-Drop sind ein beliebtes UI-Muster, aber technisch anspruchsvoller, als sie aussehen: Der Nutzer erwartet sofortiges visuelles Feedback beim Verschieben einer Aufgabe, während im Hintergrund der tatsächliche Datenbank-Zustand aktualisiert werden muss — inklusive Fehlerbehandlung, falls etwas schiefgeht.
Der technische Ansatz
Optimistisches UI-Update. Beim Verschieben einer Aufgabe wird die Oberfläche sofort aktualisiert, während die Anfrage an die Datenbank im Hintergrund läuft. Schlägt sie fehl, wird der vorherige Zustand wiederhergestellt. Das Ergebnis fühlt sich sofort an, ohne die Datenintegrität zu gefährden.
Flexible Datenmodellierung für Teams und Workspaces. Statt eines starren "ein Nutzer, ein Board"-Modells wurde die Datenstruktur so angelegt, dass mehrere Teams, mehrere Workspaces und unterschiedliche Board-Konfigurationen von Anfang an möglich sind — ohne spätere Migration.
Rollenbasierter Zugriff (RBAC). Nicht jeder Nutzer soll jede Aktion ausführen können. Die Berechtigungslogik ist zentral implementiert, nicht über verstreute Bedingungen im Frontend verteilt — das macht sie überprüfbar und erweiterbar.
Timeline-Ansicht als zweite Perspektive auf dieselben Daten. Kanban-Board und Timeline greifen auf dieselbe zugrunde liegende Datenstruktur zu, werden aber unterschiedlich dargestellt — ein Beleg dafür, dass gute Datenmodellierung mehrere Ansichten unterstützt, ohne dass Daten dupliziert werden müssen.
Technischer Stack
Next.js, TypeScript, Tailwind, Prisma und PostgreSQL — bewusst ohne zusätzliche Echtzeit-Infrastruktur wie WebSockets, wo Polling oder optimistische Updates ausreichen.
Live-Demo ansehen · Code auf GitHub
Brauchst du ein internes Tool oder ein SaaS-MVP? Lass uns sprechen.