🎵 Spotify Clone A frontend Spotify clone built with HTML, CSS, and JavaScript that mimics the core functionality and interface of the Spotify music streaming service. Users can browse songs, create playlists, like songs, and control playback — all in a responsive and visually appealing UI.
🚀 Overview This is a pure frontend application simulating the Spotify experience. It includes key features like user authentication (mock), music playback controls, playlist management, and a personalized music library — all powered by vanilla JavaScript and LocalStorage.
🔥 Features 🔐 User Authentication Sign up, log in, and log out functionality (mock using LocalStorage)
🎧 Music Player Play, pause, skip tracks, volume control, progress bar, shuffle, and repeat modes
📁 Playlists Create and manage custom playlists
❤️ Library Save liked songs and access them from your personal library
🔍 Search Find songs by title or artist using a responsive search bar
📱 Responsive Design Fully responsive layout for desktop and mobile devices
🕒 Recently Played Track and view your recently played songs
🎵 Visual Feedback Playing animation and UI indicators for active tracks
🛠 Technologies Used HTML5
CSS3 (with CSS Variables for easy theming)
JavaScript (Vanilla JS)
LocalStorage (to persist user and app data)
Font Awesome (icons)
Google Fonts (Roboto)
📚 How to Use
- Sign Up / Log In Click Sign up or Log in in the top-right corner
Fill in the form details
You'll be logged in automatically after signing up
- Browse Music Home page shows recently played and recommended songs
Click on any song to start playback
- Search Songs Click the search icon in the header
Type song title or artist name to find tracks
- Use Your Library Click the sidebar to access liked songs and playlists
Use the heart icon ❤️ to like any song
- Create Playlists Click Create Playlist in the sidebar
Name your playlist and optionally add a description
Add songs from the main interface
- Control Playback Use the player at the bottom for play/pause, skip, volume
Shuffle 🔀 and repeat 🔁 modes supported
📂 Project Structure HTML — Layout and structure (index.html)
CSS — Styling using variables and responsive design (style.css)
JavaScript — Functional logic including:
Authentication
Music playback
Playlist and library handling
Search
LocalStorage integration
🧰 Setup Instructions bash Copy Edit git clone https://github.com/your-username/spotify-clone.git Open index.html in your browser. No installation or dependencies required — it's a self-contained frontend project.
🎨 Customization You can easily tailor this project by:
Adding more songs to the allSongs array in JavaScript
Changing the color scheme via :root CSS variables
Enhancing with new features like:
Album or artist views
Cloud sync for user data
Playlist sharing
Backend integration
Uses mock data and audio files must be added manually
User data persists only in the current browser via LocalStorage
📈 Future Improvements Support for audio file uploads/streaming
Backend for real user accounts and cross-device sync
Additional Spotify-like features (podcasts, stations, etc.)
More animations and transitions
Enhanced mobile UX
📸 Screenshots (Add images or GIFs showing your app in action here)
📄 License This project is licensed under the MIT License.