Acoustic Licious

Make friends through music. Acoustic Licious is a surprising new way to discover great soundtracks on Solana and play them with your buddies while socializing with reactions, chat, and so much more.

Comment

Inspiration

COVID-19 has significantly impacted the mental health of children and adults alike. With communication going more virtual, better ways of socializing need to be developed - introducing Acoustic Licious, a feature-rich way to discover & play great music and make new friends.

1:1s meetings are ubiquitous during the MLH Fellowship. It is a way for Fellows to get to know each other. What could be a better way to understand others than to get on the floor and listen to our favorite tracks together :)

Acoustic Licious can also be the go-to platform for the Fellows to refresh themselves after a tedious day at work.

What it does

The application supports the following rich features:

  • 🟢 Users can create and join public/private rooms.
  • 🟢 Users can listen to the same songs simultaneously.
  • 🟢 Users can interact through instant messaging, proximity audio, reactions, and voting.
  • 🟢 One can share their favorite music with others by uploading it to Solana, which will persist on-chain forever.
  • 🟢 The app implements a fair-queue mechanism that ensures everyone's song choices get played.

Details of cool features:

Rooms

Users can create rooms where others can join. A room is a virtual space where multiple people can listen to the same songs together at the same time. Public rooms are searchable, whereas private rooms aren't. The admin will have to share the room invite link with others so that they can join the private room.

Playlists

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

  • 🟢 Solana Music: Users can store their favorite music on Solana Blockchain. Similarly, users can add songs uploaded by others to their playlists.
  • 🟢 Through YouTube: A user can add music to their playlist by searching them on YouTube directly.

Proximity Audio

Users can drag their avatars inside rooms to interact with each other and change the volume of playing song - move closer to the audio source, and volume will increase; move away from it, and volume will decrease. This feature creates an experience of the 2D metaverse.

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.

Queue Mechanism

  • 🟢 Users can join the queue to play the songs in their selected playlist.
  • 🟢 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.

Thus, each user in the queue is guaranteed to have one of their songs played, and playlists of any size will continue playing until the user leaves the queue.

How we built it

We can divide the application into the following three domains:

  1. 🟢 Frontend:
    • React.js, Chakra UI, Redux, Socket.io Client, Solana Web3 Client, Anchor
  2. 🟢 Backend:
    • Node.js, Express.js, Redis, Socket.io, Rust, Anchor
  3. 🟢 Deployment:
    • Frontend is deployed on Netlify, Backend on Heroku, and Solana Program is deployed on Devnet.

Additional info:

  • Google OAuth 2.0 is used for Google account authentication.
  • YouTube API is used for searching songs.
  • RediSearch is used for full-text search in rooms and RedisJSON for representing user information in JSON format.

A step-by-step procedure on installing the project locally can be found in the GitHub repo: Acoustic Licious

Challenges we ran into

  • 🔴 The learning curve of Solana and Anchor was steep. While scripting Solana Programs (smart contracts) in Rust and Anchor, it was pretty tricky to understand the logic and deploy it to Devnet. We faced numerous errors before deploying our first-ever contract on Solana.
  • 🔴 We faced a lot of issues with maintaining the application state. Since various components required access to common states, we decided to use Redux, leading to configuration challenges.
  • 🔴 Getting the YouTube embed to synchronize the currently playing song for all connected users was extremely difficult. Many bugs went unnoticed initially.
  • 🔴 Moreover, we ran into many merge conflicts even after we tried to coordinate the development well.

Accomplishments that we're proud of

We are proud of every feature that we added to Acoustic Licious. In the last five days, we were able to implement all the features that we planned initially and were also able to add an additional functionality called Proximity Audio (a pretty cool feature!). The user interface of the application is also sleek and pleasing to the eye. Check it out here: Website.

What we learned

  • 🟢 Working with Solana blockchain and writing smart contracts with Rust and Anchor.
  • 🟢 Working with Redis for data storage and Redis modules - RedisJSON and RediSearch.
  • 🟢 Implementing real-time activities using Socket.IO.
  • 🟢 Leveraging Redux for global state management.

What's next for Acoustic Licious

  • 🟡 Adding the ability to show the order of users in the queue at any given time.
  • 🟡 Making the app more scalable and robust.
  • 🟡 Creating a mobile accessible application to onboard more users.
  • 🟡 Using Machine Learning to formulate a music recommendation system.

Built With

Share this project:

Updates