Aktueller Stand der App

Letztes Update: 2026-02-16 | Status: Production-Ready mit Erweiterungen

Überblick

Die Breakout-Musik-Plattform ist funktional vollständig und in Produktion. Alle Kern-Features sind implementiert und getestet. Diese Dokumentation beschreibt den AKTUELLEN CODE-STAND — nicht Plans oder Visionen, sondern was tatsächlich gebaut ist.

Markierungen:

🟢 VOLLSTÄNDIG — Produktionsreif, alle Tests grün
🟡 PARTIELL — Gebaut, aber noch kleine Features offen
🔴 FEHLT — Noch nicht implementiert
🔵 GEPLANT — In nächstem Sprint/Roadmap

🏗️ Technologie-Stack

Frontend

Komponente	Version	Status
React	19	🟢
Vite	7	🟢
Tailwind CSS	v4 (CSS-based config)	🟢
TypeScript	strict mode	🟢
Supabase JS Client	v2	🟢

Besonderheiten:

CSS-basierte Tailwind-Config (kein tailwind.config.ts)
@import 'tailwindcss' + @theme in index.css
Mobile-first Design
Dark Theme Standard

Backend & Database

Komponente	Status	Details
Supabase (Postgres)	🟢	42 Migrations, 16 Tabellen
Supabase Auth	🟢	OAuth + Email/Password
Supabase Realtime	🟢	Live-Subscriptions aktiviert
Supabase Storage	🟢	Private "tracks" Bucket, signed URLs

Serverless Functions

Tool	Provider	Status
13 Netlify Functions	Netlify	🟢
Request Auth	JWT validation	🟢
Stripe Webhooks	Stripe	🟢

Payments & Monetization

System	Status	Details
Stripe Checkout	🟢	4 Payment Modes: entry_fee, buy_first, skip_to_n, boost
Stripe Connect	🟢	Creator Payouts, Account Management
Webhook Processing	🟢	Race-condition guards, idempotency keys

📦 Directory Layout

apps/web/src/
├── components/         (57 Komponenten, 8 Ordner)
│   ├── host/          15 Host-Dashboard-Komponenten
│   ├── viewer/        13 Viewer/Queue-Komponenten
│   ├── shared/        19 Shared-Komponenten
│   ├── artist/         2 Artist-Profile-Komponenten
│   ├── community/      5 Community-Feed-Komponenten
│   ├── dev/            3 Development-Tools
│   └── layout/         (empty, routing via pages)
├── hooks/             19 Custom Hooks
├── lib/
│   ├── types.ts       Alle TypeScript Interfaces
│   ├── pricing.ts     Preisberechnungs-Logik
│   ├── supabase.ts    Supabase Client Init
│   ├── api.ts         API-Helferfunktionen
│   └── formatters.ts  Text/Currency-Formatters
├── pages/             15 Route-Pages
└── contexts/          AudioPlaybackContext

netlify/functions/     13 Serverless Functions
supabase/
├── migrations/        42 SQL-Migrationen
└── seed.sql          (optional)

🟢 VOLLSTÄNDIG IMPLEMENTIERT

Kern-Features

1️⃣ User Authentication & Profiles

✅ Supabase Auth (Creators)
✅ Anonymous Viewer Tokens (localStorage-based)
✅ Artist Registration & Profiles
✅ Artist Achievements System
✅ Profile Customization (bio, avatar, social links, music links)

Komponenten:

AuthGuard, ArtistAuthGuard (Route Protection)
ArtistRegistrationModal, ProfileCard
ArtistBadge, RegistrationBadge

Pages:

AuthPage (/auth) — Login/Signup für Creators
ArtistAuthPage (/artist/auth) — Artist Registration
ArtistProfilePage (/artist/:artistName) — Public Artist Profile
ArtistAccountPage (/artist/account) — Artist Settings
MeinAccountPage (/account) — Creator Account Settings

2️⃣ Session & Queue Management

✅ Live Session Hosting
✅ Real-time Queue Updates
✅ Queue Position Display
✅ Entry Status Tracking (waiting → playing → played → removed)
✅ Rating System (Multi-Criteria + Simple)

Database Tables:

sessions — Session Config & State
queue_entries — Individual Track Entries
entry_ratings — Rating Data
rating_criteria — Custom Rating Attributes

Pages:

HostDashboard (/:creatorName/host) — Creator Control Panel
ViewerPage (/:creatorName) — Viewer Queue & Submission
BewertungskriterienPage (/criteria) — Rating Setup

Host Components:

AudioPlayer — Now Playing Control
QueueManager — Queue Manipulation
NowPlaying — Track Display
MultiCriteriaRating — Advanced Rating UI
SessionConfig — Session Settings
EarningsDisplay — Revenue Summary

Viewer Components:

SubmissionForm — Track Submission
QueueList + QueueItem — Queue Display
QueuePositionPicker — Position Selection (for paid entries)
MyEntry / MyEntries — Viewer's Own Submissions
EditEntrySheet — Edit Waiting Entry (1x nur)

