How to Clone Spotify

Create a Spotify-style streaming platform for independent artists called TuneHarbor using Next.js (App Router), Tailwind, Prisma + SQLite. Artists upload their own tracks; listeners subscribe - no licensed-catalog legal issues by design.

## What to build
A dark, polished music app with a persistent player, playlists, artist profiles and an upload dashboard. Freemium: free users get preview limits; premium ($7.99/mo, mock checkout) streams everything.

## Screens
- Landing: dark hero, value props for listeners and artists ('Artists keep 85%'), featured grid
- Home: horizontal shelves (Recently played, New releases, per-genre rows) with cover cards and hover-play
- Global player bar: play/pause, prev/next, seek with buffering state, volume, queue drawer, like button - persists across all routes (App Router layout + a client PlayerProvider)
- Track/album page: cover hero, tracklist rows with play counts, add-to-playlist popover
- Artist profile: banner, follow button, top tracks by plays, releases grid
- Library: playlists CRUD (create modal, reorder tracks, remove), liked tracks, followed artists
- Search: debounced instant search across tracks/artists/albums/playlists, genre tiles for empty state
- Artist dashboard: upload form (audio file + cover + metadata), my-tracks table with plays/likes, stats cards, transparent earnings-estimate card
- Pricing page with free-vs-premium comparison and mock upgrade flow

## Prisma schema
User (id, name, email, role, isPremium), ArtistProfile (userId, displayName, bio, bannerUrl), Release (id, artistId, title, type, coverUrl, releaseDate), Track (id, releaseId, artistId, title, audioUrl, durationSec, genre, isPremium, position), Playlist (id, ownerId, title, isPublic), PlaylistTrack (playlistId, trackId, position), Like (userId, trackId), Follow (userId, artistId), Play (id, userId, trackId, playedAt, completed)

## Player & logic (must actually work)
- One global <audio> element managed by a PlayerContext: state = current track, queue, position, playing/paused; UI everywhere subscribes to it; navigation must never interrupt playback
- Queue logic: play-now replaces, play-next inserts, album/playlist play loads the whole list; prev restarts under 3s elapsed, else goes back
- Play counting: client posts /api/plays after 30 seconds of actual playback; server dedupes (one qualified play per user/track per 60s) and increments
- Free-tier rules server-checked: premium-flagged tracks return a 30s preview URL to free users and the full file to subscribers; 5 skips/hour for free users tracked server-side
- Earnings estimate: monthly pool = subscriber count × $7.99 × 0.85, split by each artist's share of qualified plays - show the formula on the dashboard

## Style
Dark mode only: background #0F1115, cards #1A1D24, coral #FF5C5C accents on play states, white/gray text hierarchy, Inter, rounded-xl, animated equalizer bars on the playing row, smooth 200ms hover transitions.

Seed: 6 artists, 8 releases, 40 tracks across 5 genres with royalty-free audio URLs and distinct cover art colors, 3 editorial playlists, a demo listener with history and likes, and a demo artist login with plays data so the dashboard charts aren't empty.

Build a production-quality audio streaming platform for independent artists (Spotify mechanics, user-generated catalog). The two hard problems are the persistent player state machine and trustworthy play-counting that feeds artist payouts - engineer those properly.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; Zustand for player state (a global <audio> singleton outside React render)
- PostgreSQL via Prisma; NextAuth (email + Google); Supabase Storage or Cloudflare R2 for audio + artwork with signed URLs
- Zod on every API boundary; Vitest for the play-qualification and royalty-split logic; Playwright for one listen-through E2E

## Core design: the player
lib/player/store.ts owns a singleton HTMLAudioElement and a Zustand store: { current, queue, history, status (idle/loading/playing/paused/error), positionSec }. Actions: playTrack, playCollection(tracks, startIndex), enqueueNext, next, prev (restart if >3s), seek, setVolume. The bar component and every play button are thin subscribers - no audio logic in components. Wire the Media Session API for lock-screen/OS controls and document the PWA limitations vs native honestly in comments.

