Spotify Clone using ReactJS — Part 1
I would like to contribute more valuable articles to this channel, your support is crucial to this ecosystem. Please follow me and clap if you like my writing. Thank you.
Spotify is a digital music, podcast, and video service that gives you access to millions of songs and other content from creators all over the world.
So today I am going to develop a Spotify Clone using ReactJS and call the official Spotify REST API. Based on simple REST principles, the Spotify Web API endpoints return JSON metadata about music artists, albums, and tracks, directly from the Spotify Data Catalogue.
Web API also provides access to user-related data, like playlists and music that the user saves in the Your Music library. Such access is enabled through selective authorization, by the user.
The base address of Web API is https://api.spotify.com. The API provides a set of endpoints, each with its own unique path. To access private data through the Web API, such as user profiles and playlists, an application must get the user’s permission to access the data. Authorization is via the Spotify Accounts service.
In this article, I will explain the principles of using ReactJS and using how to do Spotify Authentication.
Create React App
In this demo, I will use Visual Studio Code as my IDE. VS Code is most of professional use, but this is just a personal preference, you are welcome to use any IDE such as Atom, Komodo, even notepad++.
That is some quick way to start your VS code.
- open CMD and enter the following command
code 2. Second method: choose the folder that you want to write your code and right-click choose Open With Code.
After that, you should be able to view your IDE main page as below.
Press Ctrl + O or Ctrl + K to Open folder in your file directory.
If you have not yet created any folder, you can use cmd to create your desired folder named spotify_clone.
mkdir spotify_clone
cd spotify_clone
code .There are 2 ways to create react app using the terminal.
- Open VS Code IDE terminal as below
press ctrl + Shift + `
2. Using exisiting CMD terminal to execute the npm command
Create ReactApp Command
npx create-react-app .Did you understand the command above?
It seems only 1 line of command, but it has a lot of meanings. Let me explain one by one.
npx is pre-bundled with npm. So it’s pretty much a standard nowadays.npx is also a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry. So it meant that it will automatically install the latest package modules. create-react-app doesn’t handle backend logic or databases; It just creates a frontend build pipeline, so you can use it with any backend you want.. (this special character) specific that create the react app in the same folder directory, without creating a new folder.
Normally I will create a new folder named “frontend” for handling the frontend activity. It is good practice to keep a clean code and a clean structure.
npx create-react-app frontend
Next, let me test whether your React App is running properly.
cd frontend
npm start
If you are able to view the lines of Local and On Your Network, and at the same time, it will prompt out the app on the screen. It meant that your command works well.
[Optional] Create Firebase project for future web Hosting
- Firebase Hosting is one of the Free Web Hosting platform, and easy to deploy. If you have never used Firebase previously, you can view my previous article regarding Firebase Hosting, it will guide you step by step.
Firebase Hosting: https://medium.com/p/21d1028b11e22. Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.
3. Heroku is a cloud platform as a service (PaaS) that host web app.
4. DigitalOcean is a cloud computing vendor that offers an Infrastructure as a Service (IaaS) platform for software developers. But it will incur service costs.
Register and Set up Spotify Web API
Through the Spotify Web API, external applications retrieve Spotify content such as album data and playlists. To access user-related data through the Web API, an application must be authorized by the user to access that particular information.
Set Up Your Account
To use the Web API, start by creating a Spotify user account (Premium or Free). To do that, simply sign up at www.spotify.com.
When you have a user account, go to the Dashboard page at the Spotify Developer website and, if necessary, log in. Accept the latest Developer Terms of Service to complete your account setup.
Before using Spotify Web API, it is required to have Spotify account. Please visit the link as below.
https://www.spotify.com/my-en/signup?forward_url=https%3A%2F%2Fopen.spotify.com%2F
Register Your Application
Any application can request data from Spotify Web API endpoints and many endpoints are open and will return data without requiring registration. However, if your application seeks access to a user’s personal data (profile, playlists, etc.) it must be registered. Registered applications also get other benefits, like higher rate limits at some endpoints.
Documentation: Guide to register application
Next step, use this link to visit Spotify Developer Dashboard.
https://developer.spotify.com/dashboard/applications
Please click the “Create an app” button on Spotify Developer Dashboard, and create an app to generate your Spotify API credentials. (Please don’t share to others).
Make sure agree to Spotify’s Developer Terms and Service, and click CREATE button.
After clicking the button, it will redirect to your app. Please copy your client ID and client secret, it will be used for later. (Remind again, please share your client ID and client secret to anyone).
Next click Edit Settings to edit the redirect URL to put your localhost server http://<domian IP>:<Port>/. Please follow the format. If you are not sure, please look at the terminal to your IP and Port number.
example:
1. http://localhost:8000/
2. http://127.0.0.1:8000/
You will add your domain or hosting IP for the final deployment. So now I skip this step first.
Finally set up all the basic configurations and projects. So now I am going to start coding to clone Spotify App with the single-page framework.
Spotify Configuration File
Firstly, we need to create env. file and paste the Client ID and Client Secret (Copied from Spotify Developer Dashboard) in my spotify-react app. So we created a folder called widget in src folder and create a file called spotify.js at src/widget.
SPOTIFY_CLIENT_ID=<Your CLIENT ID>
SPOTIFY_CLIENT_SECRET=<Your CLIENT Secret>
SPOTIFY_FIREBASE_URL=<Your Spotify Firebase App>Next, we need to code the part of getting Spotify Token and save it into spotify.js, it will get the token when calling the function.
Let me explain the code, the logic is quite easy to understand.
Firstly, we need to define the redirect_url and client ID. This two-variables value we will get from .env file.
redirect_url: use for Web API settings, and is to acknowledge the state when Spotify login successfully.
client_id: Client ID that gets from your Spotify app and is used for authentication purposes.
scopes: Spotify permissions, and allow which scopes are able to access.
loginUrl: Url used for authentication purposes ad enable users to log in through the app.
We will use getTokenFromUrl function incoming part.
