Skip to content

README.md

Latest commit

 

History

History
119 lines (81 loc) · 3.28 KB

README.md

File metadata and controls

119 lines (81 loc) · 3.28 KB

Muzer - Collaborative Music Playback App

Overview

The Collaborative Music Playback App is a real-time music synchronization application built using Express, React, Prisma, and Socket.IO. It allows users to create and join rooms, add and vote on songs in a shared playlist, and enjoy synchronized playback on multiple devices.

Features

  • Real-Time Music Synchronization: Users can listen to music together, with synchronized playback across devices using Socket.IO.
  • Vote-Based Playlist Management: Songs are added to a shared playlist and played based on votes.
  • Room Management: Users can create or join rooms using a unique code.
  • Favorites Feature: Users can mark room as favorites.
  • Responsive Design: Built with React and Tailwind CSS for a smooth user experience across devices.

Technologies Used

  • Frontend: React.js, Tailwind CSS
  • Backend: Express.js, Prisma
  • Database: PostgreSQL
  • Real-Time Communication: Socket.IO
  • State Management: React Hooks and Context API

Installation

Prerequisites

  • Node.js
  • PostgreSQL
  • Prisma

1. Clone the Repository

git clone https://github.com/TechThrives/Muzer.git

2. Backend Setup

  • Navigate to the backend directory:

cd backend

  • Install dependencies:

npm install

  • Configure Environment Variables

    In the root directory of your server, create a file named .env.

    Open the .env file and add the following environment variables:

    • DATABASE_URL: PostgreSQL Database Connection String.
    • FRONTEND_URL: Defines the base URL of the frontend application
    • PORT: Specifies the port on which the backend server will listen.
    • JWT_SECRET: Secret key used for signing JSON Web Tokens.

  • Run Prisma migrations:

npx prisma migrate dev

Start the backend server:

npm run dev

3. Frontend Setup

  • Navigate to the frontend directory:

cd frontend

  • Install dependencies:

npm install

  • Configure Environment Variables

    In the root directory of your React App, create a file named .env.

    Open the .env file and add the following environment variables:

    • REACT_APP_SERVER: Defines the base URL of the backend server.

  • Start the frontend server:

npm start

4. Access the Application

Open your browser and go to http://localhost:3000 to start using the app.

Usage

  • Create or Join a Room: Users can create a new room or join an existing one using a unique room code.
  • Add Songs: Users can search for and add songs to the shared playlist.
  • Vote on Songs: Users can upvote or downvote songs, and the song with the highest votes will play next.
  • Synchronized Playback: Hosts control playback, and the timestamp is synchronized across all devices in the room.

Contributing

We welcome contributions from the community. To contribute to this project, please follow these guidelines:

  • Fork the repository
  • Create a new branch for your feature or bug fix
  • Make your changes and ensure they are well-tested
  • Create a pull request to the main branch of the original repository

Developers