StudioFlow — Frontend

Übersicht

Die Weboberfläche von StudioFlow dient zur Verwaltung von YouTube-Metadaten, zur Konfiguration von Videobeschreibungen und zur Überwachung von Bulk-Jobs.

Technologie-Stack

Framework: Next.js 15 (App Router, TypeScript)
Styling: Vanilla CSS (bevorzugt) oder Shadcn UI / Radix UI für Komponenten
State Management: Zustand (Client State), TanStack Query (Server State)
Tabellen: TanStack Table (virtuelle Listen, Filter, Batch-Select)
Icons: Lucide React
Datum: date-fns

Kernbereiche (Seiten)

Dashboard: Quota-Verbrauch, Lint-Fehler, aktive Bulk-Jobs.
Video-Tabelle: Zentrale Liste mit Filtern, Suche und Bulk-Aktionen.
Video-Config-Editor: Drag-and-Drop Editor für Block-Reihenfolge und Variablen.
Block-Library: Verwaltung der Textbausteine.
Kollaboratoren: Übersicht und Detailseiten für Gast-Creator.
Content Calendar: Monats-/Wochenansicht der Upload-Planung.

UI-Komponenten

video-table/: Hochperformante Tabelle für hunderte Datensätze.
config-editor/: Interaktiver Editor für Video-Strukturen.
quota-indicator/: Visuelle Anzeige des täglichen YouTube-Limits.
lint-badge/: Status-Anzeige für Metadaten-Validierung.

API-Kommunikation

Alle Anfragen erfolgen an den API-Container (Standard: http://localhost:3001). Der API-Client sollte in src/lib/api-client.ts zentralisiert sein.

1.4 KiB Raw Blame History