Marketplace

Public discovery flows: browse beats, explore producers, preview audio, and purchase licenses.

Pages

• / — landing with featured content
• /beats — catalog with filters, sort, search
• /beats/:slug — beat detail, waveform player, licenses, comments
• /producers — producer directory
• /producers/:username — producer storefront
• /search — search results
• /favorites — saved beats (authenticated)

Audio playback

• useGlobalAudio — Howler.js persistent player across navigation
• WaveformAudioPlayer — canvas waveform visualization
• Preview streams from /audio/* with Range support for mobile

Relevant API

• GET /api/beats — list with query params (genre, BPM, search)
• GET /api/beats/:slugOrId — detail with licenses
• GET /api/users/producers — producer list
• GET /api/users/:identifier/beats — beats by producer
• POST /api/beats/:id/favorite — toggle favorite
• GET /api/comments/beats/:beatId — beat comments

Key components

• StorefrontBeatCard, ListingContent
• HorizontalFilterBar, FilterPills
• BeatComments, ShareDialog
• ProducerCard, ShareDialog