Spotify Clone using ReactJS— The Ultimate Guide

Today, we will be building a Spotify Clone using ReactJS and get all the required data from the official Spotify Web API. Spotify is a music application where you can listen to your favorite music. It has an inbuilt music player so that you can pause/play, repeat, and adjust the volume of music.

Are you guys pumped for this? We will be covering a lot of concepts of React as we will be using Spotify Authentication, React Context API (learn more), and much more.

So let’s get started with The Spotify Clone — The Ultimate Guide!

LET’S GOOO 🔥 🚀

1. Creating a React App

To get started let’s make a new folder named amazon-clone and open it. As soon as you are in the folder, right click and select Open With Code

After you click Open with Code you’ll see a huge weird window. Don’t worry we got you covered. This is what you might be seeing:

So Visual Studio Code is the Code Editor we are going to use, this is what professionals mostly use, but this is more of a personal preference. You can use Atom or any other editor too, but Visual Studio Code makes your life easier.

Now that in you are in Visual Studio Code, Press Ctrl + J (on Windows) and Command + J (on Mac) and you should see a terminal window at the bottom just like shown below.

Now that you’re in the terminal, we can now install and setup React app. And this is usually a headache when doing manually. So Facebook, the creator of React made a script which installs and sets up React for you without any type of headache.

To use this script, just type the following in the terminal and press Enter. This will take time so till then you can read what the script actually does below.

npx create-react-app .

Here’s how this works. npx is a part of npm (Node Package Manager) except npx runs a remote script instead of installing it locally. This is done so that you always have the latest version of React installed in your project. create-react-app is the name of the remote script and “.” specifies that we want the script to make a React project in the SAME FOLDER and not make a new folder for it, if you had to make a new folder name, you could just provide the name of folder instead of “.” and it would make a folder for you.

You know that it is finished when you see “Happy Hacking” on your terminal. If you see this, we are ready to move on.

Now that we have our React App installed, now we can start it. In the terminal type the following command. This command will start the React App.

npm start

After you hit Enter, you should see your default browser open. Although I suggest Google Chrome because of it’s development tools making life easier, it’s still your personal preference, but we cannot guarantee development quality with other browsers.

If you did everything correct, you must see the following screen on your browser window.

If you do not see the browser tab open

http://localhost:3000

then go to above URL or even better, I’ve something for you. This will take you to your app.

This is the Welcome screen of React. But we want to build an Amazon Clone, so we need to clean up our React project a bit so that we can get started with the Amazon clone.

Delete (optional) three files from the src folder from the React App. Those three files are

• App.test.js
• logo.svg
• setupTests.js

We are deleting these files because these are not relevant to us in any project.

That’s not all, if you check the browser window now, I know what you’re seeing, do not freak out, we have the solution, go to App.js and remove the following line from code.

import logo from "./logo.svg";

Also remove everything under the first <div> element from your App.js file. You’re code should look like the following:

Now let’s cleanup the CSS files a bit.

Go to App.css and remove all the contents of your file.

Now go to index.css and add this piece of code on the top. And look at the change on the app. What do you see?

*{
 margin: 0;
 padding: 0;
}

This will get rid of the margin and padding of the page.

Now we have our React project perfectly set up. Now we can start making the Spotify Clone.

Before getting right into the code, let’s set up Firebase!

2. Setting up Firebase

So let’s prepare our hosting before we even work on it. We will be using Firebase. Go to https://firebase.google.com and log into your Google account.

Now let’s see how do you set up your project. Once you’re in the Firebase console, follow the following steps.

• Click on “Add Project”

• Give your project a name, it can be any name!

• It doesn’t matter if you turn on Google Analytics for the project, it will make no difference. But in this case, we will just enable it.

• Once you see the below image, your Firebase project is created. Click on continue.

Now we have our Firebase set up and we do not need to touch it for now! We will use it when our app is ready for deployment!

So let’s go ahead and setup Spotify Web API to power up our clone!

3. Setting up Spotify Web API

To get access to the Spotify Web API so that we can get a lot of details from the API, we must create an API credential at Spotify Developers Website. To do that, use this link to go to Spotify Developer Dashboard. Here’s the full URL

https://developer.spotify.com/dashboard/

Then you have to press login and login using your Spotify account, although, you can use Google, Facebook or Apple for third party agents as logging into Spotify.

You must be redirected to the Dashboard and now you should see something like this:

If you are here, great! Just press the “Create an App” button so that we can generate our Spotify API credentials.

You will now see a popup box like this:

Give you app a name, in this case I will use “spotify-clone-medium” and give it a description. Make sure you agree Spotify’s Terms of Service before pressing “Create”.

