Select a result to preview

Fehlende Komponenten

MOC - Map of Content

Überblick

Dies ist eine exhaustive Liste aller Komponenten und Features, die für den Launch benötigt werden. Jeder Eintrag enthält eine Effort-Schätzung, Impact-Assessment, und Dependencies.

Landing Page (KRITISCH - Blockiert alles)

Status: ❌ Komplett fehlend
Impact: KRITISCH (10/10) - First Impression und Conversion
Effort: 3-4 Tage
Dependencies: Keine

Anforderungen

1. Hero Section

Components needed:

2. Creator-Specific Section

Components:

3. Artist-Specific Section

Components:

4. Tournament Teaser

Components:

Code Structure

apps/web/src/pages/
├── Landing.jsx          # Main landing page
└── components/
    ├── HeroSection.jsx
    ├── ValuePropositionGrid.jsx
    ├── CreatorShowcase.jsx
    ├── ArtistShowcase.jsx
    ├── TournamentTeaser.jsx
    ├── SocialProofSection.jsx
    ├── PricingShowcase.jsx
    ├── FAQSection.jsx
    └── FooterCTA.jsx

Onboarding Flows (KRITISCH - Blockiert User Retention)

Status: ❌ Komplett fehlend
Impact: Sehr Hoch (9/10) - High churn ohne onboarding
Effort: 4-5 Tage
Dependencies: Landing Page, User Auth

Creator Onboarding

Flow:

  1. Creator signups → "Let's get you started"
  2. Profile Setup (name, profile picture, bio, social links)
  3. Session Creation Tutorial (step-by-step: create session, add description, set queue size)
  4. First Session Preview (what will viewers see?)
  5. Invite Friends (QR code, copy link)
  6. Go Live Button
  7. Post-Session: Creator Dashboard preview

Components:

Features:

Artist Onboarding

Flow:

  1. Artist signups → "Welcome to Breakout"
  2. Profile Setup (name, profile pic, bio, social links, Spotify/SoundCloud)
  3. Submit First Song (upload MP3, add title, add description, add cover art)
  4. Understanding Queue System (visual explanation of voting + boosting)
  5. Leaderboard Preview (where will my song rank?)
  6. Tournament Information (qualification path, dates)
  7. Community Guidelines (consent)
  8. Invitation to join Discord/Twitter

Components:

Features:

A&R Onboarding

Flow:

  1. A&R signups (requires label/scout verification - Phase 4)
  2. Profile Setup (name, label, role)
  3. Dashboard Tour (how to search, filter, save artists)
  4. Bookmarking Tutorial (save artists for later)
  5. Create First "Saved List" (e.g., "Potential Signees Q1 2025")

Creator Dashboard (HIGH - Blockiert Creator Retention)

Status: ❌ Komplett fehlend
Impact: Hoch (8/10) - Creator engagement metric
Effort: 3-4 Tage
Dependencies: Supabase auth, session data schema

Main Dashboard View

Sections:

  1. Welcome Card - "You're the #23 Creator this month!" (leaderboard position)

  2. Live Session Card - If currently hosting, show live stats:

    • Current viewers
    • Songs played so far
    • Total boosts (€)
    • Leaderboard position

  3. Recent Sessions Table

    • Date, duration, viewers, boosts, earnings
    • Click to see detailed stats

  4. Earnings Summary

    • Total lifetime earnings
    • This month earnings
    • This week earnings
    • Average per session

  5. Invite Stats

    • How many artists submitted via your invite link?
    • How many viewers signed up via your invite?
    • Potential commission structure (future)

  6. Leaderboard Widget

    • Top 10 creators this month
    • Highlight: where you are
    • Metric: sessions hosted, total viewers, or total earnings

Components

components/host/
├── CreatorDashboard.jsx
├── WelcomeCard.jsx
├── LiveSessionCard.jsx
├── SessionHistoryTable.jsx
├── EarningsSummary.jsx
├── InviteStatsWidget.jsx
└── LeaderboardWidget.jsx

Data Schema (Supabase)

