Full Stack Spotifx with Next.js 13.4, App Router, React, Tailwind, Supabase, PostgreSQL, and Stripe.

For DEMO, use Stripe Testing Cards

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
• Stripe recurring payment integration
• 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/alisamirali/spotifx.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