Initial commit: YouTube Studio Flow (backend, frontend, infrastructure, docs)

2026-08-11 12:27:44 +02:00
commit d5af006443
304 changed files with 74604 additions and 0 deletions
@@ -0,0 +1,63 @@
+# StudioFlow Frontend Implementation Plan
+
+## 1. Directory Structure (Next.js 15 App Router)
+
+```text
+frontend/
+├── src/
+│   ├── app/                    # Pages & Routing
+│   │   ├── (dashboard)/        # Protected routes shell
+│   │   │   ├── videos/         # Video List & Detail Editor
+│   │   │   ├── blocks/         # Block Management
+│   │   │   ├── collaborators/  # CRM
+│   │   │   ├── calendar/       # Planning
+│   │   │   └── bulk-jobs/      # Job Monitoring
+│   │   ├── (auth)/             # Login & OAuth
+│   │   └── layout.tsx          # Providers & Root styling
+│   ├── components/             # Reusable Components
+│   │   ├── ui/                 # Base primitives (Button, Input, Card)
+│   │   ├── video-table/        # Virtualized Table & Filters
+│   │   ├── config-editor/      # D&D Block Editor
+│   │   └── shared/             # Sidebar, Header, QuotaIndicator
+│   ├── hooks/                  # TanStack Query & Logic Hooks
+│   ├── lib/                    # API Client, Utils, Constants
+│   ├── store/                  # Zustand (UI State)
+│   └── styles/                 # Vanilla CSS & Theme
+```
+
+## 2. Core Feature Specifications
+
+### 2.1 Video Table (Command Center)
+- **Engine:** TanStack Table v8.
+- **Virtualization:** `react-window` or `@tanstack/react-virtual` for 1000+ rows.
+- **Features:** 
+  - Inline editing for Title/Tags.
+  - Multi-select for Bulk Actions (Sync, Render, Delete).
+  - Saved View sidebar for quick filtering (e.g., "Missing CTA").
+
+### 2.2 Video Config Editor
+- **Logic:** Manages `VideoConfig` state (blockOrder, overrides, variables).
+- **Interaction:** Drag-and-drop sorting for blocks.
+- **Live Preview:** Debounced rendering call to backend to show final description.
+- **Variables:** Dynamically generated form based on the blocks used in the config.
+
+### 2.3 Quota Dashboard
+- **Visual:** Circular progress indicator for daily units.
+- **Logic:** Polling every 60s while active. Warning notifications when units < 10%.
+
+## 3. Aesthetic & UI Strategy
+- **Theme:** "Dark Studio" (Background: #0f0f0f, Surface: #1e1e1e, Accents: YouTube Red #FF0000).
+- **Typography:** Inter or Roboto (standard for YouTube Studio feel).
+- **Animations:** Framer Motion for layout transitions and modal entries.
+
+## 4. API Integration
+- **Client:** `axios` with interceptors.
+- **Error Handling:** Centralized toast notifications for API errors.
+- **Auth:** NextAuth.js or custom JWT storage with Google OAuth 2.0.
+
+## 5. Phase 1 Implementation Tasks
+1. Initialize Next.js 15 with TS and Vanilla CSS.
+2. Set up `api-client.ts` and `QueryProvider`.
+3. Create global layout (Sidebar + Header).
+4. Implement `VideoTable` with mock data.
+5. Implement `ConfigEditor` basic D&D.