Full Stack Spotify Clone

Live Application: https://full-stack-spotify-clone-next-13-4-react-stripe-supa-6u8l4u4uk.vercel.app/

A full-stack Spotify clone built with Next.js, React, Stripe, Supabase, PostgreSQL, and Tailwind CSS. ![Demo GIF](

Full-Stack-Spotify-Clone.mp4

)

Introduction

This project is a clone of the popular music streaming service, Spotify. It is a full-stack application that allows users to create accounts, browse and play music, create playlists, and more. The application uses various technologies like Next.js, React, Stripe for payments, Supabase for authentication and database, PostgreSQL for data storage, and Tailwind CSS for styling.

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

Technologies Used

Next.js
React
Stripe
Supabase
PostgreSQL
Tailwind CSS
TypeScript
And various other dependencies (see package.json for a full list).

Getting Started

Installation

Clone the repository to your local machine:

git clone https://github.com/Bahri_Adem/Full-Stack-Spotify-Clone-Next-13.4-React-Stripe-Supabase-Tailwind.git

Change into the project directory:

cd Full-Stack-Spotify-Clone-Next-13.4-React-Stripe-Supabase-Tailwind

Install the project dependencies:

npm install

Configuration

Create a .env.local file in the project root and configure the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

Usage

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to access the application.

Contributing

Contributions to this project are welcome! If you'd like to contribute, please follow these guidelines:

Fork the repository and create a new branch.
Make your changes and commit them with descriptive commit messages.
Open a pull request, explaining the changes and why they should be merged.

Bahri-Adem/Full-Stack-Spotify-Clone-Next-13.4-React-Stripe-Supabase-Tailwind