Jamming Spotify API Project

Hello everyone! :wave:t3:
I just finished the Jamming Spotify API Project (Part 1) for the Full Stack path.
It took me almost three weeks and lots of efforts (definitely the hardest project so far).
I got stuck for about 10 days on making the API work :man_facepalming:t3:
Reading documentation and watching videos over and over, until I got some help from great people on the Discord channel.
Anyway, here’s the final result.
Feedback welcome! Share your thoughts and any idea to improve this app (and my code :sweat_smile: ).
Have a great week!

GitHub Repository:

Live Site
https://napetico.github.io/jamming-app/

2 Likes

Hey just a question as I am getting overwhelmed with this project and using yours as sort of “coding backwards” and I am super stuck on the Spotify Authorization. When I look in their documentation it seems super complicated and yours is a) very smooth and to the point and b) very different from someone else who has submitted theirs.

I am finding your Spotify code to be extremely easy and straight forward to understand. How did you come up with it? Was the documentation easy for you to understand or do you have other resources? etc?

thank you for any help you have to offer

1 Like

Hey Kiko, thanks for the massage! I’ll be happy to share my experience with you.

First let me say I’m honored you found my messy code so smooth. Those were three weeks of painful coding and I finally got to that code thanks to a helpful member that helped me out on the Discord channel.

Now, I also had a hard time making sense of the Spotify documentation. It was blurry and confusing, and I ended up testing several logics and lines of code following their instructions (none worked haha).

I knew I wanted users to access the dashboard (with their name on it) using the login button in the first screen, so I had to make the authentication work there.

I tried reverse engineering the solution from the example-project, using google to find ideas, and watched a bunch of videos of people using the API… It was useful to help me see how much options where out there but none of them solved my doubts.

Frustrated, I went to Discord and ask for help there. A few members of the community jumped in to give some ideas but the real breakthrough came thanks to the help of one of them in particular who took the time to iterate options with me over a quick video chat.

Simplifying the login button to replace the URL with the authentication URL was a great idea. Actually, doing the authentication in the first step (and not in the last, as in the example project) was very helpful for my logic. Also, using the useEffect() to check for the accessToken on every render was part of the logic. Once we made the authentication work the rest of the code was a bit easier to complete.

So, going back to your questions, 1) I got to the code by iterating over many wrong ideas (very frustrating process hehe) and reaching out to nice people that helped me with my logic, 2) The documentation was not easy to digest… at all! I actually found more clarity once I moved away from it (this was just for the authentication process. The rest of the API instructions where a little more friendly), and 3) I had other resources, like videos that gave me a few ideas.

I really hope I answered your questions! If you want to have a quick call to go over the code and maybe share insights I’m up for that bro! Hit me up with some dates and I free some time for it.

PD: Here’s a link to a Notion page where I made some notes of the process and some of the codes I tried. Part of it is in Spanish sorry haha but you can do a quick translate and take a look at it: https://www.notion.so/napetico/Pruebas-del-puto-codigo-01d95a3f987b43efa6bb4c6b55379eb3?pvs=4

1 Like

this is so extremely helpful. Someone else also just invited me to chat in the discord. If we could set up a time to chat, I would greatly appreciate it.

and holy cow, 3 weeks?! I kept feeling like this project was only supposed to take a few days maximum and so I was getting extremely frustrated . I too watched some videos but the Spotify documentation looks so different to me now compared to the videos and I was getting really lost. I suppose I just needed to be more understanding of the slow process that this is.

Anyway, I am very new to discord, is your username the same there?

(I understand Spanish so your Notion page will be intriguing to look at! thank you!!

1 Like

Hey again @kiko_noia… Sure, we can make that call happen. I’ll be happy to share insight and have a nice coding chat. What’s your time zone? I’m in Spain.
I’m also @napetico at Discord (Napoleon Bazan). See if you can find me there.
Keep in touch :sunglasses:

hey again! thank you! I found you in discord and sent you a request. Also, I tried accessing your Notion page and it isn’t working for me for some reason. If we could set up a video chat through discord, I’d greatly appreciate it!

1 Like

Kiko! Sorry about the link…
I was sure I set it to be public but it turns out I just made it public inside my workspace haha.
Here’s the link: Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
I got your request in Discord, we take this from there now.
See ya :smiling_face:

Hi,
I am also stuck in a loop with making Spotify API work. I could definitely use a discord community. Can you share the discord link?

Thanks!

Congradulations on finishing this project! I’ve been working on mine for about two weeks, encountering all the same challenges you mentioned, and I’m still going :sweat_smile:

I was wondering if you might notice what’s going wrong with my HTTP request for a user’s ID?

My project is structured differently than yours, but I have successfully managed to acquire a Spotify access token in order to complete my search functionality. Using that token, I can do multiple searches, returning tracks from Spotify and rendering them to the screen.

However, I’m now working on the part where we save the playlist to a user’s account. The first step is I need the ID of the user using my App, so I wrote the following function up to the point where it would just log the response.

  async function getUserName() {
    console.log('Acquiring user ID...');

    const userIDParams = {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer ' + accessToken,
      },
    }
    let userID = await fetch('https://api.spotify.com/v1/me', userIDParams)
      .then(response => response.json())
      .then(data => console.log(data))
  }

However, I keep getting the following error printed in my browser’s console:

  {
    error: {
      message: 'Unauthorized',
      status: 401
    }
  }

What’s so frustrating is that my access token is clearly not “Unauthorized”, otherwise I wouldn’t be able to search in the first place :upside_down_face:

Any feedback or help you could provide would be amazing!

Thanks for your time,
Eric

Hello friends, I have completed the Spotify Jamming Playlist App.

Github Code: https://github.com/asmfish/spotify-jamming-playlist-app

Live on: https://asmo-jammingspotify-app.surge.sh/

Your feedback is much appriciated!

1 Like

HI - Here is the current build for my jamming project. My first attempt I found a video on youtube of someone completing this project as I really struggled to get my head around it. In this version I started again from scratch (there was a 2nd iteration that I abandoned), so this is the 3rd version. I have not built it live yet, But I plan to do that before I do step 2 with the new features and also use that as an opportunity to use the create new branch for new features steps from the git modules.

I also had real problems getting the components to pass props down to the Tracklist component that I could not solve, so I ended up not using that one component and duplicating some of the code, which I know is not ideal. Anyway, here it is:

Many Thanks,

Hi, did you manage to solve this. I had this issue and I had a small typo. happy to share screens and compare notes?