3️⃣ Breakout Voting System

✅ Community Voting Phase (viewers vote)
✅ Creator Voting Phase (host rates)
✅ Result Computation & Auto-Achievement Creation
✅ Boost Tokens (free position-1 moves)
✅ Winner Popups & Reveals

Database Tables:

breakout_rounds — Round State & Phases
breakout_votes — Individual Votes
breakout_results — Computed Scores & Outcomes
breakout_boost_tokens — Boost Token Inventory
artist_achievements — Achievement Records

Outcomes:

breakout — Clear winner (3+ votes ahead)
upcoming — Top 3 qualification
no_winner — < 15 total votes

Components:

BreakoutButton — Start Breakout Round
BreakoutVoting — Viewer Voting UI
BreakoutCountdown — Phase Timer
BreakoutProgressBar — Vote Progress
BreakoutWinnerPopup — Result Display
BreakoutReveal — Animated Winner Reveal
BreakoutHostMonitor — Host Vote Review
CreatorVotePanel — Host Rating Interface

Pages:

CommunityPage (/community) — Leaderboards & Breakout Feed

4️⃣ Payment & Pricing System

✅ Free Entry (1x per viewer per session)
✅ Paid Entry (entry_fee mode)
✅ Skip-to-Position (skip_to_n mode)
✅ Buy-First (buy_first mode)
✅ Boost Tokens (free position moves)
✅ Dynamic Pricing (min_skip_price + increment %)
✅ Stripe Checkout Integration
✅ Stripe Connect Payouts
✅ Idempotency Keys (duplicate prevention)

Pricing Formula:

skip_price = max(min_skip_price, ceil(topBid * (1 + increment_pct/100)))

Payment Flow:

User selects entry type + position
createCheckoutSession() calculates price
Stripe Checkout opens
Success → Webhook triggers
stripeWebhook() runs atomic insert RPC

Database Tables:

payments — Payment Records
payouts — Payout History
Stripe Account ID in creators table

Security Features:

Race condition guards (refund if breakout started)
Fee calculation on webhook (prevents fraud)
Advisory locks for atomicity
Request deduplication via Map

5️⃣ Artist & Community Features

✅ Artist Profiles with Stats & Achievements
✅ Community Rankings (seasonal)
✅ Artist Feed (plays, breakouts, upcomings)
✅ Platform Messages (admin announcements)
✅ Support Messages (user help requests)
✅ Genre System (Spotify-style)

Database Tables:

artists — Artist Profile Data
artist_achievements — Breakout Records
platform_messages — Admin Messages
support_messages — User Support Tickets

Components:

RankingView — Leaderboard Display
ArtistBadge — Artist Info Card
MessagesTab — Message Board
SessionsFeedTab — Activity Feed
BottomNav — Mobile Navigation
SeasonTab, TheGateTab, RankingTab — Community Tabs

Pages:

CommunityPage — Community Hub
ArtistHomePage — Artist Dashboard

6️⃣ Audio & File Management

✅ Private Storage Bucket ("tracks")
✅ Signed URL Generation (5-min expiry)
✅ Multiple Format Support (mp3, wav, ogg, flac, aac, m4a, mp4)
✅ Storage Cleanup (7+ day stale files)
✅ Path Validation (prevent traversal attacks)

Components:

FileUpload — Audio Upload Handler
TrackPlayback — Audio Player
ViewerNowPlaying — Now Playing Widget

Netlify Functions:

getSignedUrl() — URL generation + ownership check
cleanupStorage() — Automated cleanup

7️⃣ Onboarding & Account Setup

✅ Creator Onboarding Wizard
✅ Default Pricing Configuration
✅ Stripe Connect Setup
✅ Session Creation Flow
✅ Profile Customization

Pages:

OnboardingPage (/onboarding) — Setup Wizard
CashoutPage (/cashout) — Payout Management

Components:

SessionListItem — Active Sessions
SessionDetailView — Session Analytics

Datenbank: 42 Migrationen

Core Tables (Migrations 1-15):

creators, sessions, queue_entries, payments, payouts, reports, blocked_tokens, rating_criteria, entry_ratings

Breakout System (Migrations 16-25):

breakout_rounds, breakout_votes, breakout_results, artist_achievements

Community Features (Migrations 26-35):

artists, artist_stats_cache, platform_messages, support_messages

Extended Features (Migrations 36-42):

breakout_boost_tokens, affiliate system, music_links, genre system, feed tables, artist seed data

Row-Level Security (RLS):

Anon: read active sessions/queue, insert free entries only
Authenticated: read/write own data
Service role: admin access (Netlify functions)

Hooks: 19 Custom Hooks

