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

1. Clone the repo and go into the repository

   git clone https://github.com/jhuboo/spotify-clone.git
   cd spotify-clone

2. Install NPM packages

   npm install

3. 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=

4. Run Development Server

   npm run dev

5. Open http://localhost:3000 to see a running dev version of the app

6. [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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. 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

(back to top)

• Code with Antonio | Antonio Erdeljac
• NCS | NoCopyrightSounds
• Pixabay