This week I worked on creating a Spotify clone using React, material-ui, React Context APi, React Hooks, User authentication and the Spotify APi to actually gather real users’ data. Note that you will need a Spotify account in order to use the Spotify API functionalities.
To start my project, I ran ‘npm create-react-app spotify-clone’ inside of a new folder. Once the file was created, I opened it with VSCode and worked on cleaning up the code and structure that React gives us.
- Delete files that aren’t needed:
- Delete everything inside the header in App.js, print a simple <h> tag and remove import Logo at the top. Also in the <div> className, change ‘App” to ‘app’ to follow the BEM convention.
- Delete everything in App.css
- In index.css, add this line of code to remove the margin that is in React:
* {margin: 0;}
- Run ‘npm start’ to make sure that your app is set up correctly, at this point you should see whatever is in your <h> tag in App.js.
Set up Spotify for Developers
Visit the Spotify Developer website here. Go to the dashboard at the top and then you will have to Log in with your account, then click on any of the boxes on the main page. This will open an information box where you will have to enter the name of your project and accept the conditions (in my case, I already created the project so my box is already filled)
Once you created the project, go to ‘Edit Settings’ and tell the API which URI you are going to use, in our case ‘http://localhost:3000/’
Now on your dashboard page, you will find the client ID that you will use in order to set up your project.
Login Functionality
The login component will be the first page that the user will see when they will visit the url. It is composed of a Spotify logo and a login button, which once clicked will send send them to a Spotify secured authentication form and then bring them back to the home page once logged in.
To do so, we create a spotify.js file, with an authEndpoint variable which is the Spotify authentication. The redirect uri is our localhost. Then we use some scopes to define what we want the user to be able to do. Next, we want to get the token from the url by writing the arrow function ‘getTokenFromUrl’. Finally, the variable loginUrl will need to be imported in Login.js so we can use it.
In App.js, we need to use this token that we pulled in spotify.js, in order to get the informations that we want from the user. We are going to need the useEffect hook that will run once, and the useState to update the state.
In the terminal, run:
npm i spotify-web-api-jsThis is a wrapper around the Spotify api, which is basically an easy way to use api provided by Spotify. We import it in App.js (line 5 above) and we write a variable (line 9 above) which we will use to connect our app to the Spotify api.
To get the user’s informations, we communicate with our reducer to dispatch some actions, and use a StateProvider which we will use to pull the informations from the Data Layer. So at any point, we can access the data from the StateProvider (the Data Layer) by using this line of code:
const [{ user, token }, dispatch] = useStateProviderValue()
This StateProvider will wrap up our entire app in index.js
We then return the Player once we get all the users informations
One tip if you are building this clone, is to use a token in your reducer that will keep you logged in so that you don’t have to log in to check your work every time. This token is found when you console.log the token. Uncomment the token and you will be immediately logged in so that you can work on the rest of the app.
All what is left to do is build the Player, the most difficult part is done at this point. I will go over it in a next blog. Thanks for reading!
