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
2. Get Spotify API Credentials
- Go to Spotify premium APK Developer Dashboard
- Create an app → copy Client ID and Redirect URI.
- Configure Redirect URI to: http://localhost:3000/
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`;
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;
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;
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;
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;
</div>
);
}
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)