Quick Wins

Umgehend umsetzbare Verbesserungen ohne neue Features zu bauen. Alle diese könnte ein einzelner Developer in 2-3 Tagen umsetzten.

1. Landing Page: "15% vs 30%" Comparison Section

Impact: Sofort erkennbarer Wettbewerbsvorteil
Effort: 2 Stunden (HTML/CSS, keine neuen Komponenten)

Current State

Landing Page erwähnt "15% Plattformgebühr" in einer Information Card.

Improvement

Neue Section mit explicit Competitor Comparison Table:

┌──────────────┬──────────┬──────────────┐
│ Feature      │ breakout │ Konkurrenz   │
├──────────────┼──────────┼──────────────┤
│ Platform Fee │ 15%      │ 30%          │
│ Creator Gets │ 85%      │ 70%          │
│ Community    │ ✅       │ ❌           │
│ Fair Pricing │ ✅       │ ❌           │
└──────────────┴──────────┴──────────────┘

"Auf 1000 EUR verdienst Du bei uns 300 EUR mehr."

Implementation

File: apps/web/src/pages/LandingPage.tsx
Add new component: CompetitorComparison.tsx
Use Tailwind: simple 2-col table
Location: Nach "Features" Grid, vor "Trust" Box

2. Landing Page: "Für Artists" Funnel Section

Impact: Onboarding von Künstlern (separate audience)
Effort: 3 Stunden

Current State

Landing Page spricht nur Creator an.

Improvement

Neue Section nach Creator CTA:

<section class="py-12 bg-surface">
  <div class="max-w-3xl mx-auto text-center">
    <h2 class="text-3xl font-bold mb-4">
      Du bist Künstler?
    </h2>
    <p class="text-text-muted mb-8">
      Reiche deine Songs in Live-Sessions ein.
      Gewinne Breakouts. Baue deine Community.
    </p>
    <div class="flex gap-4 justify-center">
      <button>Kostenlos registrieren</button>
      <button>Mehr erfahren</button>
    </div>

    <div class="grid md:grid-cols-3 gap-8 mt-12">
      <Card>Alle deine Songs in einer Library</Card>
      <Card>Echtzeit-Feedback von Creator</Card>
      <Card>Automatisch Künstlerprofil nach Win</Card>
    </div>
  </div>
</section>

Implementation

File: LandingPage.tsx
Component: ArtistFunnel.tsx
Link: [Kostenlos registrieren] → /artist-auth

Impact: QR-Code ist bereits gebaut, nur nicht highlighted
Effort: 1 Stunde

Current State

ShareSlide hat QR-Code, aber keine Call-to-Action

Improvement

Add prominent badge/label:

// In ShareSlide.tsx, above QR code
<div className="bg-primary rounded-full px-4 py-2 mb-4">
  <p className="text-bg font-bold text-sm">
    📱 ZEIG DEN QR CODE IM STREAM
  </p>
</div>

Also: Add to Host Onboarding Tip:

"Tipp: Drücke [Share] Tab und zeige QR-Code 📱"

Implementation

File: components/host/ShareSlide.tsx (add badge)
File: OnboardingPage.tsx (add tip)

4. SessionConfig: Default Settings Wizard

Impact: Neue Creator verstehen nicht alle Settings
Effort: 4 Stunden

Current State

SessionConfig hat Inputs aber keine Erklärung.

Improvement

Add tooltips + preset profiles:

<div className="flex gap-4 mb-6">
  <button onClick={() => applyPreset('podcast')}>
    🎙️ Podcast Creator
  </button>
  <button onClick={() => applyPreset('dj')}>
    🎵 DJ / Live Music
  </button>
  <button onClick={() => applyPreset('niche')}>
    🎸 Niche Artist
  </button>
</div>

// Presets
const presets = {
  podcast: {
    min_entry_price: 0,
    min_skip_price: 100,    // 1 EUR
    increment_pct: 50,
    free_entries_per_viewer: 3,
    min_startup_entries: 2
  },
  dj: {
    min_entry_price: 100,
    min_skip_price: 200,
    increment_pct: 25,
    free_entries_per_viewer: 2,
    min_startup_entries: 5
  },
  // ...
};

Each input mit tooltip:

<div className="flex items-center gap-2">
  <label>Min Skip Price</label>
  <InfoIcon tooltip="Minimales Gebot um sich Platz 1 zu sichern" />
</div>

Implementation

File: components/host/SessionConfig.tsx
Add: usePreset hook
Add: Tooltip component (lightweight)

Impact: User überrascht von Preis nicht
Effort: 2 Stunden

Current State

User klickt "Boost" → sofort Stripe Redirect

Improvement

Modal mit Preis-Vorschau:

