Built with Next, React, Tailwind, Supabase, PostgreSQL, Stripe
View Demo
Spotify Clone is a music web app, that replicates the core functionality of the Spotify app:
You will need to have NPM installed on your computer:
- npm
npm install npm@latest -g
-
Clone the repo and go into the repository
git clone https://github.com/jhuboo/spotify-clone.git cd spotify-clone
-
Install NPM packages
npm install
-
Setup your environment variables in a
.env
file# Update these with your own Supabase credentials from https://app.supabase.io NEXT_PUBLIC_SUPABASE_URL= NEXT_PUBLIC_SUPABASE_ANON_KEY= SUPABASE_SERVICE_ROLE_KEY= # Note: Stripe Environment variables are not required for the app to function # They need only be added if you want to test payments functionality # Update these with your Stripe credentials from https://dashboard.stripe.com/apikeys NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET=
-
Run Development Server
npm run dev
-
Open http://localhost:3000 to see a running dev version of the app
-
[Optional] - Click on the CirclePlus icon, next to the Your Library on the left sidebar to upload a song from your computer.
- See the demo in above gif to see how to do this!
- Upload Song
- Tailwind design
- Responsiveness for all devices
- Authentication with Supabase
- Github authentication integration
- TODO: Google & Apple 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
- Fetch data in server React components by directly accessing the database
- Handling relations between Server and Child components in a real-time environment
If you have a suggestion, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt
for more information.
-
Anvesh G. Jhuboo - anvesh (dot) jhuboo (at) gmail.com
-
Project Link: https://github.com/jhuboo/spotify-clone