README.md

Spotify Clone

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.

Features :

1. Spotify Authentic Login System

2. Spotify API for fetching data

💥 💥 💥 💥 💥 💥 💥 💥 💥

What Have I Learnt ?

1. Material UI

2. Spotify API working

3. CSS (There is always something new in this 😆 )

4. Revised Context API concept of ReactJS

💥 💥 💥 💥 💥 💥 💥 💥 💥

Prerequisites

1. Installed NodeJS Official Website
2. Knowledge of ReactJS Official Website
3. Knowledge of MaterialUI Official Website

💥 💥 💥 💥 💥 💥 💥 💥 💥

How to Run ?

1. Clone this github repo
   git clone https://github.com/singhanuj620/spotifyClone.git
2. Install all the dependencies
   npm install
3. Make a file name spotify.js inside /src
4. 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`; 

4. Get your own spotify client id From Here and paste in the spotify.js file. Line 6 approx
5. In terminal run the application
   npm start

💥 💥 💥 💥 💥 💥 💥 💥 💥

❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️

MY PERSONAL PORTFOLIO Click Here

INSTAGRAM ACCOUNT Click Here

LINKEDIN ACCOUNT Click Here

❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️

ScreenShots :

Credits :

Clever Programmer Youtube Channel Channel