Skip to content
← Projects

Spotify Clone

A pixel-accurate frontend clone of the Spotify web player — sidebar, album cards, playlist layout, and the bottom player bar.

GitHubLive demo
HTMLCSSJavaScriptVercel
Spotify Clone

Overview

A pixel-accurate front-end clone of the Spotify web player — recreating its signature layout and visual language using only HTML, CSS, and JavaScript. A focused exercise in matching a polished, real-world UI exactly.

What I Built

  • Sidebar with navigation and playlist library
  • Album/playlist cards in a responsive grid
  • Playlist layout matching Spotify's spacing and typography
  • Bottom player bar with playback controls and track info
  • Careful attention to spacing, colors, and hover states to match the real product

Tech Stack

Frontend: HTML, CSS, JavaScript

Deploy: Vercel

Why It Matters

Cloning a production-grade UI pixel-for-pixel sharpens the eye for detail — spacing, hierarchy, and responsive behavior — that separates a rough layout from a polished one.