🎵 Modern Music Player

A full-stack music player application with playlist management, built with modern web technologies. This application provides a seamless music listening experience with a beautiful and responsive user interface.

✨ Features

• 🎵 Audio Playback

  • Play, pause, skip (next/previous)
  • Volume control
  • Progress bar with seek functionality
  • Repeat and shuffle modes

• 📋 Playlist Management

  • Create, edit, and delete playlists
  • Add/remove songs from playlists
  • Drag and drop playlist reordering
  • Playlist sharing capabilities

• 🎼 Music Library

  • Browse and search through your music collection
  • Sort by title, artist, album, or date added
  • Filter by genre or mood
  • Recently played tracks

• 👤 User Features

  • Secure user authentication (login/register)
  • User profile management
  • Favorite tracks
  • Listening history

• 📱 Responsive Design

  • Mobile-first approach
  • Dark/Light mode support
  • Cross-browser compatibility
  • Touch-friendly controls

🛠️ Tech Stack

Frontend

• Framework: React.js
• UI Libraries: Material UI, Tailwind CSS
• Audio Handling: Howler.js
• State Management: React Context API
• Routing: React Router
• Form Handling: React Hook Form
• API Client: Axios

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• File Storage: Local file system
• API Documentation: Swagger/OpenAPI

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm (v6 or higher) or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/music-player.git
   cd music-player

2. Install Frontend Dependencies

   cd frontend
   npm install

3. Install Backend Dependencies

   cd ../backend
   npm install

4. Environment Setup

   Create a .env file in the backend directory:

   PORT=5000
   MONGO_URI=mongodb://localhost:27017/music-player
   JWT_SECRET=your_secure_jwt_secret
   UPLOAD_DIR=./uploads

5. Start the Development Servers

   In separate terminal windows:

   # Terminal 1 - Backend
   cd backend
   npm run dev
   
   # Terminal 2 - Frontend
   cd frontend
   npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

📁 Project Structure

music-player/
├── frontend/                # React frontend application
│   ├── public/             # Static files
│   └── src/                # Source files
│       ├── assets/         # Images, fonts, etc.
│       ├── components/     # Reusable components
│       ├── context/        # React context providers
│       ├── hooks/          # Custom React hooks
│       ├── pages/          # Page components
│       ├── services/       # API services
│       ├── styles/         # Global styles
│       └── utils/          # Utility functions
└── backend/                # Node.js backend
    ├── config/            # Configuration files
    ├── controllers/       # Route controllers
    ├── middleware/        # Custom middleware
    ├── models/            # Mongoose models
    ├── routes/            # API routes
    ├── services/          # Business logic
    ├── uploads/           # Uploaded files
    └── utils/             # Utility functions

🔧 Available Scripts

Frontend

• npm start - Start development server
• npm build - Build for production
• npm test - Run tests
• npm lint - Run linter

Backend

• npm start - Start production server
• npm run dev - Start development server
• npm test - Run tests
• npm lint - Run linter

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please make sure to update tests as appropriate and follow the project's code style.

📝 License

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

🙏 Acknowledgments

• Material UI for the UI components
• Tailwind CSS for utility-first CSS
• Howler.js for audio handling
• Express.js for the backend framework
• MongoDB for the database