A modern, feature-rich music streaming application built with cutting-edge web technologies

Live Demo • Documentation • Report Bug • Request Feature

---

Application Preview

Main Dashboard - Browse and discover music

Music Player Interface

Artist and Album Views

Responsive Mobile Design

---

Features

Core Music Features

• Advanced Search - Find songs, artists, and albums instantly
• High-Quality Streaming - Crystal clear audio playback
• Playlist Management - Create, edit, and organize custom playlists
• Favorites System - Save and manage your liked songs
• Smart Controls - Shuffle, repeat, and queue management

User Experience

• Secure Authentication - Firebase-powered user accounts
• Fully Responsive - Seamless experience across all devices
• Theme Customization - Light/dark mode with custom themes
• Keyboard Shortcuts - Efficient navigation and control
  • Space - Play/Pause
  • →/← - Next/Previous track
  • ↑/↓ - Volume control
  • M - Mute/Unmute
  • S - Shuffle toggle

Performance & Accessibility

• Lightning Fast - Optimized with Vite and React 19
• Accessible Design - WCAG compliant with Radix UI
• Real-time Sync - Cross-device playlist synchronization

---

Getting Started

Follow these steps to set up the Music App locally on your machine.

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or later) - Download here
• PNPM - Fast, disk space efficient package manager

  npm install -g pnpm

• Firebase Account - Create one here

Installation

1. Clone the repository

   git clone https://github.com/Anmol-TheDev/Music_app.git
   cd Music_app

2. Install dependencies

   pnpm install

3. Set up environment variables

   # Copy the example environment file
   cp .env.example .env

   Add your Firebase configuration to .env:

   VITE_FIREBASE_API_KEY=your_api_key_here
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id

4. Configure Firebase

   • Create a new Firebase project at Firebase Console
   • Enable Authentication with Email/Password
   • Create a Firestore Database in test mode
   • Copy your config values to the .env file

5. Start the development server

   pnpm run dev

6. Open your browser Navigate to http://localhost:5173 to see the app in action!

Build for Production

# Create production build
pnpm run build

# Preview production build locally
pnpm run preview

---

Contributing

We welcome contributions! Please see our Contributing Guidelines for detailed information on how to get started.

---

API Documentation

This application uses the Saavn.dev API for music data and streaming. The API provides:

• Song search and metadata
• Artist information and discography
• Album details and track listings
• Playlist creation and management
• Music categories and genres

Base URL: https://saavn.dev

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Contact & Support

Get Help

• Bug Reports: Create an Issue
• Feature Requests: Request a Feature
• Questions: Discussions

Community

• Star us on GitHub - Show your support!
• Follow for updates - Stay informed about new releases
• Join discussions - Connect with other users and contributors

---

Made with ❤️ by the Music App community

Back to Top