Acoustic Licious

COVID-19 has significantly impacted the mental health of children and adults alike. Globally, the population suffering from loneliness rose from 6% to 21% post-pandemic; with communication going more virtual, better ways of socializing need to be developed.

Introducing Acoustic Licious, a stunning new way to discover & play great music and make new friends.

Hey there MLH Fellows! We know 1:1s are ubiquitous during the MLH Fellowship. What could be a better way to know other Fellows than to get on the floor and listen to your favorite tracks together :)

⚡ Main Features

• Listen to the same songs with your buddies simultaneously.
• Interact through instant messaging, proximity audio, reactions, and voting.
• Share your favorite music with others by uploading it to Solana Blockchain and saving their music to your playlist.
• A fair-queue mechanism that ensures everyone's song choices get played.
• A beautiful user interface that is pleasing to the eye.

👨‍💻 Tech Stack

• Frontend: React.js, Chakra UI, Redux, Socket.io Client, Solana Web3 Client, Anchor
• Backend: Node.js, Express.js, Redis, Socket.io, Rust, Anchor

⚙️ How it works

An overview of the application core constructs is given below:

Rooms

Users can create public or private rooms where others can join. A room is a place where multiple people can listen to the same songs together at the same time. Public rooms can be searched and joined, whereas the invite link of the room has to be shared with others for joining private rooms.

Join public rooms:

Listen to songs in the room:

Playlists

A playlist is a collection of songs. Songs are played through playlists created by users. Users can freely add or remove songs from their playlists and rearrange the order of their songs inside the room. There are following two ways to search and add music to playlists:

• Solana Music: Users can add their favorite music to Solana Blockchain for others to add them. Similarly, users can add songs uploaded by you to their playlists.

• Through YouTube: A user can add music to their playlist by searching them on YouTube.

Queue Mechanism

Users can join the queue in the room to have the songs in their selected playlist played. The order in which users join the queue determines the order in which songs are played. The first song in their selected playlist will be played for each user in the queue. Then the first song will be cycled to the back of the playlist. Each user in the queue is, thus, guaranteed to have one of their songs played, and playlists of any size will continue to keep playing until the user leaves the queue.

Voting

Users can like or dislike the current song. If at least half of the people in the room have disliked the music, it will be skipped.

📥 How to run it locally?

Prerequisites:

• Node v14.17.6
• npm v8.1.3
• Redis v6.2.5 with RedisJSON v1.0 and RediSearch v2.0

We used the redislab/rejson and redislab/redisearch Docker images to setup Redis modules.

1. Run the above Docker images.
2. In the root directory of backend, create a .env file with the following contents:

REDIS_HOST=localhost    
REDIS_PASSWORD=your_password_for_redis
REDIS_PORT=redis_port
SALT_ROUNDS=10
SESSION_SECRET=your_session_secret
YOUTUBE_KEY=your_youtube_api_key
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

3. In the root directory of backend, type: npm install to install dependencies.
4. Run npm start in root directory of backend.
5. In the root directory of frontend, type: npm install to install dependencies.
6. Run npm start in root directory of frontend.
7. Your app should be running at localhost:3000 ✨