🎵 Dhoro - Collaborative Music Streaming

A full-stack, real-time music streaming application that lets teams listen together, chat, and share playlists seamlessly.

📋 Table of Contents

• Overview
• Key Features
• Tech Stack
• Project Architecture
• Getting Started
  • Prerequisites
  • Environment Variables
  • Installation
• Running Locally

---

🌟 Overview

Dhoro is a modern music application designed for shared experiences. It leverages youtubei.js to provide a vast library of music. Users can create teams and communicate in real-time using built-in chat features powered by WebSocket technology. It also includes comprehensive playlist management and listening history tracking.

---

✨ Key Features

• 🎧 Rich Music Library: Seamless audio streaming by fetching metadata and streams using youtubei.js.
• 💬 Live Chat: Team members can communicate instantly using socket.io persistent connections.
• 🔐 Secure Authentication: Robust user authentication managed via JSON Web Tokens (JWT).
• 📜 Playlist & History: Users can create, update, and manage personal playlists, and view their recent listening history.
• responsive UI**: A sleek, tailored User Interface using modern styling with Tailwind CSS.

---

💻 Tech Stack

Frontend (Client)

• Framework: React 18, Vite
• Styling: Tailwind CSS, PostCSS, Autoprefixer
• Routing: React Router v6
• Real-Time Communication: Socket.io-client
• HTTP Client: Axios
• Icons: Lucide-React

Backend (Server)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (using Mongoose ODM)
• Authentication: JWT (jsonwebtoken), bcryptjs for hashing
• Real-Time Engine: Socket.io
• Music Data Source: youtubei.js (Unofficial YouTube API client)

---

🏗️ Project Architecture

This repository is structured as a Monorepo containing both the client and server logic.

dhoro/
├── client/                 # Frontend React application
│   ├── public/             # Static assets
│   ├── src/                # React components, contexts, and hooks
│   ├── package.json        # Client dependencies
│   ├── tailwind.config.js  # Tailwind CSS configuration
│   └── vite.config.js      # Vite build configuration
│
└── server/                 # Backend Node.js/Express application
    ├── models/             # Mongoose schemas (User, Team, Message, Playlist)
    ├── routes/             # Express API routers
    ├── data/               # Seed data or utility data
    ├── .env.example        # Example environment variables
    ├── index.js            # Main application entry point (Server config & Socket.io)
    └── package.json        # Server dependencies

---

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You need to have the following installed on your machine:

• Node.js (v16.x or strictly recommended v18.x+)
• MongoDB (Local instance or MongoDB Atlas cluster)

Environment Variables

You need to set up the necessary environment variables for the server to function properly.

1. Navigate to the server/ directory.
2. Create a file named .env.
3. Add the following variables (refer to .env.example if available):

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_key
NODE_ENV=development
# Optional: Comma-separated list of allowed origins. Defaults are set if empty.
CORS_ORIGINS=http://localhost:5173 

Installation

Clone the repository and install dependencies for both the client and the server.

# Clone the repository
git clone https://github.com/your-username/dhoro.git
cd dhoro

# Install Server Dependencies
cd server
npm install

# Install Client Dependencies
cd ../client
npm install

---

🏃 Running Locally

To run the application locally, you'll need to start both the backend server and the frontend development server. Open two separate terminal windows.

Start the Backend Server

cd server
npm run dev
# The server should start on http://localhost:5000 (or your defined PORT)

Start the Frontend Client

cd client
npm run dev
# Vite will usually start the client on http://localhost:5173

Navigate to the client URL in your web browser, and you should be fully connected to your local backend instance!