A fully functional Spotify Clone built with modern web technologies, featuring music playback, responsive design, and user authentication.
- 🌐 Live Website: noisly.netlify.app
- 📱 Mobile Responsive: Works on all devices
- 🎵 Full Audio Experience: Complete music player with controls
- 🎵 Music Playback: Play, pause, skip, seek controls
- 🎨 Modern UI: Dark theme with smooth animations
- 📱 Responsive Design: Mobile, tablet, and desktop support
- 🔐 User Auth: Login/signup with form validation
- 🎼 Music Library: Curated collection with lyrics
- 🎭 Mood Categories: Browse by emotional preference
- 🔍 Search: Find songs and artists
- 💎 Premium Pages: Subscription and support
spotify-clone/
├── src/
│ ├── styles/ # All CSS stylesheets for layout, components, and pages
│ │ ├── base.css # Base styles and typography
│ │ ├── navbar.css # Navigation bar styles
│ │ ├── layout.css # Main layout and grid
│ │ ├── music-player.css # Audio player styles
│ │ ├── responsive.css # Responsive/mobile styles
│ │ ├── footer.css # Footer styles
│ │ ├── popup.css # Popup/modal styles
│ │ └── ... # More CSS files
│ ├── scripts/ # All JavaScript files for app logic and features
│ │ ├── app.js # Main application logic
│ │ ├── auth-login.js # Login functionality
│ │ ├── auth-signup.js# Signup functionality
│ │ ├── popup.js # Popup/modal logic
│ │ └── ... # More JS files
│ ├── assets/ # All static assets (media, data, icons)
│ │ ├── data/ # JSON data files (song.json, artist.json, mood.json)
│ │ ├── songs/ # Audio/music files
│ │ ├── cover/ # Album cover images
│ │ ├── artist/ # Artist images
│ │ ├── mood/ # Mood/category images
│ │ ├── nav_icon/ # Navigation icons
│ │ └── svg/ # SVG icons
│ └── pages/ # All HTML pages (auth, premium, support, etc.)
│ ├── login.html
│ ├── signup.html
│ ├── premium.html
│ ├── support.html
│ ├── premium-plans.html
│ ├── song-details.html # Song details page
│ └── ... # More HTML files
├── public/
│ └── favicon.svg # Site favicon
├── index.html # Main homepage
└── README.md # Project documentation
- � Live Website: Visit noisly.netlify.app - No installation required!
- �📋 Source Code: View on GitHub
-
Clone Repository
git clone https://github.com/ParthPipermintwala/Spotify-Clone.git cd Spotify-Clone -
Serve with HTTP Server (Required for JSON loading)
VS Code Live Server (Recommended)
- Install Live Server extension
- Right-click
index.html→ "Open with Live Server"
Python
python -m http.server 8000
Node.js
npx http-server -p 8000
- CORS Issue: Direct file opening (
file://) won't work - Use HTTP Server: Required for JSON data fetching
- Modern Browser: Chrome 60+, Firefox 55+, Safari 12+
- Browse: Explore featured songs and mood categories
- Play Music: Click any song to start playback
- Controls: Use playbar for play/pause/skip/seek
- Auth: Login/signup for personalized experience
- Mobile: Fully responsive touch interface
- Frontend: HTML5, CSS3, Vanilla JavaScript
- Audio: HTML5 Audio API
- Data: JSON files with Fetch API
- Design: CSS Grid, Flexbox, Font Awesome
- Responsive: Mobile-first with 5 breakpoints
| Browser | Version | Support |
|---|---|---|
| Chrome | 60+ | ✅ Full |
| Firefox | 55+ | ✅ Full |
| Safari | 12+ | ✅ Full |
| Edge | 79+ | ✅ Full |
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Live Website: noisly.netlify.app
- Live Demo: noisly.netlify.app
- Source Code: GitHub Repository
- Issues: GitHub Issues