-- creator_sessions
CREATE TABLE creator_sessions (
  id UUID PRIMARY KEY,
  creator_id UUID REFERENCES users(id),
  started_at TIMESTAMP,
  ended_at TIMESTAMP,
  total_viewers INT,
  total_boosts_euros DECIMAL(10, 2),
  songs_played INT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- creator_invite_tracking
CREATE TABLE creator_invites (
  id UUID PRIMARY KEY,
  creator_id UUID REFERENCES users(id),
  invite_code VARCHAR UNIQUE,
  artist_signups INT DEFAULT 0,
  viewer_signups INT DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW()
);

Artist Profile (HIGH - Artist Portfolio & Marketing)

Status: ❌ Komplett fehlend
Impact: Hoch (8/10) - Artist credibility, A&R discovery
Effort: 3-4 Tage
Dependencies: Artist user data, song database, voting system

Public Artist Profile

Sections:

  1. Artist Header

    • Profile picture
    • Name
    • Bio (editable by artist)
    • Social links (Spotify, Instagram, TikTok, Twitter, YouTube)

  2. Stats Section

    • Total votes across all songs
    • Breakout qualification status (% towards 50)
    • Total boosts received
    • Best performing song
    • Join date

  3. Songs Table

    • All songs submitted
    • Current rank, votes, boosts
    • Submission date
    • Play count (if available)
    • Link to vote/boost this song

  4. Qualification Path (if not yet qualified)

    • Visual progress bar: "3/50 qualified"
    • Estimated time to qualification at current pace
    • Required votes for qualification

  5. Breakout Badge (if qualified)

    • "✨ Qualified Breakout Artist"
    • Tournament bracket position (once tournament starts)
    • Tournament results (once tournament ends)

  6. Recent Activity Feed

    • "Just submitted 'Neon Dreams'"
    • "Entered tournament group B"
    • "Got 100 votes on 'Lost Paradise'"

Components

components/shared/ (or community/)
├── ArtistProfile.jsx
├── ArtistHeader.jsx
├── ArtistStats.jsx
├── SongTable.jsx
├── QualificationPath.jsx
├── BreakoutBadge.jsx
└── ActivityFeed.jsx

Data Schema

CREATE TABLE artist_profiles (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES users(id) UNIQUE,
  bio TEXT,
  profile_picture_url VARCHAR,
  spotify_url VARCHAR,
  instagram_url VARCHAR,
  youtube_url VARCHAR,
  twitter_url VARCHAR,
  tiktok_url VARCHAR,
  is_qualified BOOLEAN DEFAULT FALSE,
  qualified_date TIMESTAMP,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE user_songs (
  id UUID PRIMARY KEY,
  artist_id UUID REFERENCES users(id),
  title VARCHAR NOT NULL,
  description TEXT,
  audio_url VARCHAR NOT NULL,
  cover_art_url VARCHAR,
  duration_seconds INT,
  total_votes INT DEFAULT 0,
  total_boosts_count INT DEFAULT 0,
  total_boosts_euros DECIMAL(10, 2) DEFAULT 0,
  submitted_at TIMESTAMP DEFAULT NOW(),
  created_at TIMESTAMP DEFAULT NOW()
);

Invite System (CRITICAL - Viral Growth Dependent)

Status: ❌ Komplett fehlend
Impact: KRITISCH (10/10) - Network effects depend on this
Effort: 2-3 Tage
Dependencies: qrcode.react, Supabase tables

Components

Flow:

  1. User goes to Settings → Invite Friends
  2. Generate button creates unique code if doesn't exist
  3. Display: link + QR code
  4. Copy button for link, Download button for QR code

Component:

// InvitePanel.jsx
const [inviteCode, setInviteCode] = useState(null);
const [qrUrl, setQrUrl] = useState(null);

const generateInvite = async () => {
  const code = await generateUniqueCode();
  const fullLink = `https://breakout.music/?ref=${code}`;
  const qrCode = await QRCode.toDataURL(fullLink);

  setInviteCode(code);
  setQrUrl(qrCode);
};

return (
  <div>
    <h2>Share Breakout</h2>
    <button onClick={generateInvite}>Generate Invite Link</button>
    {inviteCode && (
      <>
        <p>Your link: {`https://breakout.music/?ref=${inviteCode}`}</p>
        <img src={qrUrl} />
        <button onClick={() => copyToClipboard(...)}>Copy Link</button>
        <button onClick={() => downloadQR(...)}>Download QR</button>
      </>
    )}
  </div>
);

2. Invite Redemption

Implementation:

// In signup flow
useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const referrerCode = params.get('ref');

  if (referrerCode) {
    localStorage.setItem('referrer_code', referrerCode);
    // Later, when user completes signup:
    await trackInviteRedemption(userId, referrerCode);
  }
}, []);

