Projekte

Eine Auswahl an Full-Stack- und Frontend-Projekten, die nach Produktionsstandards entwickelt wurden — Architektur, Performance und Detailgenauigkeit im Fokus.

In Entwicklung

Produktionsreifer Issue-Tracker im Jira-Stil — demonstriert skalierbare Next.js-Architektur mit Supabase, RBAC und praxisnahen Engineering-Mustern.

Live DemoAuf GitHub ansehen

Enthält E2E-Tests, produktionsreife Muster und ein echtes Supabase-Backend.

Mehrsprachig3 Sprachen — EN · DE · SL
Dreistufiges RBACBenutzer · Admin · Super-Admin
Verteidigung in der TiefeRLS in der DB + Server-Action-Prüfungen
End-to-End getestetPlaywright deckt kritische Pfade ab
Server Components + React Query hybrides DatenmodellRBAC auf DB-Ebene via Supabase RLS durchgesetztGroße Datensätze reibungslos mit TanStack Virtual

01Engineering Highlights

Ops Tracker ist eine Full-Stack-Anwendung für Projektverwaltung und Issue-Tracking, die produktionsreife Frontend-Architektur auf Basis einer echten Supabase-Datenbank (PostgreSQL) demonstriert. Sie umfasst Authentifizierung, rollenbasierte Zugriffskontrolle, Kanban-Boards, projektbezogene Issues, vollständige Audit-Protokolle, transaktionale E-Mails und Internationalisierung in drei Sprachen — alles, was ein echtes B2B-SaaS braucht.

  • 01
    Next.js 16 App Router

    Server-Komponenten, Server-Actions und Proxy-Middleware treiben sowohl Authentifizierung als auch i18n end-to-end.

  • 02
    Row Level Security in der DB

    Supabase RLS erzwingt jeden Lese- und Schreibzugriff auf Datenbankebene — standardmäßig Zero Trust.

  • 03
    Dreistufiges RBAC

    Die Rollen Benutzer, Admin und Super-Admin sind als typisiertes Postgres app_role Enum gespeichert und werden serverseitig validiert.

  • 04
    Virtualisierte Issue-Tabelle

    TanStack Table v8 zusammen mit @tanstack/react-virtual hält große Issue-Listen bei jeder Zeilenanzahl flüssig.

  • 05
    Playwright E2E-Abdeckung

    Kritische Authentifizierungs- und Issue-Workflows sind durch End-to-End Playwright-Tests abgesichert.

02Architektur-Überblick

  1. 01
    Feature-basierte Module

    Jede Domain liegt unter src/features/<Domain>/ mit ihren Komponenten, Hooks, Actions, Service und Zod-Schemas an einem Ort.

  2. 02
    Server-first Datenabruf

    Server-Komponenten übernehmen den ersten Render; TanStack Query übernimmt anschließend auf dem Client für Listen, Filter und optimistische Mutationen.

  3. 03
    Verteidigung in der Tiefe

    Supabase RLS plus Server-Action-Rollenprüfungen erzwingen Berechtigungen zweifach — dem Client wird für Autorisierung nie vertraut.

  4. 04
    Append-only Audit-Log

    Jede Mutation wird in eine PostgreSQL audit_logs Tabelle mit typisierten Action-Keys, Akteur, Entität und Metadaten geschrieben.

03Herausforderungen & Entscheidungen

Wichtige architektonische Herausforderungen, Trade-offs und Entscheidungen beim Bau von Ops Tracker.

Herausforderung

Autorisierung auf dem Client ist fragil — jedes geleakte Token oder handgebaute Request kann UI-Wächter umgehen.

Lösung

Die Autorisierung wurde in PostgreSQL via Supabase Row Level Security verlagert; Server-Actions führen vor jeder Mutation eine zweite Rollenprüfung durch.

Trade-off

RLS-Policies sind schwerer zu debuggen als `if`-Statements und jede Tabelle braucht explizite Abdeckung — dafür ist das System Zero-Trust und der Client erhält nie Autorisierungsvertrauen.

Herausforderung

Server-Komponenten liefern einen schnellen, SEO-freundlichen ersten Render, doch Listen, Filter und Inline-Editing brauchen echte Client-Interaktivität.

Lösung

Hybrides Modell: Server-Komponenten holen Daten vor und dehydrieren sie in eine HydrationBoundary, anschließend übernimmt TanStack Query auf dem Client für Filter, Sortierung und optimistische Updates.

Trade-off

Zwei Datenebenen erhöhen den mentalen Aufwand — jedes Feature muss entscheiden, wo seine Daten leben — aber der erste Render bleibt schnell und das UI fühlt sich nie statisch an.

Herausforderung

B2B-SaaS braucht volle Nachvollziehbarkeit: wer hat wann was an welcher Entität verändert — ohne diese Buchführung an Feature-Code zu koppeln.

Lösung

Eine append-only PostgreSQL audit_logs Tabelle wird aus einem einzigen, typisierten Audit-Service beschrieben. Action-Keys sind eine Literal-Union, sodass jede Mutation ihre Absicht auf Typebene deklarieren muss.

Trade-off

Schreib-Verstärkung und Speicherwachstum sind real, aber das Audit-Log ist die Quelle der Wahrheit für Compliance, Debugging und die In-App-Aktivitätszeitleisten.

Herausforderung

Eine flache src/components + src/hooks-Struktur kollabiert unter ihrem eigenen Gewicht, sobald ein Projekt mehrere Bounded Contexts hat.

Lösung

Code ist nach Feature organisiert (src/features/<Domain>/), mit Komponenten, Hooks, Server-Actions, Services und Schemas neben der Domain, zu der sie gehören.

Trade-off

Cross-Feature-Wiederverwendung erfordert eine bewusste Promotion nach shared/, dafür ist Eigentümerschaft offensichtlich und Refactorings einer Domain berühren selten etwas außerhalb ihres Ordners.

04Tech Stack

Frontend
Next.js 16React 19TypeScriptMantine 8SCSS Modules
Daten & Status
TanStack Query v5TanStack Table v8Zod v4@dnd-kit
Backend & DB
SupabasePostgreSQLRow Level SecuritySupabase Auth
Infrastruktur
VercelGitHub ActionsPlaywright (E2E)

05Hauptfunktionen

  • Drag-and-Drop Kanban-Board

    Projektbezogenes Kanban-Board mit @dnd-kit, Spalten durch konfigurierbare Workflow-Status gesteuert.

  • Rollenbasierte Zugriffskontrolle

    Dreistufiges RBAC — Benutzer, Admin, Super-Admin — auf Datenbankebene via Supabase RLS durchgesetzt.

  • Virtualisierte Issue-Tabelle

    Große Issue-Listen mit TanStack Table v8 und @tanstack/react-virtual für reibungslose Performance bei hoher Datenmenge.

  • Vollständiges Audit-Trail

    Jede Mutation wird in PostgreSQL audit_logs mit farbcodierten Action-Badges und aussagekräftigen Zusammenfassungen gespeichert.

  • Internationalisierung

    Vollständige i18n via next-intl für Englisch, Deutsch und Slowenisch einschließlich aller Validierungsmeldungen und Fehlertexte.

  • Admin-Kontrollpanel

    Dedizierter /admin-Bereich für Benutzerrollen-Verwaltung, Issue-Status-CRUD, globales Audit-Protokoll und Super-Admin-Einstellungen.