- Built using ReactJS and the Spotify API
- User authentication
- Audio controls
- Version 3.0
To use the live demo of this app:
This project is a ReactJS clone of the Spotify web player.
The main idea is to have users be authenticated through Spotify, and then display them some basic information about their own account.
Users are able to:
- Play or pause a song
- Skip to the next or previous track
- Control the volume
- And also entirely mute the audio
When you first go to app, you get presented with a login page in which you are required to login with your Spotify account in order to proceed to see the web player clone.
After clicking the 'Login with Spotify' button, you will be taken to the actual Spotify website where you will be asked to authorize this app to see and do things for you.
These permissions are to view:
- Content you have recently played
- The content you are playing
- The content you are playing and Spotify Connect devices information
- Your top artists and content
Aside from those permissions, the app will also see your name and username, your profile picture, how many followers you have on Spotify and your public playlists.
You can unauthorized this anytime, by going to your Spotify account settings:
And clicking 'Remove Access' from 'SpotifyClone'.
This app also never saves your information at no point.
Now...
After you have logged into Spotify and gave the right access, you will finally be presented with the web player:
In previous versions, you weren't able to do anything at all, and it served no other purpose than visual.
I've made it more functional and dynamic now.
You can access any of your playlists and play any of your songs for a max of 30 seconds, change the volume and mute any song, and also skip to the next or previous track.
For each song that is being played, the document.title will also change accordingly.
Note: I added a static version as well for people that just want to take a quick glance at the app.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.