Spotify Music Search Clone

A responsive Spotify-style music browser built with HTML, CSS and JavaScript.
Focus on API calls, dynamic rendering, search functionality and music-themed UI composition.
This project was created during Module M4 of the Epicode course.

Preview · Demo · Report a bug · Request a feature

---

✨ Preview

Add your screenshot here if needed.

---

🔗 Demo

• Live demo: https://emanwebdv.github.io/EPICODE_M4-W1D4/

---

🧭 Table of Contents

• Preview
• Demo
• Features
• Tech Stack
• Project Structure
• Installation
• Usage
• API Integration
• Responsiveness
• Roadmap
• Author
• License
• Disclaimer

---

🚀 Features

• Spotify-inspired layout

  • Vertical sidebar navigation
  • Spotify logo and music platform styling
  • Bottom music player section
  • Main content area with categories and artist sections

• Preloaded artist sections

  • Dedicated sections for:
    • Eminem
    • Metallica
    • Queen
  • Dynamic rendering of tracks and album covers

• Search functionality

  • Input field to search any artist
  • Search button to trigger API request
  • Dynamic search results section generated with JavaScript

• Dynamic DOM rendering

  • Album cover image
  • Song title
  • Artist name
  • Album title
  • Content generated programmatically from API data

• Interactive UI

  • Hover effects for navigation and images
  • Responsive layout behavior
  • Music-player-inspired footer controls

• Educational Context

  • Built as a frontend exercise to practice API calls, asynchronous JavaScript, DOM manipulation and layout composition

---

🧱 Tech Stack

---

📂 Project Structure

.
├── index.html
├── assets
│   ├── css
│   │   └── style.css
│   ├── js
│   │   └── script.js
│   └── img
│       ├── logo/
│       ├── playerbuttons/
│       └── ...other assets
└── README.md