How to Clone SoundCloud

Create a SoundCloud-style independent-music app called WaveNest using Next.js (App Router), Tailwind, Prisma + SQLite. Niche: underground electronic.

## What to build
An upload-first audio social platform: creators upload tracks (mock the transcode), listeners follow them, like/repost/comment, build playlists, and a persistent waveform player streams across the whole app.

## Screens
- Landing: hero, featured tracks with waveforms, upload CTA
- Home feed: stream of uploads + reposts from followed users as track cards
- Track page: large scrubbable waveform with timestamped comment markers, counts, like/repost, comment-at-time box, related tracks
- Artist profile: banner, follow button, Tracks/Playlists/Reposts tabs
- Upload: audio file input with a fake transcode progress bar, title, cover, genre, tags
- Library: likes, playlists, following
- Search/discovery: search + genre rows + trending

## Persistent player
A global bottom-bar player (artwork, title, scrubbable waveform/progress, play/pause, next/prev, queue) that does NOT remount on navigation - keep audio state in a top-level provider.

## Prisma schema
User (id, name, email, avatar, bio, followerCount), Track (id, userId, title, coverUrl, audioUrl, waveform Json, duration, genre, playCount, likeCount, repostCount, createdAt), Follow (followerId, followeeId), Like (userId, trackId), Repost (userId, trackId, createdAt), Comment (id, trackId, userId, body, timestampSeconds, createdAt), Playlist (id, userId, title), PlaylistTrack (playlistId, trackId, position)

## Logic (must actually work)
- Feed query: union of tracks by followed users and reposts by followed users, ordered by time
- Timestamped comments store the playback second and render markers positioned along the waveform width
- Play count increments once per genuine play (debounce, server-side)
- Like/repost are idempotent (unique constraints); reposts surface in followers' feeds