Hook	Zweck	Realtime
`useSession`	Load active session	✅
`useQueue`	Fetch queue entries	✅
`useAuth`	Current user auth state	✅
`useCreator`	Load creator profile	❌
`useMyCreator`	Own creator profile	✅
`useBreakoutRound`	Current breakout state	✅
`useBreakoutVotes`	All votes in round	✅
`useBreakoutResults`	Computed results	✅
`useArtist`	Artist profile	❌
`useBoostTokens`	Boost token inventory	✅
`useRatings`	Entry ratings	✅
`useAnalyticsSummary`	Session stats	✅
`useActiveSessions`	All live sessions	✅
`useCommunityRankings`	Leaderboard data	✅
`useSessionHistory`	Past sessions	❌
`usePlatformMessages`	Admin messages	✅
`useSupportMessages`	Help tickets	✅
`useRatingCriteria`	Custom rating attributes	❌
`useEntryRatings`	Detailed rating data	✅

Netlify Functions: 13 Serverless

Funktion	Zweck	Auth	Atomic
`submitEntry`	Free queue insert	Participant Token	✅ RPC
`createCheckoutSession`	Stripe Checkout	JWT	❌
`stripeWebhook`	Payment completion	Stripe Signature	✅ RPC
`getSignedUrl`	Audio playback URL	Participant Token	❌
`castBreakoutVote`	Community vote	IP Hash	✅ Advisory Lock
`computeBreakoutResults`	Score calculation	Service Role	✅
`editEntry`	Edit waiting entry	Participant Token	✅ RPC
`freeBoost`	Use boost token	Participant Token	✅ RPC
`cleanupStorage`	Delete stale audio	Service Role	❌
`createConnectAccount`	Stripe onboarding	JWT	❌
`processWeeklyPayouts`	Batch payout	Service Role	✅
`stripeConnectWebhook`	Account updates	Stripe Signature	❌
`devSeed`	Test data (local)	Environment	❌

🟡 PARTIELL IMPLEMENTIERT

1. Landing Page & Marketing

✅ Basic LandingPage component
🟡 Missing: Full marketing copy, SEO optimization, social proof
🟡 Missing: Video demos, feature highlights, pricing table
🔴 Missing: Blog/Help articles (in roadmap)

Status: Funktioniert, aber minimalistisch

2. Email System

✅ Architecture planned (AWS SES via Netlify)
🔴 Implementation: 0%
🔴 Missing: Transactional templates (welcome, payment confirmation, breakout results)
🔴 Missing: Newsletter infrastructure

Blockers: Requires email template service + SMTP config

3. Admin Dashboard & Dev Tools

✅ DevPanel component (local development)
✅ IssueCollector (error tracking)
✅ ScenarioPresets (test data)
🟡 Missing: Full production admin panel
🟡 Missing: User management UI
🟡 Missing: Payment audit logs
🟡 Missing: Creator moderation tools

Status: Dev tools exist, but no production admin UI

4. Analytics & Reporting

✅ AnalyticsSummary hook (session stats)
✅ AnalyticsPage (/analytics) — Creator dashboard
🟡 Missing: Platform-wide analytics
🟡 Missing: Trend analysis
🟡 Missing: Export functionality (CSV/PDF)
🟡 Missing: Event tracking (Amplitude/Mixpanel)

Status: Creator analytics work, but limited scope

🔴 NICHT IMPLEMENTIERT

1. Tournament System

Bracket generation
Multi-round tracking
Tournament leaderboard
Prize distribution

Priority: Post-Launch Feature

2. Affiliate/Referral System

Affiliate dashboard
Commission tracking
Referral links
Payout processing

Priority: Post-Launch Feature

3. Advanced Scheduling

Session scheduling calendar
Recurring sessions
Timezone handling
Reminder notifications

Priority: Post-Launch Feature

4. Community Moderation

Report review UI
Content blocking
User bans
Audit logs

Priority: Post-Launch Feature

5. A&R Interface (Artist Management)

Talent scouting dashboard
Artist analytics
Contract management
Recommendation engine

Priority: Season 2 Feature

6. Advanced Achievements

Custom achievement rules
Badge design system
Achievement showcase
NFT integration

Priority: Post-Launch Expansion

📊 Statistik

Kategorie	Anzahl	Status
Komponenten	57	🟢
Hooks	19	🟢
Pages	15	🟢
Netlify Functions	13	🟢
DB Migrations	42	🟢
DB Tables	16	🟢
DB Enums	6	🟢
Tests (Unit)	23	🟡
Tests (E2E)	5+	🟡

🎯 Nächste Schritte

Vor Launch:

Content Review & Branding (Umlaute, German text)
Home Hub / Feed Redesign
Security Audit & Penetration Testing
Performance Testing & Optimization
E2E Test Coverage (critical paths only)

Nach Launch (Q1-Q2 2026):

Email System (transactional)
Admin Dashboard
Affiliate System
Advanced Analytics
Tournament System

Links & Referenzen

Technische Architektur — Full stack breakdown
Komponenten-Inventar — All 57 components
Implementierungs-Guide — How to build new features
Fehlende Features — Prioritized backlog