## Play counting (server-authoritative - it's money)
- Client emits heartbeat events (every 10s of real playback); POST /api/plays/qualify fires at the 30-second mark
- Server validates: track exists, user session valid, no qualified play for the same user/track within 60s (unique partial index), and heartbeats are consistent (no 30s claim 5s after start). Reject and log anomalies
- plays is append-only; play_count on tracks is a materialized rollup refreshed by a periodic job - never incremented from the client
- Royalty math in lib/royalties/split.ts: monthly pool = active premium subs × price × 0.85; artist share = qualified premium-listener plays / total. Pure function, unit-tested with edge cases (zero plays, one artist, rounding to cents must sum exactly to the pool)

## Access control for audio
- Audio files are never public URLs: /api/stream/[trackId] checks subscription status and returns a short-lived signed URL (full file for premium, 30s preview rendition for free users on premium tracks)
- Generate the preview rendition at upload time (ffmpeg first-30s clip) in an async job; track has audioUrl + previewUrl

## Schema
users, artist_profiles, releases, tracks (audio_key, preview_key, duration_sec, genre, is_premium), playlists, playlist_tracks (position with fractional-index reordering), likes, follows, plays (user_id, track_id, played_at, qualified), subscriptions (user_id, status, period_end). Indexes: plays(track_id, played_at), plays unique partial (user_id, track_id, qualified) within window via exclusion or app-level check, tracks(artist_id).

## Implementation order
1. Schema + auth + storage signing + seed (6 artists, 40 royalty-free tracks, 3 playlists, listening history)
2. Player store + persistent bar + queue drawer; play buttons across cards and tracklists
3. Catalog pages: home shelves, track/album, artist profile, search (Postgres full-text)
4. Library: playlists with fractional-index reorder, likes, follows
5. Play heartbeats + qualification endpoint + tests; artist dashboard with stats from the plays table
6. Upload pipeline: file + artwork, ffmpeg preview job, release grouping
7. Subscriptions (Stripe test mode), stream-gating, royalty split job + artist earnings statement page

## Quality bar
- Playback never interrupted by navigation; seek is responsive with optimistic position; player fully keyboard-operable
- Skeleton states on all shelves; deleted tracks degrade to 'unavailable' rows in playlists
- Royalty-split tests prove cents always sum to the pool; anomalous plays logged, not counted

Start with step 1; show me the player store types and the royalty-split tests before continuing.

Design the complete UI for TuneHarbor, a dark-mode music streaming app for independent artists (Spotify-class polish, original identity). React + Tailwind + shadcn/ui + lucide-react. Aesthetic: immersive dark - background #0F1115, raised surfaces #1A1D24, coral #FF5C5C for play buttons and active states, crisp white primary text with #9AA3B2 secondary, Inter font, rounded-xl cards, cover art as the visual hero everywhere.

## Screens

### 1. App shell
- Desktop: left sidebar (logo, Home/Search/Library nav, playlists list, 'Upload music' artist CTA), main scroll area, persistent player bar pinned bottom full-width
- Mobile: bottom tab bar (Home, Search, Library), mini-player docked above it that expands to a full-screen now-playing sheet

### 2. Persistent player bar
- Left: cover thumbnail, track title, artist name, like heart
- Center: shuffle, prev, large coral play/pause circle, next, repeat; thin seek bar with elapsed/total timestamps and a draggable handle on hover
- Right: queue icon (opens right drawer with up-next list and drag reorder), volume slider, expand icon
- Full-screen now playing (mobile): giant cover art with soft glow, title/artist, seek, controls, animated equalizer accent

### 3. Home
- Greeting header ('Good evening'), recently-played quick grid (6 compact tiles), then horizontal shelves: New from artists you follow, Fresh uploads, genre rows - cards with cover, hover overlay coral play button, title and artist

### 4. Track / album page
- Hero: large cover left, type label (ALBUM), big title, artist chip with avatar, year + track count; gradient extracted from cover bleeding into the background
- Action row: large coral play circle, like, add-to-playlist, share
- Tracklist: numbered rows with title, plays, duration; hover swaps number for play icon; currently playing row shows animated equalizer bars and coral title

