Next Spotify Clone

Sections

• Technologies
• What I Learned

Technologies

The technologies used for this web app are:

• Next.Js
• Supabase
• Radix UI
• Zustand

The main framework used for the application is Next.js which is using the newest app directory. As a database I decided to go with Supabase which I had heard quite a lot about, but had never gotten around to trying it. It was actually an enjoyable experience, I got to set it up and start working with it quickly. I would definetely use it again. Radix UI is used for the modal menus.

Notes

useSupabaseContext is mainly used for content that requires authentication. useUsabaseClient provides read access to both authenticated and unauthenticated users developing with stripe the webhook needs to be active to keep supabase and stripe in sync by running stripe listen --forward-to localhost:3000/api/webhooks

Hooks like this are beautiful

const useOnPlay = (songs: Song[]) => {
    const player = usePlayer();
    const authModal = useAuthModal()
    const { user } = useUser()

    const onPlay = (id:string) => {
        if(!user) return authModal.Open()
        
        player.setId(id)
        player.setIds(songs.map(song => song.id))
        
    }

    return onPlay
}

How it works

const onPlay = useOnPlay(songsArray)
<button onClick={ (id) => onPlay(id) } >Set Song id</button>

It gets first called with the array of the songs that are currently available to the user. It then gets called a second time to set the id of one of the current available songs as playing and adds the rest of the songs to the queue. It gets so much done with so little lines of code.

What I learned

During this project I noticed there were several tools that I had been omitting as a React developer. Mainly the use of providers and hooks.

For Future Reference:

• I should use Providers to faciliatate the interaction between components across different levels of depth in the application. They are especially useful to render toast notifications and modal menus
• Combining the power of hooks with providers is a powerful way to access data across the entire application avoiding rerenders and refetching of duplicate data
• Zustand can be reserved to adding interactivity across different components. Zustand is especially useful to work alongside providers to toggle them on and off.