┌──────────────────────────────┐
│ Dein Song boosten?           │
├──────────────────────────────┤
│                              │
│ Song: "Favorite Track"       │
│ Aktueller Platz: 7           │
│ Neuer Platz: 1               │
│                              │
│ Kosten: 3,50 EUR             │
│ Du zahlst: 3,50 EUR          │
│                              │
│ [Abbrechen] [Zahlung starten]│
└──────────────────────────────┘

Implementation

File: components/viewer/BoostPopup.tsx
Show price before button click
Button links to createCheckoutSession

6. MyEntries: "Edit Track URL" Affordance

Impact: User können Upload-Fehler korrigieren
Effort: 1 Stunde (editEntry API exists!)

Current State

MyEntry zeigt Entry aber Edit Button nicht sichtbar genug

Improvement

Add clear "Edit" button mit Pencil Icon:

<div className="flex justify-between items-center">
  <div>
    <h3>{entry.track_title}</h3>
    <p class="text-sm text-text-muted">Status: {entry.status}</p>
  </div>
  <div className="flex gap-2">
    {entry.status === 'waiting' && (
      <button onClick={() => setEditMode(true)}>
        ✏️ Track ändern
      </button>
    )}
    {entry.status === 'waiting' && (
      <button onClick={() => boostEntry()}>
        ⬆️ Boosten
      </button>
    )}
  </div>
</div>

EditEntrySheet: Already exists, just make visible

Implementation

File: components/viewer/MyEntry.tsx
Better button styling
Link to EditEntrySheet

Impact: FOMO + Trust Builder
Effort: 3 Stunden

Current State

Keine Live-Counter

Improvement

Add real-time counters:

BREAKOUT IN ZAHLEN

[XXX]        [YYY]        [ZZZ]
Creators     Songs        Breakouts
bereits      eingereicht  gevoted
online

(Oder: live pull from DB mit cache?)

Implementation

Component: SocialProofCounter.tsx
Query: SQL aggregates (count distinct creators, count queue_entries, count breakout_rounds where outcome = 'breakout')
Cache: 5 min revalidation (nicht jeden Hit zur DB)
File: apps/web/src/pages/LandingPage.tsx

8. Creator Dashboard: Earnings Summary Card

Impact: Creator sieht sofort wie viel verdient
Effort: 2 Stunden (Hook exists!)

Current State

EarningsDisplay exists aber nicht prominent

Improvement

Add to HostDashboard main view:

┌──────────────────────────────┐
│ 💰 Deine Einnahmen           │
├──────────────────────────────┤
│                              │
│ Diese Session: 12,50 EUR    │
│ Heute: 34,20 EUR            │
│ Diese Woche: 156,80 EUR     │
│                              │
│ [Zur Auszahlung]             │
└──────────────────────────────┘

Implementation

File: components/host/HostDashboard.tsx
Use: useAnalyticsSummary hook (exists!)
Display in hero area

Impact: Mehr Artists registrieren sich
Effort: 2 Stunden

Current State

Modal zeigt nur nach eigener Breakout Win

Improvement

Trigger auch auf:

ANY Breakout Win (nicht nur eigene)
"Upcoming" Achievement
Nach 3 Plays in einer Session

Implementation

File: components/shared/ArtistRegistrationModal.tsx
Update trigger logic in ViewerPage.tsx
More aggressive but not annoying (show once per session)

10. SEO: Meta Tags + OpenGraph

Impact: Shared Links haben Preview
Effort: 2 Stunden

Current State

Kein Meta Tags, kein OpenGraph

Improvement

Landing Page

// apps/web/src/pages/LandingPage.tsx
<Helmet>
  <title>breakout.music — Dein Song. Dein Moment. Dein Breakout.</title>
  <meta name="description" content="Interaktive Song-Queue für Livestreams. Reiche Songs ein, lass Creator live abstimmen, gewinne Breakouts." />
  <meta property="og:title" content="breakout.music" />
  <meta property="og:image" content="https://breakout.music/og-image.png" />
</Helmet>

Creator Pages

// /:creatorName
<Helmet>
  <title>{creator.display_name} auf breakout.music</title>
  <meta name="description" content={creator.bio} />
  <meta property="og:image" content={creator.avatar_url} />
</Helmet>

Implementation

Install: react-helmet-async
Wrap app in Helmet Provider
Add to each page

11. PWA: Add Manifest.json

Impact: "Add to Home Screen" on Mobile
Effort: 1 Stunde

Implementation

Create: public/manifest.json

