create search for song functionality

[Matdweb]

About this issue

Create a functionality that allows the user to search for any song by song name with the Spotify API. These songs must display in the Result box

Search for song functionality

This functionality is all about giving the user the opportunity to search for any songs from Spotify with this Spotify API itself. We give the user an element/searcher to input a certain keyword, name or reference specifically for songs ...

How to search the songs with the Spotify API ?

You can learn about it here in the Spotify API documentation We are using the next endpoint https://api.spotify.com/v1/search?q=${query}&type=track&limit=8 Queris:

• we are calling the v1 endpoint
• search?q=${ the user search input }
• type={ type of content your asking for }
• limit={ limit of elements returned }

api/spotify/searchSongs

You need to create a api/spotify/searchSongs endpoint for this application. This way, you can do API requests in a secure way. You can learn about next.js endpoints here!

remember to use the next.js 13.4 sintaxis, because documentation is sometimes not up to date!

This endpoint should be called from the client. Then, the api requests may be executed in the backend.

I really recommend checking the experimental code of this app and how the whole flow and structure of the api requests and functionalities were built. This since the way the experimental app was build is supposed to be very similar to this app structure Spotiy-Playlist-Retriever

Returned data

If all the api calls are successful. The information returned must consider the following elements:

• id
• song-name
• artists
• album
• uri (very important)

State management

You can learn about this app state management in #21 Pull Request The PR must save the expected-returned data of each song in the SpotifyContext, because this way the rest of the components may have easier access to this data. So, this means that when new data is received from the SongSearcher, based on the input, the data must also be updated in the context for displaying in other components.

Display the data

Each of the songs returned form the previous request of songs, must be displayed in the Result Box wich is the SongsContainer Here’s how it should look according to the design:

How to display this data in the layout ?

Make use of the SongContainer component and just fill the attributes with the correct info. Like this:

see song as the object containing the data of an specific song: id, song-name, artist, album, uri

This way everything should display correctly 👍

You may also check the new pull request #28

[aasimtaif]

Hi, I was attempting to resolve this issue but in my local environment when I try to signup it shows
INVALID_CLIENT: Invalid redirect URI My redirect URI is http://localhost:3000/api/auth/callback/spotify Can you please help I have changed the environment variable to my client ID and client secret spotify_err.webm

[Matdweb]

Hi! Nice receiving this message! Yeah I will try to help you!

What I initially see is that if you already set the CLIENT_ID and CLIENT_SECRET in your local environment with the correct values under this names: SPOTIFY_CLIENT_ID SPOTIFY_CLIENT_SECRET you could try doing this:

1. If you know the Spotify API, you know that you need to use the spotify dashboard to create an application in order for the Spotify service to give the CLIENT CREDENTIALS, here's the step by step process in case you need it. Now in this application you just created, in the Settings button you need to set the Redirect URIs field with the group of uris your application may be redirected to. So the URI you send me must be set in this field this way:

2. If the problem persists and your app is throwing the following warnings better set the variables in your .env.local doc as: NEXTAUTH_SECRET= a key string not greater than 20 characters NEXTAUTH_URL= the current page link in this case http://localhost:3000/

For the key string I can recommend you this page as a key generator I used the first 20 characters of the SHA 128-bit Key

That way if I am not wrong your app should be locally equal to mine and everything should work correctly!

Please if you don't understand anything or if you keep having this problem don't hesitate to contact me, maybe there's something I am not considering!

[Matdweb]

IMPORTANT This issue is not up to date. I need to add some other points to consider while creating this functionality! I will try to work on this as soon as possible!

[aasimtaif]

Hi, I was attempting to resolve this issue but in my local environment when I try to signup it shows INVALID_CLIENT: Invalid redirect URI My redirect URI is http://localhost:3000/api/auth/callback/spotify Can you please help I have changed the environment variable to my client ID and client secret spotify_err.webm

resolved

[Matdweb]

Hi, I was attempting to resolve this issue but in my local environment when I try to signup it shows INVALID_CLIENT: Invalid redirect URI My redirect URI is http://localhost:3000/api/auth/callback/spotify Can you please help I have changed the environment variable to my client ID and client secret spotify_err.webm

resolved

Great! I will be working on this branch as well!

[aasimtaif]

HI @Matdweb when I try to make api calls for the songs I am getting invalid token error

[Matdweb]

HI @Matdweb when I try to make api calls for the songs I am getting invalid token error

Hello @aasimtaif ! I am truly sorry I didn't see your message here! Ok I don't know how is your code being build but, if you have make any changes to the way the access token has been call or you are making it differently, then check the following:

(if you haven't move anything from the pulled code I did, go to the no changes section)

changes

• if you are having problems with the access token I definitely recommend you take a look to the #22 PR. Here you will find all the important information of this functionality.

• Since this code is already pushed to deployment you can also check the console in the browser from the deployment link https://jamming-sooty.vercel.app/ and test functionality yourself

• Also check the way you are calling the api/spotify/accessToken endpoint created to fetch the access-token from spotify but from the backend You need to pass the refresh-token as the body of the request. The refresh-token is the token retrieved from the session object of the app. This is accomplish this way: and you are supposed to call the endpoint this way:

All of this means that if you just access the http://localhost:3000/api/spotify/accessToken and do not provide the correct body you will have errors

no changes

If you haven't made any changes to the lib/ folder the backend should be working correctly as mine!

• Now, If you are trying to make api requests and call the already created in the state getAccessToken() function (you can find out how all of these functions work in the state PR #21) and there's no problem with that then I would need to see like a gif or video of what you are doing and would need to check the code to try to understand

• As you did in the #16 PR, already closed, you need to make this exactly the same but using the new getAccessToken() function created to retrieve the token. This means that you need to give some time when the user is changing the input value because it could be that if you are making too many requests at once you could have errors. So the tip is to use the setTimeout as you did in your #16 PR

I will look forward for your answer! 🚀

[aasimtaif]

Thanks for replying. I am sorry to say that I won't be able to contribute for a week due to my university exams> I will try to resolve the issue and contribute as soon as I can

[Matdweb]

Thanks for replying. I am sorry to say that I won't be able to contribute for a week due to my university exams> I will try to resolve the issue and contribute as soon as I can

Hi! No problem! Thanks for the answer! Do you think you can start working on this the 26th Setember? Just let me know. I appreciate your work!

[aasimtaif]

Thanks for replying. I am sorry to say that I won't be able to contribute for a week due to my university exams> I will try to resolve the issue and contribute as soon as I can

Hi! No problem! Thanks for the answer! Do you think you can start working on this the 26th Setember? Just let me know. I appreciate your work!

I can start working from 27th Sep bcoz my last paper is on 27th,

[Matdweb]

Thanks for replying. I am sorry to say that I won't be able to contribute for a week due to my university exams> I will try to resolve the issue and contribute as soon as I can

Hi! No problem! Thanks for the answer! Do you think you can start working on this the 26th Setember? Just let me know. I appreciate your work!

I can start working from 27th Sep bcoz my last paper is on 27th,

Got it, ok! Thanks!

[Matdweb]

Hi @aasimtaif ! I hope everything went great with your exams! I would love to know about what you will be doing here and if you got to resolve the problem you said you had with the requests! And don't hesitate to contact me if you need something else

[Matdweb]

Hi @aasimtaif! I would love to hear from your work in this issue :)

[Matdweb]

Hi @aasimtaif ! I would like to know about you otherwise I will need to continue with the project by myself! If you need more time it is ok but let me know!