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.
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
-
Clone this repository
-
Create a virtual environment. (Follow tutorial here)
virtualenv myenv
-
Activate the virtual environment
source myenv/bin/activate
-
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
-
Go to the project directory containing manage.py
-
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.
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.
-
Create a new branch before making any change.
-
Add all new packages to
requirements.txt
(Make sure you are in a virtual environment before doing this)pip freeze > requirements.txt
-
Put up a PR for review.