Git Product home page Git Product logo

spotify-clone's Introduction

Spotify Clone App (Next.js)

Introduction

This is a Spotify clone app created using Next.js, a React framework for server-side rendering and building modern web applications. 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.

Features

  • 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.

Demo

You can access the live demo of the app at https://spotify-clone-kpirabaharan.vercel.app/.

  • Feel free to use the anonymous account linked to a dummy email address.
  • Or you can use your own email address. 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.
  • Please don't unsubscribe from the spotify plan from the dummy account. I want to show the billing portal to visitors.

Technologies Used

  • Next.js: React framework for server-side rendering and building web applications
  • React: JavaScript library for building user interfaces
  • Tailwind CSS: Utility-first CSS framework for styling
  • Supabase: Backend-as-a-Service (BaaS) platform for storing songs, artwork, and user data
  • Stripe: Payment processing platform for handling recurring payments

Screenshots

Home Page

Home Page

Mobile Player

mobile-player

Stripe Billing Portal

Stripe Billing Portal

License

This project is licensed under the MIT License.

Contact

If you have any questions or suggestions, please feel free to reach out to me:

spotify-clone's People

Contributors

kpirabaharan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.