3. Invite Tracking

Components:

pages/invite/
├── InvitePanel.jsx
├── InviteQRCode.jsx
└── InviteStats.jsx

Database:

CREATE TABLE invite_tracking (
  id UUID PRIMARY KEY,
  inviter_id UUID REFERENCES users(id),
  invitee_id UUID REFERENCES users(id),
  invite_code VARCHAR,
  redeemed_at TIMESTAMP,
  inviter_type VARCHAR ('creator' or 'artist'),
  invitee_type VARCHAR,
  created_at TIMESTAMP DEFAULT NOW()
);

A&R Interface (Phase 4 - Not needed for Launch, but important later)

Status: ❌ Komplett fehlend
Impact: Sehr Hoch (9/10) - Revenue model + platform differentiation
Effort: 5-7 Tage
Dependencies: Artist data, filtering, authentication/verification

A&R Onboarding & Authentication

Artist Discovery Interface

Features:

  1. Search & Filter

    • By qualification status (all artists, qualified only)
    • By genre
    • By region
    • By date (new artists, trending)
    • By votes (top 100, rising stars)

  2. Artist Cards

    • Profile picture, name, bio
    • Top song preview (play button)
    • Stats: total votes, social followers
    • "Save" button to list

  3. Saved Lists

    • Create custom lists (e.g., "Potential Signees Q1 2025")
    • Add/remove artists
    • Share lists with team members
    • Notes per artist ("Great vocalist, needs production help")

  4. Bulk Actions

    • Export list to CSV
    • Send message to all (batch email template)

Components

components/ard/  (A&R-specific)
├── ArtistDiscovery.jsx
├── ArtistSearchFilters.jsx
├── ArtistCard.jsx
├── SavedLists.jsx
└── ArtistNotes.jsx

Tournament Mode (CRITICAL - Core Feature for Launch)

Status: ❌ Komplett fehlend
Impact: KRITISCH (10/10)
Effort: 10-15 Tage
Dependencies: Major feature, see Technische Anforderungen Tournament

See separate document for detailed requirements.

Notification System (MEDIUM - Engagement Feature)

Status: ❌ Komplett fehlend
Impact: Mittel (7/10) - User engagement and retention
Effort: 2-3 Tage
Dependencies: Email backend, Supabase jobs/scheduling

In-App Notifications

Components:

components/shared/
├── NotificationCenter.jsx (Toast, Notification Bell)
├── NotificationList.jsx   (History view)
└── NotificationPreferences.jsx (Settings)

Types of notifications:

  1. "Your song got 50 votes!"
  2. "You just qualified for the tournament!"
  3. "X people are voting on your song right now"
  4. "A session you invited friends to is starting soon"
  5. "An artist you voted for qualified!"

Email Notifications

Types:

  1. Weekly digest - "Your stats this week: 200 votes, €50 earned"
  2. Milestone notifications - "Congrats! You qualified for Breakout Tournament"
  3. Tournament notifications - "Your group stage bracket is live"
  4. Artist notifications - "Your song is trending (top 50)"

Implementation:

Analytics Dashboard (Internal Tools - Not for Launch but Important)

Status: ❌ Komplett fehlend
Impact: Hoch (8/10) - Growth decisions depend on this
Effort: 3-4 Tage
Dependencies: Data warehouse or aggregation layer

Metrics to Track

User Growth:

Session Metrics:

Revenue Metrics:

Artist Metrics:

Creator Metrics:

Components

apps/admin/  (separate admin dashboard)
├── Dashboard.jsx
├── MetricsGrid.jsx
├── Charts/
│   ├── DAUChart.jsx
│   ├── RevenueChart.jsx
│   └── QualificationProgressChart.jsx
└── Tables/
    ├── TopArtistsTable.jsx
    ├── TopCreatorsTable.jsx
    └── RecentSignupsTable.jsx

