This repository contains the code of a music playing app (Spotify Clone), made using Next.js, TypeScript, Tailwind CSS, Stripe & Supabase. The app replicates the core functionalities of Spotify, allowing users to discover, search, and play music. All songs and associated artwork are stored using Supabase, a backend-as-a-service (BaaS) platform. Users can subscribe to a Spotify plan using Stripe for recurring payments, and webhooks are set up to update Supabase when Stripe events occur.
👉 User Authentication: Users can sign up or log in to their accounts using their email and password, or authenticate with their GitHub account.
👉 Home Page: Display the newest songs uploaded to Supabase, allowing users to discover the latest music.
👉 Search: Users can search for artists or tracks.
👉 Music Player: Play and control music tracks with features like play, pause, skip, and shuffle.
👉 Automatic Queue Management: Playing a song automatically adds related songs or songs in the playlist to the queue for uninterrupted music playback.
👉 Favorite Songs: Users can save their favorite songs and access them later.
👉 Upload Songs with Artwork: Users can upload their own songs along with custom artwork, which is stored on Supabase.
👉 Subscription Plans: Users can subscribe to different Spotify plans using Stripe for recurring payments.
👉 Webhooks: Set up webhooks to update Supabase when Stripe events occur, ensuring accurate subscription and payment data.
- React.js - JavaScript Library
- Next.js - Web Development Framework
- TypeScript - Programming Language
- Tailwind CSS - CSS Framework
- Prettier - Code Formatter
- React Hot Toast - Toast Notifications
- Supabase - Backend-as-a-Service (BaaS)
- Stripe - Payment Processing Platform
You can access the live demo of the app at https://spotify-clone-ivory-sigma.vercel.app/.
- Feel free to use and play with the app.
- You can make an account using your own email address & confirm it using verification/confirmation link.
- This deployment is in test mode so you can "pay" (dummy transactions) with fake information.
- The test payment card is 4242 4242 4242 4242. The rest of the information can be made up.
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/Mubassim-Khan/Spotify-Clone-Next.js-
Open the project in your preferred code editor.
-
Install the project dependencies using npm:
npm install- Set Up Environment Variables by creating a new file named
.envin the root of your project and add the following variables:
# Supabase credentials
NEXT_PUBLIC_SUPABASE_URL="your credentials"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your credentials"
SUPABASE_SERVICE_ROLE_KEY="your credentials"
# Stripe credentials
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your credentials"
STRIPE_SECRET_KEY="your credentials"
STRIPE_WEBHOOK_SECRET="your credentials"Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from Supabase and Stripe
- Run the project
npm run dev-
Open http://localhost:3000 to view it in your browser.
-
To view webhooks, refer to Stripe documentation for Webhooks (may require a login to your account) Documentation
This project is licensed under the MIT License.
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
- Copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
If you have any questions, suggestions, or feedback, you can reach out to the project maintainer:
- LinkedIn : Mubassim Ahmed Khan
- Email: mubassimkhan@gmail.com