Aud.io

Landing screen, for player and lobby creation and joining
Lobby waiting screen
Main game screen

Inspiration

Party games are some of the best ways to spend time with friends, and some of the most accessible and popular ones exist only online. Of all of the different online party games out there, one of the most prominent in the genre is skribbl.io; people compete against each other to guess drawings, with points corresponding to how quickly they were able to guess the prompt correctly. Over the last several years since its release, there have been many similar games that imitate the idea of skribbl.io, but there have been none that use music in their ideas. As such, our team decided to create Aud.io, a game where people can test their musical knowledge against their friends.

What it does

Aud.io starts off on the player and lobby creation screen, where people can create or join a lobby using a lobby ID. After this, they are sent to a waiting room with all of the players, and they can start the game. From the main game screen, a random song from the top songs plays. All of the players in the lobby can then name the song as fast as they can, switching the song whenever the first person gets it. At the end of 5 rounds, the person with the most correct guesses wins the game.

How we built it

We created the full-stack application using React/Typescript along with Tailwind css on the frontend, Node/Express on the backend with cockroach DB to store lobby data and socket.io to enable real-time communication between clients.

Challenges we ran into

The biggest the challenge was finding a service (or api) that would enable us to have music playing to aid an image for guessers in the game. Unfortunately they were behind pay walls which didn't allow us to use them so we could only get an image for the guessers in the game.

Accomplishments that we're proud of

We're happy that we were able to create a multiplayer experience that works except for having the audio from a track playing as well. Especially the fact that this is our first hackathon and with a huge learning curve we got a lot done.

What we learned

We learned how to use react, html/css/js, we learned backend and frontend concepts like using API's, fetching data from API's, understanding websockets and learning a new language (JavaScript).

What's next for Aud.io

Making the UI in the actual game a lot more user friendly and putting a little money in to get tracks playing for the game. In the future hosting it on a cloud service like AWS or GCP to make it fully accessible and "multiplayer" would also be a nice goal for Aud.io.