CodeNewbie Community 🌱

Jhon Lap
Jhon Lap

Posted on

How to build spotify clone using react js with code

Building a Spotify clone using React.js is a great project to learn about authentication, APIs, and music player logic. I’ll guide you through the main steps and provide starter code for each part.

We’ll use:

  • React.js (frontend framework)
  • Spotify Web API (to fetch songs, playlists, and user data)
  • Spotify Web API authorization (OAuth 2.0)
  • *React Context API or Redux *(for global state management)

Steps to Build Spotify Clone

1. Setup React Project

npx create-react-app spotify-clone
cd spotify-clone
npm install axios spotify-web-api-js react-router-dom
Enter fullscreen mode Exit fullscreen mode

2. Get Spotify API Credentials

3. Authentication with Spotify

Create a helper file for login:

src/spotify.js

export const authEndpoint = "https://accounts.spotify.com/authorize";
const clientId = "YOUR_SPOTIFY_CLIENT_ID";
const redirectUri = "http://localhost:3000/";
const scopes = [
  "user-read-currently-playing",
  "user-read-playback-state",
  "user-top-read",
  "user-read-recently-played",
  "playlist-read-private",
];

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`;

Enter fullscreen mode Exit fullscreen mode

4. Login Component

src/Login.js

import React from "react";
import { loginUrl } from "./spotify";
import "./Login.css";

function Login() {
  return (
    <div className="login">
      <h1>Spotify Clone</h1>
      <a href={loginUrl}>LOGIN WITH SPOTIFY</a>
    </div>
  );
}

export default Login;
Enter fullscreen mode Exit fullscreen mode

5. Spotify Web API Setup

src/App.js

import React, { useEffect, useState } from "react";
import Login from "./Login";
import { getTokenFromUrl } from "./spotify";
import SpotifyWebApi from "spotify-web-api-js";
import Player from "./Player";

const spotify = new SpotifyWebApi();

function App() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const hash = getTokenFromUrl();
    window.location.hash = "";
    const _token = hash.access_token;

    if (_token) {
      setToken(_token);
      spotify.setAccessToken(_token);

      spotify.getMe().then((user) => {
        console.log("👤 User:", user);
      });
    }
  }, []);

  return (
    <div className="app">
      {!token ? <Login /> : <Player spotify={spotify} />}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

6. Player Component

src/Player.js

import React, { useEffect, useState } from "react";

function Player({ spotify }) {
  const [playlists, setPlaylists] = useState([]);

  useEffect(() => {
    spotify.getUserPlaylists().then((pl) => {
      setPlaylists(pl.items);
    });
  }, [spotify]);

  return (
    <div className="player">
      <h2>Your Playlists</h2>
      <ul>
        {playlists.map((playlist) => (
          <li key={playlist.id}>{playlist.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Player;
Enter fullscreen mode Exit fullscreen mode

7. Add Music Controls (Basic UI)

You can extend with play/pause/skip buttons:

src/Footer.js

import React from "react";

function Footer() {
  return (
    <div className="footer">
      <button>⏮️</button>
      <button>▶️</button>
      <button>⏭️</button>
    </div>
  );
}

export default Footer;
Enter fullscreen mode Exit fullscreen mode
</div>
Enter fullscreen mode Exit fullscreen mode

);
}

export default Footer;

🔥 Features You Can Add

Sidebar navigation (Home, Search, Library)

Currently playing track info

Custom styling with TailwindCSS / Material UI

Advanced music player controls (seek, volume, shuffle, repeat)

Search bar with Spotify track search

✅ With this setup, you have a working Spotify clone frontend.
👉 To make it fully functional, you need to handle OAuth refresh tokens with a small backend (Node.js + Express), because the Spotify token expires in 1 hour.

Top comments (0)