https://github.com/ibad-hussain/spotify-ui-clone

A sleek Spotify-inspired web music player with playlist browsing, audio controls, and a clean modern UI.
https://github.com/ibad-hussain/spotify-ui-clone

javascript json responsive spotify-clone

Last synced: about 1 year ago
JSON representation

A sleek Spotify-inspired web music player with playlist browsing, audio controls, and a clean modern UI.

• Host: GitHub
• URL: https://github.com/ibad-hussain/spotify-ui-clone
• Owner: ibad-hussain
• Created: 2025-04-05T17:12:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-05T20:39:40.000Z (over 1 year ago)
• Last Synced: 2025-05-04T14:12:04.274Z (about 1 year ago)
• Topics: javascript, json, responsive, spotify-clone
• Language: JavaScript
• Homepage: https://spotify-ui-replica.netlify.app/
• Size: 75.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Spotify UI Clone

## 🚀 Overview

A sleek, responsive **Spotify-inspired web music player** built with HTML, CSS, and JavaScript. This UI clone mimics the core functionality of Spotify — including album browsing, dynamic track lists, audio playback, volume control, and an interactive UI.




## 🚀 Screenshots

![Project screenshot](./Project_screenshots/Image1.png)





![Project screenshot](./Project_screenshots/Image2.png)




## 🚀 Features

- Spotify-like UI with album covers, play buttons, and sidebars

- Dynamic album & track loading from info.json and song folders

- Track controls — play, pause, next, previous

- Progress bar with seeking functionality

- Volume control and mute toggle

- Mobile-responsive design with hamburger menu




## 🚀 Tech Stack

- **HTML:** Page structure

- **CSS:** Styling, responsive layout

- **JavaScript:** Dynamic functionality & logic

- **JSON:** Album and songs metadata




## 🚀 Learnings

This project helped in practicing:




  ⮞ DOM manipulation




  ⮞ Audio APIs




  ⮞ Event-driven programming




  ⮞ Responsive design




  ⮞ JSON integration for dynamic content




## 🚀 Deployment

The app is deployed on Netlify and can be accessed via:




https://spotify-ui-replica.netlify.app/




## 🚀 Contact

- LinkedIn: www.linkedin.com/in/ibadhussain