🎵 Spotify Clone - Music Streaming Platform

A full-stack music streaming platform built with Next.js and Supabase, covering song upload, playback, and Stripe-powered premium subscriptions.

Hi! I'm Harsh Vansjaliya, a Full-Stack Developer. You can find more of my work on my Portfolio, check out my code on GitHub, or connect with me on LinkedIn.

---

🎯 Project Goals

• Full listening experience: upload tracks, browse a catalog, search, and play songs with a persistent player.
• Personal library: like songs and keep a library separate from the public catalog.
• Monetization: gate premium features behind a Stripe subscription, synced with the database.
• Managed backend: use Supabase for auth, database, and file storage instead of a custom server.

---

🏛️ Tech Stack

• Framework: Next.js 13 (App Router) + TypeScript
• Backend: Supabase (Postgres database, authentication, file storage)
• Payments: Stripe (products, prices, subscriptions, billing portal)
• State: Zustand for player and modal state
• Audio: use-sound for playback
• UI: Tailwind CSS + Radix UI (dialogs, sliders)
• Forms: React Hook Form

🗄️ Data Model

• songs — title, author, uploaded audio file path, cover image path, linked to the uploading user
• liked_songs — join table between a user and a song
• customers — maps a Supabase user to a Stripe customer ID
• products / prices — Stripe products and pricing plans, mirrored into Supabase
• subscriptions — a user's active Stripe subscription and its status

---

🚀 Features

• Upload songs with audio file and cover image storage via Supabase Storage
• Custom audio player with playback, seek, and volume controls that persists across navigation
• Liked songs and a personal library, separate from the full catalog
• Search across the song catalog
• Stripe Checkout for premium subscriptions, with billing status synced to Supabase
• Email/password and OAuth authentication via Supabase Auth

---

🛠️ Setup & Installation

Prerequisites

• Node.js 18+
• A Supabase project (Postgres database, Auth, and Storage buckets for songs/images)
• A Stripe account with products/prices configured

1. Clone & Install

git clone https://github.com/harsh6575/spotify-clone.git
cd spotify-clone
npm install

2. Configure Environment

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

NEXT_PUBLIC_SITE_URL=http://localhost:3000

STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=

3. Set Up the Database

Create the songs, liked_songs, customers, products, prices, and subscriptions tables in your Supabase project's SQL editor, matching the schema in types_db.ts, and add storage buckets for song audio and cover images.

4. Run the App

npm run dev

App runs at http://localhost:3000.

---

👤 About Me

Harsh Vansjaliya Full-Stack Developer

• 🌐 Portfolio: harsh-vansjaliya.vercel.app
• 💻 GitHub: harsh6575
• 🔗 LinkedIn: Harsh Vansjaliya