You should now see a screen similar to this:

Here, copy the Client ID and save it somewhere, we will need it in the app. We would not require the Client Secret but you need to keep it a secret and should not be shared in any circumstances.

Now, click on the Edit Settings button. You should see something like this:

Here, in the Redirect URIs field, enter our development server address which is http://localhost:8000/ (do not forget the slash in the end). After you enter click on the Add button besides it and finally, hit Save.

3. Working on the Login Page

Now we have everything we need set up properly, we can go ahead and actually start coding and make the Spotify Clone!

So let’s make a Login Component! To do that, let’s make a file named Login.js in src folder. Once you are in the file, use rfce snippet from ES7 Snippets to make a component. Also change the <div> to have a className “login”. This is BEM Naming Convention. We will also make a Login.css file and import it into our component. Your Login.js should now look like this:

Let’s go back to App.js and render this component. To do that, go to App.js , import the component, and use it inside the parent <div>. Your App.js should now look like this:

So let’s go to the Login component and start making the login page. I have chosen a Spotify logo which fits the background. Use the following layout for the login page.

Now that we have the layout, it will look weird on the screen, so now, let’s give it some styling! Open Login.css and have the following styling to finally style the page!

So now, if you go to your browser, you should see something like this:

If you see the above screen, congrats you have made the Login page design for the Spotify Clone! Now let’s make a Spotify Configuration File which will help us Login using Spotify Web API.

4. Working on Spotify Configuration File

We use a Spotify Configuration file so that all our Spotify API logic stays at a place and in an organized manner. So let’s make a new file called spotify.js and have the following contents and then we will run through the code and see how it works.

Here’s the logic behind the Spotify configuration file:

• The authEndpoint is the URL where we need to authenticate using Spotify. All Spotify Authentication requests must be passed through this URL.
• The redirectUri is the one which we gave in the Spotify Web API settings, this states where to take back the user if the Spotify login was successful.
• The clientId is the Client ID provided to you by the Spotify Web API and you need to mention it here.
• scopes are basically permissions which you need to ask Spotify for. More such permissions are available on Spotify API Documentation.
• The loginUrl is the final URL which needs to be called in order to authorize an user for our Spotify Clone app. This URL contains the Client ID and all the permissions so that Spotify knows about our app and allows user authentication.

Now let’s bring this loginUrl into our Login component so that we can enable our users to Login through the app. So, your code should now look at this and should link to the loginUrl.

Now, if you try to click on Login with Spotify on your app in the browser, you will see you are redirected to Spotify asking to login and then requesting authorization. Once you authorize, you find yourself back in the Spotify Clone, but this time, you see an access token in the URL bar. We need that Access Token in order to authenticate users. To do that, we need to take it out of URL bar. So let’s go back to spotify.js and add a function which can do this for us.

Here, we made a new function named getTokenFromUrl which will basically extract the Access Token from the URL once we have it. Now let’s check in the App component so that whenever a token is sent, we can decide if we want to show the Player or the Login screen. So, open App.js and use the following code and we will run through it.

Let’s see what this code does:

• We have used an useEffect block so that the set of code runs only once the page is loaded.
• We have used the getTokenFromUrl function which we made in our Spotify Configuration file.
• For security purposes, we reset the URL bar to NOT show the access token so that only the app knows the access token. It’s always a good practice to hide access tokens.
• We are setting the state with the token in it. Then while rendering, we are checking if a token exists, if one exists, that means the user is logged in and should be shown a player, which we will make soon, or else the person should see the login screen.

5. Using the Spotify Web API

Now we are going to use the Spotify Web API to get all the details we need from Spotify. To use that, we need to install a package. So let’s open a new terminal and type the following command to install the package.

npm install spotify-web-api-js

Once this package is installed, let’s use it in App.js. So, here are the changes we make to use the API.

So let’s see what we have done

• We have imported SpotifyWebApi class from the package we just installed.
• We have initialized an object named spotify with the SpotifyWebApi class. Now this object spotify represents Spotify in our app.
• If a token exists, we are setting the Access Token to the Spotify Access Token so that it can access Spotify Services.

Now, make a Player component using the same method following the BEM Naming Convention.

In the next section we will be setting up the React Context API so that we can store important Spotify details in application level state.

6. Setting up Context API

Now it’s the time to set up React Context API and make the reducer. To know more about React Context API and how to set it up, please read this blog posted under Clever Programmer! In this article, we will only set up the reducer so that we can remain in the context of making Spotify Clone.

So let’s go to reducer.js and have the following actions in it.

We have just set some actions which we will require, we will save the user authentication details and the playlist details in the state.

