Crowdify - Collaborative Music Streaming Platform

Crowdify is a real-time music streaming platform where users can create rooms, invite others to join, add songs, and upvote tracks. The most upvoted song gets played automatically. It also features an AI chatbot for assistance and engagement.

Features

• 🎵 Create and Join Rooms: Users can create rooms or join existing ones.
• 📌 Add Songs: Anyone in the room can add songs to the queue.
• 👍 Upvote Songs: The song with the highest votes plays next.
• 🤖 Chat box: Real Time chatbox.
• 🔄 Real-time Updates: WebSockets ensure instant updates on song queues and votes.

Tech Stack

• Frontend: Next.js, React, TailwindCSS
• Backend: https://github.com/Fahad-Dezloper/crowdify-backend [ REDIS, WEBSOCKET ]
• Database: PostgreSQL
• ORM: Prisma
• Authentication: NextAuth / OAuth
• Streaming API: YouTube API

Setup Instructions

Follow these steps to set up the frontend for CROWDIFY.

Step 1: Fork and Clone the Repository

Fork the repository and then clone it to your local machine:

git clone https://github.com/Fahad-Dezloper/Crowdify
cd crowdify

Step 2: Install Dependencies

Run the following command to install all necessary dependencies:

pnpm install

Step 3: Update WebSocket Configuration

Navigate to WebContext.tsx and modify the WebSocket configuration as follows:

1. Comment out the existing WebSocket connection:

// const ws = new WebSocket("wss://crowdify-backend-production.up.railway.app");

2. Uncomment the local WebSocket connection:

const ws = new WebSocket("ws://localhost:4000");

Step 4: Configure Environment Variables

Copy the example environment file and set up the necessary credentials:

cp .env.example .env

Then, update the .env file with your credentials:

# Google OAuth Credentials
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

# YouTube API Key for searching YouTube videos on the dashboard
YOUTUBE_API_KEY=""

# NextAuth Configuration
NEXTAUTH_URL="http://localhost:3000/"
NEXTAUTH_URL_INTERNAL="http://localhost:3000/"

# Generate a secure NEXTAUTH_SECRET using:
# openssl rand -base64 32
NEXTAUTH_SECRET=""

# Database Configuration
DATABASE_URL=""

Step 5: Run Prisma Migrations

Apply database migrations using Prisma:

npx prisma migrate deploy

Step 6: Generate Prisma Client

Run the following command to generate the Prisma client:

npx prisma generate

Step 7: Follow the steps to run the backend

https://github.com/Fahad-Dezloper/crowdify-backend

Step 8: Start the Frontend

Run the frontend development server:

pnpm run dev

Now, your frontend and backend should be up and running!

Usage

1. Create a new room and invite others.
2. Add songs to the playlist.
3. Upvote songs to determine the next track.
4. Interact with the others through chatbox

Contributing

Contributions are welcome! Feel free to fork the repo, make improvements, and submit a PR.

License

This project is licensed under the MIT License.

---

🚀 Enjoy collaborative music streaming with Crowdify!