🎵 VibeStream — MERN Music Streaming Platform

VibeStream is a full-stack music streaming web application built with the MERN stack. It allows users to discover and stream music, search for songs and artists, create personal albums/playlists, and manage their own music collections.

The application includes authentication, role-based access, music playback controls, playlist management, and a responsive modern UI.

🌐 Live Demo

Live Application:
https://vibe-stream-mern-stack.vercel.app/

GitHub Repository:
https://github.com/Yash897542/VibeStream-Mern_Stack

---

✨ Features

🎵 Music Streaming

• Browse available songs
• Search songs by title
• Search songs by artist
• Play and pause music
• Previous and next track controls
• Automatic next-song playback
• Seek through songs using the progress bar
• Volume control
• Shuffle mode
• Repeat mode
• Persistent music player while navigating the application

📁 Albums / Playlists

• View available albums
• Create personal albums/playlists
• Add songs to albums
• Open album details
• Play songs from an album
• Play all songs from an album
• Edit your own albums
• Delete your own albums
• Users cannot modify albums belonging to other users

🔐 Authentication

• User registration
• User login
• JWT-based authentication
• HTTP-only authentication cookies
• Protected routes
• Authentication middleware
• Logout functionality
• Authentication state management using React Context API

👤 Role-Based Access

The application supports different user roles.

User

• Browse and stream music
• Create albums/playlists
• Manage their own albums

Artist

• Browse and stream music
• Upload music
• Create/manage music content according to permissions

🎨 UI / UX

• Modern dark-themed interface
• Responsive design
• Mobile-friendly layout
• Gradient-based visual design
• Hover animations
• Responsive music cards
• Search interface
• Empty states
• Fixed music player
• Responsive navigation

---

🛠️ Tech Stack

Frontend

• React.js
• React Router
• Context API
• Axios
• Tailwind CSS
• Vite

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT
• bcrypt
• Cookie Parser
• CORS
• Multer

Storage

• MongoDB Atlas — database
• ImageKit — music/file storage

Deployment

• Vercel — frontend
• Render — backend
• MongoDB Atlas — database

---

🏗️ Project Structure

VibeStream-Mern_Stack/
│
├── Backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── db/
│   │   ├── middlewares/
│   │   ├── model/
│   │   ├── routes/
│   │   └── services/
│   │
│   ├── server.js
│   ├── package.json
│   └── package-lock.json
│
├── Frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   ├── services/
│   │   └── assets/
│   │
│   ├── public/
│   ├── package.json
│   └── vite.config.js
│
└── .gitignore