sarthakbakshii / spotify-clone

Spotify clone that have its own [ User/ Adding Music/ Favorites Selection/ Paly ] and lots more feature, using no spotify Api, but using its own backend , s3 bucket and database

Sotify Clone

Spotify clone that have its own User, Adding & Playing Music, Favorites Selection and lots more feature.
In this clone no Spotify Api is used, but funtionality using its own backend, s3 bucket and database.

Tech Stacks

• Next js • Typescript • Stripe payment • Supabase • Tailwind

Additional use full packages installed :

1. radix-ui ( Took Modal & Slider for music player and volume slider ).
2. react-hot-toast ( for making toast popup ).
3. react-spinners ( for loader screens ).
4. use-sound ( for music related functionality ).
5. zustand ( for state managent )
6. [ ... etc ]

---

General Functionalities:

1. User can play song what he likes and can add songs also.
2. To play/like/add any songs user must be logged-in.
3. Addition of song is for premium user only, can take subscription to add any music to library.
4. In library section and liked songs section, only the songs you have marked will be avivible.
5. On search section and home page all songs in s3 will be there for all users even logged out user too.
6. On music player section just as original, song pause-play volume up-down, mute, next-previous songs and song duration slider is also available.
7. App is responsive

Account Functionalities:

8. To achive account functionailty Supabase Auth has been use.
9. User can log-in, sign-up, can use magic link fuctionalitiy to log-in and can reset password.
10. On sign-up and magic link login, a mail will be sent to you provided gmail.

---

For play arround :

You can create a user to add music or play music. or use use the credentials below.

User 1 : [e-mail]
Password : 123456789

User 2 : [e-mail]
Password : 123456789

---

Learning and error fased while development :

1. Insted of directly creating a HTML element custom component, the new and better way i learned :

    import React, { forwardRef } from "react";
    
    interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
   
    const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      ({ className, children, disabled, type = "button", ...props }, ref) => {
        return (
          <button
            type={type}
            className={className}
            disabled={disabled}
            ref={ref}
            {...props}
          >
            {children}
          </button>
        );
      }
    );
    
    Button.displayName = "Button";
    
    export default Button;
   
   

With this you dont have to directly go and do assign all props, it will fetch it from its HTML element extended from.
For full code, visit : component/Button.tsx and component/Input.tsx

2. I wasnt awair of this. this is used in a page level so that, data on the page do not get cashed and alwayes get up to dated.
   export const revalidate = 0;

3. When ever you are fetching a data from bucket, it will return domain of its own, You have to add that in next.config.js.

      const nextConfig = {
        images: {
          domains: ["jqbtmabwrkontiohutdp.supabase.co"],
        },
      };
   
   

---

Stripe payment intigration

1. Create an account on Stripe and reacte a project in it, in my case its spotify_clone.

2. Go on its DashBoard. your selected project and always on Developer Mode.

3. You can take NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY from API KEY option for setup.

4. Write all your code for Webhooks and supabase-stripe data fetching.

5. For useing and testing payment in local machine, you have to download the cli version. click on Web Hook and get full info . OR

   step 1 : Download the CLI and log in with your Stripe account.
   step 2 : .\stripe login after onpening in cmd ( windows ).
   step 3 : Forward events to your webhook, stripe listen --forward-to localhost:4242/webhook.
   in my case it is : .\stripe listen --forward-to loaclhost:3000/api/webhooks.
   step 4 : for testing payments : stripe trigger payment_intent.succeeded.

   NOTE : always keep step 3 on and your machine on , so that your supabse and strip will be in sync in local host testing

---