Playback experience
I built Splicify in Next.js 13 as a music prototype with accounts, track uploads and subscriptions. Each user also has liked songs and a library for uploaded tracks. The player stays fixed on the page and controls playback, volume and track progress. It can also skip to the previous or next track and automatically advances when the current one ends.
Storage and server routes
I used React, TypeScript and Tailwind for the app, along with Supabase, Stripe, Zustand and use-sound. A signed-in user with an active subscription can upload a song title, author, MP3 file and image. Supabase stores the media, then the app writes the metadata and user id to the database.
The home page loads the newest songs. Separate queries load each user’s liked songs and uploaded tracks, along with the public storage URLs needed for playback.
All Stripe calls go through server routes. One creates subscription checkout sessions, another opens account management, and webhooks sync product, price and subscription events through Supabase helper functions.
Repository and demo
Both the repository and hosted prototype are public.