🎵 Sportify - Music Streaming Application

Sportify is a modern, single-page music streaming web application inspired by Spotify. Built with HTML5, CSS3, and JavaScript, it offers a stylish dark-themed interface with fully responsive design and core features like playlists, music playback, visualizations, and simulated authentication. Sportify aims to deliver a near-realistic streaming experience without requiring a backend.

🌟 Features

🎧 Core Functionality

• Music Playback – Play, pause, skip tracks, adjust volume
• Playlist Management – Browse, preview, and play curated playlists
• Interactive Visual Player – Animated progress bar, album art, and audio visualizer
• Responsive Design – Works smoothly across desktop, tablet, and mobile devices
• User Authentication (Simulated) – Login/Signup modal with client-side validation

🖥️ UI/UX Components

• Loading Screen – Pulsing logo animation while loading
• Sidebar Navigation – Slideable sidebar with links to Home, Library, and Premium
• Card-Based Layout – Grid of playlist and artist cards with hover effects
• Music Player Controls – Bottom control bar with play, pause, next, shuffle, repeat
• Audio Visualizer – Live waveform synced to music playback
• Song Listings – Track title, artist name, album art, and duration

💎 Special Features

• Premium Subscription Page – Plans and benefits for premium membership
• Playlist Detail View – Opens full playlist with all tracks and details
• Search Functionality – Real-time filtering of songs and playlists
• Progress Tracking – Animated playback bar and volume slider
• Simulated User Flow – Dummy login with simulated session (no backend)

---

🛠️ Technologies Used

• HTML5 – Semantic layout and structure
• CSS3 – Styling using Flexbox, Grid, and transitions
• JavaScript (Vanilla) – Logic for interactivity, playback control, UI handling
• Font Awesome – Icons for UI components (v6.4.0)
• Media Queries – To ensure responsive layout

---

📋 Usage Guide Action Description 🎶 Play a Song Click any play icon on a track or playlist 🔍 Search Music Use the top search bar to filter tracks/playlists 📂 View Playlists Click a playlist card to open its tracks 👤 Login/Signup Click on the profile icon and enter user details 💎 Explore Premium Click “Premium” in the sidebar to explore subscription plans ⏯️ Playback Controls Bottom bar allows play, pause, skip, volume control

🧪 Simulated Data 6 Playlists – Includes categories like Workout, Chill, Rock, Acoustic, EDM, etc. 28 Tracks – Predefined songs with metadata (name, artist, cover art, duration) Premium Plans – Monthly, Annual, and Family plans with detailed features

🌐 Browser Compatibility Sportify is tested and works seamlessly on: ✅ Google Chrome (latest) ✅ Mozilla Firefox (latest) ✅ Microsoft Edge (latest) ✅ Safari (latest)

⚠️ Limitations Sportify is a frontend-only project with no backend/database integration. 🔇 Audio playback requires real .mp3 files stored locally ❌ No persistent user session (authentication is purely visual) ❌ No server, database, or external API connection 🔄 Data is lost on refresh (all stored in memory)

💡 Future Improvements 🎵 Integrate with Spotify API or custom backend for real streaming 🔐 Add real user authentication with Firebase/Auth0 🧠 Add AI-based music recommendations 🎙️ Voice search and smart commands 💾 Save user preferences and playlists