For this clone, we choose Discover Weekly playlist to display on the player by default.

Now that we have the Context API, we need to update App.js so that it uses the Context API instead of local states. To do that, let’s open App.js and change the contents to:

So let’s see what we have changed in the above code:

• We have used the Context API instead of the regular states
• We also have fetched the Discover weekly playlist and stored it in the Context API because we need it in the Player component.
• We have passed spotify as a prop to the Player component

Now that we have the Context API and Spotify details saved in it, let’s make the Player now!

7. Creating the Player

In the previous sections we made the Player component using the BEM Convention, so if you haven’t make it, make it now! Because we are going to work on that primarily in this section. We will be making sub-components first and then arrange them properly into the main Player component.

The entire Player component will have three sub components

• Sidebar — Where the playlists are shown
• Body — Where the songs and everything else are shown
• Footer — Which has the buttons pause, play, and volume control

So, let’s start with working with the Sidebar. So let’s make a component called Sidebar. Follow the BEM Convention. You know the drill. Let’s also make a SidebarOption component.

We need to install Material UI icons to work with icons. So let’s install them, open the terminal and type the following command.

npm install @material-ui/core @material-ui/icons

Now let’s start setting up the layout of SidebarOption component. Open SidebarOption.js and have the following layout in that

And let’s give it styling. So let’s open SidebarOption.css and have this styling. The styling is pretty straightforward.

Now that we have the SidebarOption component ready, let’s setup the Sidebar component.

The following is the layout of Sidebar component.

And let’s give it some styling and then we can see what’s happening here.

Open Sidebar.css and add the following styles.

So now let’s see what’s happening in the Sidebar component.

• We are importing the Material UI Icons package.
• We are pulling values from the Context API.
• We are mapping through the playlists to show all the playlists we got from the Spotify Web API.

Now that the Sidebar is ready, let’s focus on the Body component. So create a component Body, follow the BEM Convention, you know the drill.

There are two sub-components in Body component.

• Header
• SongRow

So let’s start by making the Header component.

Here’s the styling for the Header component.

Our Header Component is ready! Now let’s make the SongRow component. You know the drill.

So let’s set the layout for SongRow component.

And here’s the styling

Now let’s make the main Body component.

Open Body.js and have the following Layout!

And let’s give it a styling so that this looks like Spotify.

This will already give us a very clean list of songs similar to that how it is looking in real Spotify. Awesome!

Now let’s do the final designing, that is, the Footer part of Spotify! Then we will arrange everything in the Player.

So, make a component named Footer, follow the BEM Naming Convention and have the following content in the Footer.js

And let’s give it some cool styles 🔥

And it’s DONE! Now we arrange them in the Player component. So open Player.js and simply place these components there.

Here’s how your Player.js should look like

And some styling to make the order perfect.

.player__body {
    display: flex;
}

That’s the only style because we have used flex property in the inner components.

8. Deployment

Now that our Spotify Clone is ready, let’s deploy it to Firebase 🔥

You must have firebase-tools installed. If you do not have it, you can do that using the following command.

npm install -g firebase-tools

Once you have installed the firebase-tools, let’s login to firebase. To do that, type the following command and follow the instructions on the terminal.

firebase login

Once you have logged in to Firebase using Google, let’s initialize Firebase in our project, so to do that, type the following command in your terminal inside the project.

firebase init

Remember to select Hosting when it asks for the Firebase features you need to use. Select the public directory to be “build” and set so that all the URLs are redirected to index.html. Once the setup is done, you can use Firebase to deploy your site.

Use the following command to deploy to Firebase. This command will create a production build of the React App and deploy it to Firebase.

npm run build && firebase deploy

After deployed, the task is not done yet! We need to make changes in the Spotify Configuration File which we earlier created to have the changes in the Redirect URI. So change the URI to the Firebase Hosting URL, this is the code in my case.

const redirectUri = "https://spotify-clone-medium.web.app/";

After you make the changes, add the same URL in the Spotify Dashboard. So again, go back to Spotify Dashboard, select your app, select App Settings, and add your URL to the Redirect URIs and Save. This is done because Spotify doesn’t accept Redirect URIs which are not mentioned in the Dashboard.

After that, run the deployment command again!

npm run build && firebase deploy

The Spotify Clone has been deployed and can be accessed on Internet. LET’S GOOOO 🔥 🚀

9. Spotify Clone? Done!

You have just completed the Spotify Clone! But you do not have to stop here. Keep making new things.

Clever Programmer comes with new stuff filled with value and you must get every bit of value you can so that it contributes in your developer journey.

Any suggestions for me? You can always contact me!

Thanks

Atharva Deosthale