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
.
• Next js
• Typescript
• Stripe payment
• Supabase
• Tailwind
Additional use full packages installed :
- radix-ui ( Took Modal & Slider for music player and volume slider ).
- react-hot-toast ( for making toast popup ).
- react-spinners ( for loader screens ).
- use-sound ( for music related functionality ).
- zustand ( for state managent )
- [ ... etc ]
- User can play song what he likes and can add songs also.
- To
play
/like
/add
any songs user must be logged-in. - Addition of song is for
premium
user only, can takesubscription
to add any music to library. - In
library
section andliked songs
section, only the songs you have marked will be avivible. - On
search
section andhome page
all songs in s3 will be there for all users even logged out user too. - On
music player
section just as original, songpause-play
volume up-down
,mute
,next-previous songs
andsong duration slider
is also available. - App is responsive
- To achive account functionailty Supabase Auth has been use.
- User can
log-in
,sign-up
, can usemagic link
fuctionalitiy to log-in and canreset password
. - On sign-up and magic link login, a mail will be sent to you provided gmail.
You can create a user to add music or play music. or use use the credentials below.
User 1 : sarthakbakshi14@gmail.com
Password : 123456789
User 2 : sarthakbakshii@gmail.com
Password : 123456789
- 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
-
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;
-
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"], }, };
-
Create an account on Stripe and reacte a project in it, in my case its
spotify_clone
. -
Go on its DashBoard. your selected project and always on Developer Mode.
-
You can take
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
andSTRIPE_SECRET_KEY
fromAPI KEY
option for setup. -
Write all your code for Webhooks and supabase-stripe data fetching.
-
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