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 (1)

Collapse
 
keithwalker profile image
Keithwalker

That’s an awesome breakdown! Building a Spotify clone with React.js is a great way to learn authentication, APIs, and state management. Once you’ve mastered the basics, you can expand it with music controls or search features. If it feels complex, you can always hire ReactJS developer to guide you through advanced integrations and optimization.