## Style
Clean and crisp, original: white UI, hot-coral accent (#FF6A3D), sharp waveform rendering (draw from a peaks array on a canvas), dense compact track cards. Mobile-first.

Seed: 8 artists, ~20 tracks with generated waveform peak arrays and silent placeholder audio, follows/likes/reposts, and several timestamped comments so feeds and waveforms feel alive.

Build a production-quality SoundCloud-style audio platform. The audio pipeline and streaming access are the hard parts - design them first and assume hostile clients trying to rip files.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; a global audio context provider so the player survives route changes
- PostgreSQL via Prisma; NextAuth (email + Google); object storage (S3/R2) + CDN for audio segments
- Audio: server-side FFmpeg transcode to HLS (AAC) + precomputed waveform peaks JSON

## Core design: the audio pipeline (do this first)
Upload flow: client uploads original → background worker transcodes to HLS renditions and extracts waveform peaks → Track row marked 'ready' with hls_url + waveform. Until ready, the track is not playable. Build this as a queued job, not inline in the request.
Streaming: the play endpoint returns a short-TTL signed HLS manifest URL only; never expose the original file. Ad-supported free plays get an audio ad pre-roll injected; paid users skip it. This signed-URL + transcode boundary is the whole product spine.

## The persistent player
Single <AudioProvider> at the app root holding the HTMLAudioElement and queue; pages dispatch play/seek actions. The player UI binds to context and must not unmount on navigation - verify by navigating mid-track with no audio gap.

## Schema
users, tracks (status, hls_url, waveform jsonb, duration, counters), follows, likes (unique user_id+track_id), reposts, comments (timestamp_seconds), playlists, playlist_tracks, plays (append-only for counts/recommendations), subscriptions. Index follows(follower_id), tracks(user_id, created_at), plays(track_id).

## Implementation order
1. Schema + auth + upload that stores the original and enqueues a transcode job (stub the worker, mark ready)
2. Transcode worker (FFmpeg → HLS + waveform peaks); play endpoint with signed manifest URLs
3. Global AudioProvider + waveform player UI; verify cross-route continuity
4. Track/artist pages, follows, feed (followed uploads + reposts)
5. Likes/reposts/playlists; timestamped comments rendered on the waveform
6. Free-tier audio ads + paid subscription that removes them and enables offline
7. Search, charts, recommendations from the plays table

## Quality bar
- No track is playable before transcode completes; original files are never served to clients
- Player has zero audio gap across navigation; lock-screen/media-session metadata set on mobile web
- Play counts resist trivial inflation (server-side, debounced, dedup per user/session)

Start with step 1; show me the upload handler, the Track status state machine, and the transcode job interface before continuing.

Design the complete UI for a SoundCloud-style independent-music app called WaveNest. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: clean, crisp, music-forward - white/near-white surfaces, a hot-coral accent (#FF6A3D), sharp waveform visuals, dense but breathable track cards.

## Global element: persistent player
A fixed bottom bar on every screen: track artwork, title + artist, a scrubbable waveform-style progress bar, play/pause, prev/next, shuffle/repeat, volume, a queue popover, and a like heart. It stays put as you navigate.

## Screens

### 1. Home feed
- Top bar: logo, big search, upload button, avatar
- A vertical stream of track cards: cover thumbnail, artist + title, a live mini-waveform with play overlay, and a row of play count, like, repost and comment counts; reposts show a 'reposted by' label

### 2. Track page
- Large layout: big cover, artist/title, follow button
- A wide scrubbable waveform with little comment-avatar markers dotted along it at their timestamps; played portion in coral
- Action row: like, repost, share, add-to-playlist, play count
- Comment composer ('Comment at 1:24') and a timestamped comment list below
- 'Related tracks' sidebar

### 3. Artist profile
- Banner + avatar, name, follower/following counts, follow button, bio
- Tabs: Tracks, Playlists, Reposts; track rows with inline mini-waveforms

### 4. Upload
- Drag-and-drop audio dropzone with an animated transcode/processing progress bar, then a form: title, cover image, genre, tags, description, privacy toggle

### 5. Library & search
- Library: Liked tracks, Playlists, Following - as lists with inline play buttons
- Search results: tabs for Tracks / Artists / Playlists; trending chart with numbered rows

Fully responsive, mobile-first (player collapses to a slim bar that expands to full-screen 'now playing'). Fill everything with believable underground-electronic artist names, track titles, durations and waveform shapes.

Build an independent-music streaming app (SoundCloud model) called WaveNest for underground electronic music.

## Entities
- Track: artist (user) reference, title, coverUrl, audioUrl, waveform (JSON peaks), duration, genre, playCount, likeCount, repostCount, createdAt, status (processing/ready)
- Follow: follower reference, followee reference
- Like: user, track reference; Repost: user, track reference, createdAt
- Comment: track reference, user, body, timestampSeconds, createdAt
- Playlist: user, title; PlaylistTrack: playlist reference, track reference, position
- UserProfile: user, bio, avatar, followerCount, isPro

## Roles
- Listener: follows artists, likes/reposts, comments, builds playlists, plays tracks
- Creator: uploads tracks (with a processing step before they go live), sees plays and earnings
- Admin: moderates tracks and manages featured/trending shelves

## Pages
1. Home feed: stream of new uploads and reposts from followed artists as track cards with mini-waveforms
2. Track page: large scrubbable waveform with timestamped comment markers, counts, like/repost, comment-at-time box, related tracks
3. Artist profile: banner, follow button, Tracks/Playlists/Reposts tabs
4. Upload: audio file with a processing progress step, then title/cover/genre/tags
5. Library: liked tracks, playlists, following
6. Search & discovery: search plus genre rows and a trending chart

## Global player
A persistent bottom-bar player on every page (artwork, title, scrubbable progress, play/pause, next/prev, queue) that keeps playing while you browse.

## Rules
- A track is only playable once its status is 'ready' (after the processing step)
- Feed shows tracks and reposts from followed users, newest first
- Timestamped comments store the playback second and appear as markers on the waveform
- Likes and reposts are unique per user/track; reposts appear in followers' feeds

## Look & feel
Clean and crisp: white UI, hot-coral accent (#FF6A3D), sharp waveform rendering, dense compact track cards. Mobile-first with a collapsible now-playing bar.

Seed: 8 artists, ~20 tracks with waveform peak arrays and placeholder audio, follows/likes/reposts, and several timestamped comments so the feeds and waveforms look alive.