This is a Spotify reactJS web clone, which has an original Spotify login authentication. And fetches the user detail, playlist name, and Bollywood weekly playlist full details like songs name, artist name, cover image.
-
Spotify Authentic Login System
-
Spotify API for fetching data
💥 💥 💥 💥 💥 💥 💥 💥 💥
-
Material UI
-
Spotify API working
-
CSS (There is always something new in this 😆 )
-
Revised Context API concept of ReactJS
💥 💥 💥 💥 💥 💥 💥 💥 💥
- Installed NodeJS Official Website
- Knowledge of ReactJS Official Website
- Knowledge of MaterialUI Official Website
💥 💥 💥 💥 💥 💥 💥 💥 💥
- Clone this github repo
git clone https://github.com/singhanuj620/spotifyClone.git
- Install all the dependencies
npm install
- Make a file name spotify.js inside /src
- Content of file will be :
"https://accounts.spotify.com/authorize";
const redirectUri = "http://localhost:3000/"
const clientId = <YOUR CLIENT ID>
const scopes = [
"user-read-currently-playing",
"user-read-recently-played",
"user-read-playback-state",
"user-top-read",
"user-modify-playback-state",
"user-read-email"
]
export const getTokenFromResponse = () => {
return window.location.hash
.substring(1)
.split('&')
.reduce( (initial, item) => {
let parts = item.split('=');
initial[parts[0]] = decodeURIComponent(parts[1])
return initial
}, {});
}
export const loginUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`;
- Get your own spotify client id From Here and paste in the spotify.js file. Line 6 approx
- In terminal run the application
npm start
💥 💥 💥 💥 💥 💥 💥 💥 💥
❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️
MY PERSONAL PORTFOLIO Click Here
INSTAGRAM ACCOUNT Click Here
LINKEDIN ACCOUNT Click Here
❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️
Clever Programmer Youtube Channel Channel