{
  "name": "breakout.music",
  "short_name": "breakout",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#09090B",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "logo-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Link in index.html: <link rel="manifest" href="/manifest.json">

12. Performance: Lazy-Load BreakoutVoting

Impact: 10% faster initial load on viewer page
Effort: 1 Stunde

Current State

BreakoutVoting loads immediately

Improvement

Lazy-load component (only loaded when breakout phase active):

// ViewerPage.tsx
const BreakoutVoting = lazy(() =>
  import('../components/viewer/BreakoutVoting').then(m => ({
    default: m.BreakoutVoting
  }))
);

// In render:
{breakoutActive && (
  <Suspense fallback={<LoadingSpinner />}>
    <BreakoutVoting {...props} />
  </Suspense>
)}

Implementation

File: pages/ViewerPage.tsx
Pattern already used for DevPanel

13. Bug Investigation: min_startup_entries Race Condition

Impact: Prevent edge case where multiple submissions bypass startup gate
Effort: 2 Stunden (investigation only)

Potential Issue

Wenn 2 Viewer gleichzeitig einreichen und zusammen min_startup_entries erreichen → beide könnten pass-through.

Investigation Checklist

// In insert_queue_entry_atomic RPC:
// 1. Check BEFORE inserting
SELECT COUNT(*) FROM queue_entries
WHERE session_id = p_session_id AND status IN ('waiting', 'playing');

// 2. Advisory lock on session_id
PERFORM pg_advisory_xact_locktext);

// 3. Check AGAIN after lock
SELECT COUNT(*) FROM queue_entries
WHERE session_id = p_session_id AND status IN ('waiting', 'playing');

// 4. Only insert if count < min_startup_entries

Implementation

Review: supabase/migrations/00005_insert_queue_entry_atomic.sql
Add double-check after lock
Test with devSeed (2 concurrent submissions)

14. Onboarding: Add "First Session Tips"

Impact: Creator versteht Queue-Dynamik besser
Effort: 1 Stunde

Improvement

Toast/Hint messages on first session:

- "💡 Tip: Mehr Ratings = schneller zu Breakout"
- "💡 Tip: Share Tab zeigt QR-Code für Stream"
- "💡 Tip: Starte Breakout nach ≥10 Ratings"

Implementation

Add: isFirstSession flag (session creation time check)
Show hints via Toast library (SonnerToast already installed?)

15. Payments: Add Refund UI for Host

Impact: Refund-Anfragen sichtbar machen
Effort: 2 Stunden

Current State

Kein UI für Host um Refunds zu initiieren

Improvement

HostDashboard: "Payments" Tab

List recent payments
[Refund] button (calls API)
Reason input (text)
Sends refund to Stripe

Implementation

Component: PaymentHistoryTab.tsx
Function: refundPayment.mts (Netlify)
Integrate into HostDashboard

Implementation Priority

Diese Woche (2-3 Tage)

Landing Page: 15% vs 30% Comparison
Landing Page: Für Artists Section
ShareSlide: "Im Stream zeigen" Badge
Creator Dashboard: Earnings Summary
SEO: Meta Tags + OpenGraph

Nächste Woche (2-3 Tage)

SessionConfig: Preset Profiles
MyEntries: Edit Affordance
BoostPopup: Price Preview
Artist Modal: More Aggressive Triggers
PWA: Manifest.json

Later (nice to have)

Social Proof Counter
Lazy-Load BreakoutVoting
min_startup_entries Race Condition Check
First Session Tips
Refund UI

Total Effort Estimate

Category	Hours
Landing Page Improvements	8
Frontend UX Tweaks	8
Performance + SEO	4
Bug Investigation	2
Total	22 hours

Team: 1 Dev = 3 working days (with breaks)

Wichtige Verlinkungen

Aktueller Stand der App — Context for improvements
Fehlende Komponenten — Major features (vs these quick wins)
Purchase-Flow Analyse — Payment UX improvements

Quick Wins

1. Landing Page: "15% vs 30%" Comparison Section

Current State

Improvement

Implementation

2. Landing Page: "Für Artists" Funnel Section

Current State

Improvement

Implementation

3. ShareSlide: "Im Stream zeigen" Emphasize

Current State

Improvement

Implementation

4. SessionConfig: Default Settings Wizard

Current State

Improvement

Implementation

5. BoostPopup: Show Price BEFORE Stripe Redirect

Current State

Improvement

Implementation

6. MyEntries: "Edit Track URL" Affordance

Current State

Improvement

Implementation

7. Landing Page: Social Proof Counter

Current State

Improvement

Implementation

8. Creator Dashboard: Earnings Summary Card

Current State

Improvement

Implementation

9. Artist Registration: More Aggressive Modal

Current State

Improvement

Implementation

10. SEO: Meta Tags + OpenGraph

Current State

Improvement

Landing Page

Creator Pages

Implementation

11. PWA: Add Manifest.json

Implementation

12. Performance: Lazy-Load BreakoutVoting

Current State

Improvement

Implementation

13. Bug Investigation: min_startup_entries Race Condition

Potential Issue

Investigation Checklist

Implementation

14. Onboarding: Add "First Session Tips"

Improvement

Implementation

15. Payments: Add Refund UI for Host

Current State

Improvement

Implementation

Implementation Priority

Diese Woche (2-3 Tage)

Nächste Woche (2-3 Tage)

Later (nice to have)

Total Effort Estimate

Wichtige Verlinkungen