Why Mood Wise?

People are confused about what song to listen to when listening to music. Mood-Wise Tracks allows you to help discover the perfect track to play at the moment. With Mood-Wise Tracks, you can get the tracks by choosing the emotion you are in and letting Spotify suggest the perfect track to fit your mood. Whether you are feeling adventurous or relaxed, Mood-Wise Tracks has the perfect song for you.

To help get you started on how you can create your emotion-based tracks, let's look at how DhiWise would be the best help to create a masterpiece.

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code. With Mood-Wise Tracks, you can easily get a track for your mood and enjoy the soundtrack.

To create A single-page website, approx 50$ to 75$ is cost. And using DhiWise, You can save your cost by 70%.

Spotify

MP3, Napster, iPods, and even illegal methods to download and listen to music seem like a lifetime ago. Before that, there were CDs, cassettes, and vinyl records. Although having a record player at home and waiting up outside the store seems delightful, we can't picture not having music at our fingertips.

We are looking at the rise of internet-based music streaming services. The major focus is on the music streaming platform Spotify.

Spotify provides software and app developers access to some of their data about users, playlists, tracks, and artists through a Web API.

Spotify for Developers provides detailed and user-friendly documentation for their Web API. With the help of the pro-code tool DhiWise, Let's learn How to Integrate Spotify API and the creation of the Mood Wise track with DhiWise.

Spotify APIs are open APIs.

Step 1: Create a Spotify account.

⇒ Let's create Spotify Account and open the Dashboard. To access Spotify APIs, create a new app in the My Applications section of Spotify Developer. Copy the client_id and client_secret to an environment variable. The Token is generated by joining the client id and client secret. An access token is generated for 1 hour and then needs to be refreshed; I used the Authorization Code for token creation Flow to obtain the Refresh Token.

Step 2: Import Figma Design

⇒ Now, Sync, Figma, created according to DhiWise design guidelines. with maximum validation Figma: figma.com/file/g0C5rnvZXp4UJz8qjVzTnH/Mood-.. Let's create an app and use the Figma link to create mood wise track.

Step 3: API integration

The API integration with DhiWise must be done using Spotify Recommendations generated API and User's Top Tracks. Several filters must be used to find music by emotion, such as limit, seed genres, market, and minimum popularity. First, add generate token API.

🚨 Open Postman, under a new request, in the Authorization tab, select OAuth 2.0 to get an access token and refresh token.

I have added this API to LifeCycle Action in the UseEffect method. In API runner, add token API. Now, adding Recommendations generated API in DhiWise.

Let's add this API using the DhiWise API runner; I have added this API on Click of Emoji on the Left Sidebar. Now adding User's Top Tracks API for the list of top tracks of 6 to 1 month. for, that follow the below cURL

The above API provides a list of tracks of the user by time range. The above API is set on UseEffect Hook that data will be set accordingly when the page loads.

Now let's Bind the response on the screen/page.

Step 4: set Navigation

After successfully integrating all API, I have set navigation that when clicking on Any Tracks Image, it redirects to Spotify with that tracks and I just have to play that track.

Step 5: Sync Code

After successfully binding the API response, let's build the app and sync the code in the GitHub repository.

🚨 GitHub repository must be empty, without any branch

Step 6: Manual Efforts

Now, run the code on your machine, and the code requires a few code changes that need to be done manually. The first thing that needs to be changed is, Now add "Bearer" in Authorization before accessToken.

Next, create a sidebar dynamically using it constantly. In DhiWise, I have already added, now creating a new constant from it in an array of objects.

Now, I have modified the constant for it, so the next step is to map the constant inside loop and change the code for sideBar to the below code snippet.

Now, modify some CSS which is inaccurate CSS, and achievable with a little understanding of tailwind CSS.

Conclusion

And that is exactly how you can create something as intriguing as the Mood Wise Tracks to get your music requirements sorted, once and for all. And if you need to develop something else, DhiWise has you covered. You just need to keep reading on: Here is my repository where you can get all working code: github.com/DhiWise/Mood-wise-track

Make sure to read the whole Invention here: dhiwise.com/use-case/spotify-integration

Here you can preview the full running app: mood-wise-tracks.vercel.app

Feel free to comment and like, do share. See you in the next blog.