Spotify app clone.

This project is a spotify clone, allowing a user to login to their spotify account and add playlists and tracks through a simplified interface built with React, Vite and the Spotify web API.

API Reference

Before we look up some tunes

• Learn how to authenticate from the Authentication docs offered by spotify.
• Understand the Access token from the spotify docs.
• How to Search on spotify.

Documentation

Looking up some tunes.

1. You need to first get an access token following the pcke auth flow to gain access to a user account, our app attempts to gain an authentication code we can exchange for an access token on first load, redirecting the user to sign in to their spotify account so that we can have the auth code we can exchange for an access token later.

2. When the user logs in the app starts the authorization flow to exchange the authentication code we got for an access token we can use to perforn actions on behalf of the user. Logged in as Eric-WG

   once we have an access token, we can perform a search based on a user's query (q: searchTerm).

const endpoint = `https://api.spotify.com/v1/search?`
const urlParams = new URLSearchParams({
    q: term, // query value assigned to the "q" key
    type: 'track | album | artist',
    ...
})

// for our app to fetch we need to configure the fetch deps object to contain our access token.
const params = {
    method: 'GET',
    headers: {
        Authorization: `Bearer ${access_token}` // aquired access token.
    }
}

const url = endpoint.concat(urlParams.toString())
async function getData(){
    ...
    const response = await fetch(url, params) 
    ...
}

get the items array from the response json object, this is where all our requested items live.

...
// tracks location.
const data = response.json()
const tracks = data.tracks.items // array of tracks
...

Parameter	Type	Description
access_token	string	Required. User access_token
type	string	Required. type of data being fetched

3. Add a playlist name and start adding tracks. ...add more tracks to your liking.

4. Save playlist to user account.

5. Verify the app is working as expected. our 3 songs have been added to the playlist, great :)

Important Notice: The app is fine at this point and does what I intended it to, although it does need some exception handling in the authorization process, I didn't intent to implement it now since it was a bit out of scope at the moment, I'll be adding more features and functionality as the scope broadens with time.