Music App 2

Hello here we will create a React.js Music App.

First create the Bare-Bones skeleton: Link

Next install BootStrap.


Stage 1: Build the Frame.

Here we will create a basic skeleton of the App.

Stage 2: Query Functions

Now lest add CSS. First inset the React-Bootstrap Link (in the tab Getting Started) copy the code, then go tho “index.html” and paste above the Title Tag:

Time for Styling, here you can get creative and use the colors and lay-out you like better.

Here is where I will be importing some parts from the Boot-Strap Library, one example is as follows

there are other parts that need to be imported, and also we add the functions to run the Query. the whole code:

Stage 3: API Conection

Time to bring data from the API of Spotify:

  1. Google: “spotify api”  Then select the one more similar to: “Web API – Spotify Developer” and click.
  2. Click on: Web API / API Endpoin Reference,  or click Link
  3. Search: “Search” and select “Search for an Album”
  4. Copy the text after the GET “” and paste inside of the Search Function. + “?“.

Note this is how it looks before we add the batics and change the syn-taxis to ES6:

During this Stage we add: console.log(“FETCH_URL: “, FETCH_URL); you can copy the URL from the console and paste it in the Browser to see the data that we are getting from Spotify.

The code for this stage:

Stage 4: Fetching Data

To acomplish this there is a very little change need, in the “01-Comp.jsx” inside of the “search()” function we add a little code.

Stage 5: Using API Data to Build Singer Profile.

Here is where we use the data from the API to create a basic “Profile” for the singer we search, with:

  • Picture
  • Followers
  • Generes.

This is how the code should look at this point:

Stage 6: Using API Data 2 Build Gallery.

Here we need to go back tot the API Website to get more data:

  1. Go back to the API: Link
  2. Click on: Web API / API Endpoin Reference
  3. Search: “Search” and select “Top Tracks”  or click: Link
  4. Copy the text after the GET “{id}/top-tracks” and paste as in the ALBUM_URL =.

In this part we will create the Image Gallery whit the pictures that we get from the API. The main change will be the creation of the Component: “Gallery.jsx” and this is the code.

If you notice there are some “className” you can see the final style.css file or just style as you like it.

Stage 7: Final Coding Steps.

Here we will make the Tracks playable using JavaScript and then we will add some CSS to make it Pretty, the final code can be found in GitHub: Music-App-2 and the app looks like:


Stage 8: Deployment.

After the app is DONE and no more changes are required, stop the sever [Ctrl] + [c], then is time to build the files, in the terminal type:

This will take some time and will create a directory with the name of: ” build ” with the static files inside.


Create a repository for the app on: Git & GitHub, push.

Log-in to Heroku:  and go to the documentation: Deploying React with Zero Conf.

Run command on Terminal:

Now is time to Push the files to Heroku, in the Terminal type the following steps.

Then you will the URL where the App is hosted, in this case I got this Link:

and you app should be live, click the Image to go to this app live.

If you need more help here is a link with a video with deployment: Link I found in YouTube.

State 9: Update Live App

If you need to make changes on to your already deploy App well, do the changes on the files on you Local Repository then:

This push should take less time because all the Node modules were install in the first release (git push heroku master).

Now go to the App URL, refresh and see the changes done.

Copyright 2017. All rights reserved.

Posted April 6, 2017 by Edmundo in category "React