Progress Tracker / Public Leaderboards

Status: ❌ Komplett fehlend
Impact: Mittel (6/10) - Gamification + urgency
Effort: 1-2 Tage
Dependencies: Real-time vote/boost aggregation

Public Progress Tracker

Component:

// ProgressTracker.jsx
export const ProgressTracker = () => {
  const [qualifiedCount, setQualifiedCount] = useState(0);

  useEffect(() => {
    // Subscribe to real-time updates
    const subscription = supabase
      .from('artist_profiles')
      .on('*', payload => {
        setQualifiedCount(payload.new.is_qualified ? qualifiedCount + 1 : qualifiedCount);
      })
      .subscribe();

    return () => subscription.unsubscribe();
  }, []);

  return (
    <div className="text-center p-8">
      <h2 className="text-3xl font-bold">
        🎵 {qualifiedCount} / 50 Artists Qualified
      </h2>
      <div className="w-full bg-gray-200 rounded-full mt-4">
        <div
          className="bg-green-500 h-2 rounded-full transition-all"
          style={{ width: `${(qualifiedCount / 50) * 100}%` }}
        />
      </div>
      <p className="text-gray-600 mt-2">
        {50 - qualifiedCount} spots remaining
      </p>
    </div>
  );
};

Leaderboards

Creator Leaderboard:

Artist Leaderboard:

Implementation: Real-time query with Supabase, or cached/materialized view updated hourly

Priority Matrix & Build Order

graph LR
    A["Landing Page
(3-4d)"] -->|Converts traffic| B["Creator Onboarding
(2-3d)"]
    A -->|Converts traffic| C["Artist Onboarding
(2-3d)"]

    B --> D["Creator Dashboard
(3-4d)"]
    C --> E["Artist Profile
(3-4d)"]

    D --> F["Invite System
(2-3d)"]
    E --> F

    F --> G["Tournament Mode
(10-15d)"]

    G --> H["A&R Interface
(5-7d) - Phase 4"]

    B -.->|Nice to have| I["Notifications
(2-3d)"]
    E -.->|Nice to have| I

    G -.->|Internal only| J["Analytics
(3-4d)"]
    F -.->|Engagement| K["Leaderboards
(1-2d)"]

Effort & Impact Summary Table

Component Impact Effort (days) Priority Dependencies
Landing Page 10/10 KRITISCH 3-4 P0 None
Creator Onboarding 9/10 Sehr Hoch 2-3 P0 Landing
Artist Onboarding 9/10 Sehr Hoch 2-3 P0 Landing
Creator Dashboard 8/10 Hoch 3-4 P1 Auth
Artist Profile 8/10 Hoch 3-4 P1 Auth
Invite System 10/10 KRITISCH 2-3 P1 Supabase
Tournament Mode 10/10 KRITISCH 10-15 P0 All above
A&R Interface 9/10 Sehr Hoch 5-7 P3 Artist Data
Notifications 7/10 Hoch 2-3 P2 Backend jobs
Analytics 8/10 Hoch 3-4 P2 Data schema
Leaderboards 6/10 Mittel 1-2 P2 Real-time

Total Effort (P0+P1+P2): ~40-50 days / ~8-10 weeks

Critical Path to Launch

Week 1: Landing + Creator/Artist Onboarding (3 + 2 + 2 = 7 days, but parallel = 3-4 days)
Week 2-3: Creator Dashboard + Artist Profile (3 + 3 = 6 days)
Week 3-4: Invite System (2-3 days) + Quick Wins (2 days) = 4-5 days
Week 4-6: Tournament Mode (10-15 days, biggest piece)
Week 6-7: A/B Testing, bugfixes, performance (5 days)
Week 7-8: Soft launch, gather feedback (3 days)
Week 8: Public launch

Dann: Tournament Mode (live version, not just UI) läuft parallel mit A&R Interface (Phase 4)

MOC - Map of Content | Aktueller Stand der App | Quick Wins | Technische Anforderungen Tournament | Phasen-Plan | Invite-Mechanik