What I Built
Splicify was a portfolio project for learning how the moving parts of a music product fit together. I used a Spotify-style interface because it forced the app to deal with more than static screens: accounts, uploads, playback, liked songs, a personal library, and a subscription boundary.
How It Worked
The stack was Next.js 13, React, TypeScript, Tailwind, Supabase, Stripe, Zustand, and use-sound. It was a prototype, so the useful part is the shape of the app: stored songs, account-aware library views, subscription routes, and a player that behaved like part of the product instead of a separate demo.
I built the upload path so a logged-in user could submit a title, author, mp3 file, and image. The app stored the audio and image in Supabase storage, then wrote the song metadata and user id to the database.
The rest of the app read from Supabase in product-shaped ways: newest songs on the home view, user-specific liked songs, library entries for uploaded tracks, and public storage URLs for playback. The fixed player handled play/pause, next and previous track navigation, mute, volume, progress, and automatic advance at the end of a track.
What I Would Keep
I kept the product surface broad on purpose. Upload, library, liked songs, search, account, checkout, portal, and webhook paths all had to meet in one small app, which made it better practice than building just a polished media player shell.
Stripe stayed behind server routes. Checkout created subscription sessions, the portal route sent users to account management, and webhooks synced product, price, and subscription events into Supabase helper functions.
Where It Sits Now
Splicify belongs in the archive as earlier full-stack product work. I still like it as a record of connecting Supabase, Stripe, and a real playback UI inside one Next.js app.