### 5. Artist profile & dashboard
- Profile: full-bleed banner with name overlay and verified badge, follower count, Follow button, Popular tracks (top-5 list with play counts), Releases grid, About card
- Dashboard (artist's own view): stat cards (plays this month with sparkline, unique listeners, followers, estimated earnings with an info tooltip explaining the 85% split), uploads table with status chips, drag-and-drop upload zone with progress bars and artwork cropper

### 6. Library & playlists
- Tabs: Playlists / Liked / Following; playlist cards with 4-cover mosaic
- Playlist detail: editable title, description, total duration; track rows with drag handles, remove on hover; collaborative avatar stack

### 7. Search & pricing
- Search: large input, instant grouped results (Top result card, Tracks list, Artists circles, Albums grid); colorful genre tiles when empty
- Pricing: Free vs Premium ($7.99/mo) comparison table - preview-only premium tracks and 5 skips/hour vs unlimited; coral upgrade CTA; subtle upsell banner variant for the free tier

Fully responsive, mobile-first. Populate with 6 fictional artists, 40 tracks with varied cover-art colors, realistic play counts and durations - no placeholder gray boxes anywhere.

Build a music streaming platform (Spotify model, independent-artist catalog) called TuneHarbor. Artists upload their own music; listeners stream free with limits or subscribe.

## Entities
- ArtistProfile: user, displayName, bio, bannerUrl, followerCount
- Release: artist reference, title, type (single/ep/album), coverUrl, releaseDate
- Track: release reference, artist reference, title, audioUrl, previewUrl, durationSec, genre, isPremium, playCount, position
- Playlist: owner, title, description, isPublic; PlaylistTrack: playlist reference, track reference, position
- Like: user, track reference; Follow: user, artist reference
- Play: user, track reference, playedAt, qualified (true after 30 seconds of listening)
- Subscription: user, status, renewsAt

## Roles
- Listener: streams tracks, builds playlists, likes and follows; free tier hears 30-second previews of premium tracks and gets 5 skips/hour
- Premium listener ($7.99/mo, mock checkout): unlimited full-track streaming, no skip limits
- Artist: uploads tracks with cover art and metadata, groups them into releases, marks tracks free or premium, sees plays/listeners/followers and an earnings estimate
- Admin: featured-content curation, takedown of reported tracks, platform stats

## Pages
1. Home: shelves of cover-art cards - recently played, new from followed artists, fresh uploads, genre rows
2. Persistent player bar on every page: play/pause, prev/next, seek, volume, queue panel, like - playback continues while browsing
3. Track and album pages: cover hero, play button, tracklist with play counts and durations, add-to-playlist
4. Artist profile: banner, follow button, top tracks, releases grid, about
5. Library: my playlists (create, reorder, remove tracks), liked tracks, followed artists
6. Search: instant results grouped by tracks/artists/albums/playlists, genre tiles when empty
7. Artist dashboard: upload form, my-tracks table with stats, earnings card showing the transparent split formula
8. Pricing: free vs premium comparison with upgrade flow

## Rules
- A play becomes qualified only after 30 seconds of listening; all artist stats and earnings derive from qualified plays
- Earnings estimate: 85% of monthly subscription revenue split by each artist's share of qualified plays - show the formula to artists
- Free users: previews on premium-flagged tracks, 5 skips per hour; premium users unrestricted
- Artists may only upload audio they own; uploads include a rights confirmation checkbox; admins can remove reported tracks
- Deleting a track leaves a greyed 'unavailable' row in playlists rather than breaking them

## Look & feel
Immersive dark theme: near-black #0F1115 background, elevated #1A1D24 cards, coral #FF5C5C play buttons and active accents, Inter font, rounded-xl cards, animated equalizer bars on the now-playing row. Mobile-first with a docked mini-player.

Seed: 6 fictional artists with avatars and banners, 8 releases, 40 royalty-free tracks across 5 genres, 3 editorial playlists, a demo listener with history and likes, and a demo artist with two weeks of play data so the dashboard renders charts immediately.