Skip to content

Full Stack Spotify Clone Made By NextJs 13 , React , Typescript , Supabase , Tailwind , Stripe & PostgreSQL.

Notifications You must be signed in to change notification settings

aressss1/sp-clone

Repository files navigation

Full Stack Spotify Clone

Key Features

  • Song upload
  • Stripe integration
  • Tailwind design for sleek UI
  • Tailwind animations and transition effects
  • Full responsiveness for all devices
  • Credential authentication with Supabase
  • Github authentication integration
  • File and image upload using Supabase storage
  • Client form validation and handling using react-hook-form
  • Server error handling with react-toast
  • Play song audio
  • Favorites system
  • Playlists / Liked songs system
  • Advanced Player component
  • Stripe recurring payment integration
  • How to write POST, GET, and DELETE routes in route handlers (app/api)
  • How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
  • Handling relations between Server and Child components in a real-time environment
  • Cancelling Stripe subscriptions

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/aressss1/sp-clone.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

Add SQL Tables

Use database.sql file, create songs and liked_songs table

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command description
dev Starts a development instance of the app

Preview:

prismify-render-1716880801439 prismify-render-1716880972440 prismify-render-1716880955637 prismify-render-1716880938707 prismify-render-1716880923700 prismify-render-1716880906603 prismify-render-1716880870455

About

Full Stack Spotify Clone Made By NextJs 13 , React , Typescript , Supabase , Tailwind , Stripe & PostgreSQL.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages