pushpit07/beatshare

Beat Share is a platform to collaboratively listen music with your friends/family. A host creates a room and any number of members can join it with the Room Code. Each member in the room can play/pause the current song and even skip it, though some terms and conditions apply.

BeatShare

Beat Share is a platform to collaboratively listen music with your friends/family. A host creates a room and any number of members can join it with the Room Code. Each member in the room can play/pause the current song and even skip it, though some terms and conditions apply.

Visit website: http://beatshare.in

YouTube: https://youtu.be/-B_bQyh_juY

The host sets up play/pause controls while creating the room and can update the room settings later if needed. Members in the room need to vote to skip the current song. If the votes in favour exceed the votes required as set by the host, then the current song is skipped.

The application makes use of the Spotify API. So, the host needs to authenticate their Spotify account before setting up the room. Due to Spotify's updated version of the API, the host needs a premium Spotify account to access play/pause & skip controls from within the website.

Note: Only the host needs a premium account, other members in the room don't need to have a premium account.

Project Structure

The application consists of three Django apps-

• api,
• frontend
• spotify

api

The api app contains the Room model and the backend CRUD code of the application.

The views include-

GetRoom: To get the room with the specified room code

JoinRoom: Join a particular room having the specified room code

CreateRoomView: Creates a room

UserInRoom: To check if a particular user is in the room with the specified room code or not

LeaveRoom: To leave the current room

UpdateRoom: To update the room settings. Only the host of the room can call this endpoint.

frontend

The frontend app contains all the frontend code of the application. React JS is used to create all the frontend components. Material UI is used for creating the underlying visible website components.

package.json: Contains info about all the packages used for the frontend

templates/frontend/index.html: The main html file that renders all react components

static/: Contains all static assets for the project. All css and js scripts and in the css folder. The frontend folder contains the compiled main.js

src/components/BeatShare/: Contains all components of the application.

• CreateRoomPage.js: Page where the host creates a room.

• Homepage.js: Homepage of the application.

• Info.js: The about page of the application.

• JoinRoomPage.js: Page where the users can join a particular room by entering the room code.

• MusicPlayer.js: The music player in the Room page.

• Room.js: The Room page.

spotify

The spotify app contains all logic to interact with the spotify API.

The models include SpotifyToken and Vote. SpotifyToken model stores the API token that is received from Spotify and the Vote model stores information about all the votes for a particular Room.

The utils file implements some functions that are used by the views the work with the Spotify API and manages the play/pause & skip states in the application.

The views contain:

AuthURL: To authenticate the host

IsAuthenticated: To check if the user is authenticated

CurrentSong: To get the current song and update it too

PauseSong: To pause the currently playing song

PlaySong: To play the currently paused song

SkipSong: To skip the currently playing song

Project Setup

1. Clone this repository

2. Create a virtual environment. (Follow tutorial here)

   virtualenv myenv

3. Activate the virtual environment

   source myenv/bin/activate

4. Install all the required packages from requirements.txt

   pip install -r requirements.txt

   Install all the required packages for working with React.js

   cd frontend
   npm install

Running the server and react app

1. Go to the project directory containing manage.py

2. Run -

   python manage.py runserver

   to run the Django server. Open a new terminal window and go to the frontend directory, and Run -

   npm run dev

   to run React.

Distinctiveness and Complexity

The project is sufficiently different from all other projects in CS50’s Web Programming with Python and JavaScript. It is appropriately complex in the sense that it requires working with the Spotify API and makes use of Django sessions for enhanced experience. Three models and more than ten views have been implemented which indicates the level of complexity of this application. In addition to this, the application also makes use of React JS on the frontend which adds another layer of complexity. Hence, it is apt to say that the application satisfies every criteria mentioned in the requirements.

How to make a contribution ?

1. Create a new branch before making any change.

2. Add all new packages to requirements.txt (Make sure you are in a virtual environment before doing this)

   pip freeze > requirements.txt

3. Put up a PR for review.