30 lines
1.4 KiB
Markdown
30 lines
1.4 KiB
Markdown
# 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)
|
|
1. **Dashboard:** Quota-Verbrauch, Lint-Fehler, aktive Bulk-Jobs.
|
|
2. **Video-Tabelle:** Zentrale Liste mit Filtern, Suche und Bulk-Aktionen.
|
|
3. **Video-Config-Editor:** Drag-and-Drop Editor für Block-Reihenfolge und Variablen.
|
|
4. **Block-Library:** Verwaltung der Textbausteine.
|
|
5. **Kollaboratoren:** Übersicht und Detailseiten für Gast-Creator.
|
|
6. **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.
|