Fuzzy React Spotify

Fuzzy React Spotify is a simple clone of Spotify Web Clone built using ReactJS and Spotify API. 🎶

Users can log in to their Spotify Accounts.

Spotify Authentication API authenticates the user and redirects back to our app. To manage user state, Global State is maintained using React's Context API.

Once logged in, users can see their playlists, play their songs trailers etc. All the playlists and songs data is fetched from Spotify API. The project is deployed on Firebase.

This project demonstrates -

• Integrating external APIs for authentication and fetching data
• Playing songs in browser using HTML 5
• Cloning designs and UI from a popular website

Setup and Running Locally

If you wish to run the project locally, follow the steps below:

Run the following command to clone the repository locally

git clone https://github.com/FuzzySid/React-Spotify.git

Inside the directory, run

npm i

To install all the dependencies. If you run into any errors while installing packages, run the following command instead

npm i --legacy-peer-deps

You'll then need a spoitify.config.js inside the src directory to get started. Add the following code inside it

export const authEndpoint = "https://accounts.spotify.com/authorize";
const redirectUri= <REDIRECT_URI>;
const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
  ];

  const clientId=<CLIENT_ID>;

  export const getTokenFromUrl=()=>{
    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`;  

Replace CLIENT_ID and REDIRECT_URI with the ones that you can generate from Spotify Developers API Dashboard.

Getting Client Id

You'll need to login through your account and create a new app

After creating the app, click on it and you'll be able to see your CLIENT_ID

Generating Redirect URI

To create REDIRECT_URI , click on Edit Settings.

Inside the popup, go to the Redirect URI section and add a new Redirect URI. Make sure you add the url of your deployed project as well as the localhost domain where you'll spin your React development server. For example, I use localhost:3000 while developing React Apps so I have added it as a Redirect URI. If you don't add a Redirect URI, you won't be able to get back the authenticated user data from Spotify Authentication API.

Finally, run the following command to open a development server

npm start