CreamCat: a collaborative music streaming service interface

What is CreamCat?

CreamCat is a music player designed to provide a collaborative experience for online listening parties. It acts as an interface to search for music from Youtube APIs, to provide an extended selection of music. It also includes collaborative features such as a voting system for player control, shared music queues, and public/private music lobbies.

Overview

CreamCat focuses on the ability to provide a collaborative music sharing experience which emulates a small listening group for study groups, hangouts or parties. Allowing users to listen synchronously across devices and locations. Users can decide to create a room or join a pre-existing room. For creating a room, users can specify the name of the room, optional description and optional password for private rooms. Once inside the room users can then share the Room ID to other users who they wish to join their room. Once the other users have the room ID copied, they can then access the join room page and enter in the room ID and password if required. Once inside they will automatically sync up with the current room, synching all data such as current queue, current playing song and current duration of the song. Once inside, users can search songs in the search bar and add songs to the queue. Songs can also be skipped if users desire through a vote functionality where all users vote whether or not they would like the song to be skipped or not. Users can then also leave the room manually through the leave room functionality or close the browser. Rooms will automatically close after an hour of inactivity and all users will be redirected to the room page.

Technology stack

Our implementation is developed using the traditional MERN stack using MongoDB for the storing of data such as room data and song data. ExpressJS for backend server implementation for facilitating communication between the frontend and the backend, allowing data transfer and facilitating socket communication. ReactJS for developing the frontend, displaying components to the user to interact with and use. NodeJS for deploying our application as well as utilising other packages and dependencies in our design. Other frameworks used are react bootstrap for styling. Socket.io for synchronous communication between clients. Dayjs for timing. React icons for styling of the play bar. React player for playing the audio. React router for managing pages and redirects. Youtube for facilitating youtube searches. Axios for fetching and receiving data from the backend. React-modal for displaying modals.

Slack was used as our primary form of communication with video calls being held initially over Zoom then moved to Discord due to room expiry issues. Github was used for version control. MongoDB compass and postman for verifying database queries. GitKraken and GitLens for alternatives to git command line. VSCode as the IDE for this project.

Building setup

Specified in the README.md

API

Youtube API was used to fetch the song data for playing on our player page

License

MIT license for other contributors to build upon and use our code.

Contributors

University of Auckland COMPSCI 732 / SOFTENG 750 Group 39 - Cream Cat

Team Members

Andy Huang, Sunho Jung, Wenxin Pan, Kevin Yee