BattleBeats

What is an essential part of every roadtrip? Obviously...the soundtrack! Introducing BattleBeats, the interactive road trip game for all ages. Hit the road. Drop the beat. And let the best song win!

Comment

Inspiration

It's always hard to agree what album to play during a road trip to appease everyone's taste and wants. Each of our members have a different taste in music and genres, making BattleBeats a fun and entertaining way to create a unique soundtrack for every roadtrip.

What it does

BattleBeats is a web app made to entertain users during a road trip. Two song names are entered and Pexels generates two random pictures related to the song name. The rest of the users present in the car vote on which picture matches the vibe the most, and the song that wins is the next song to be played on the roadtrip!

How we built it

While building the website, we split up the workload among our three team members. Based on our strengths, we handled the various aspects for each of the webpages. That being said, we made sure each member had an understanding of each component. After spending some time brainstorming the formatting and logistics of our website, we worked on the skeleton using HTML/CSS. Simultaneously, we worked with the Pexels API in Javascript to set up our photo generator. After, we brushed over the design one more time, focusing on the color-coordination, fonts, and more.

Challenges we ran into

We don't have much previous experience with Javascript and APIs, so having this hands-on experience helped us improve these skills. We also had to We had to tinker with API calls, and wrestle with HTML formatting to make a visually appealing website.

Accomplishments that we're proud of

We are incredibly proud of our improved use of custom APIs compared to our first hackathon last semester. This hackathon we were much more efficient in our use of APIs, meaning we could improve the user ability and quality of our web app.

What we learned

We learned a lot about connecting front end and back end, which is something we severely suffered with during our last hackathon. This enabled us to spend more time on making our code higher quality this semester and more efficient.

What's next for BattleBeats

For the future of BattleBeats, we hope to add a version of the game where users have to guess the song the first user entered based on the aesthetic of the picture Pexels provides. We also want to work with Spotify's API to play the winning song or craft playlist.

Built With

Share this project:

Updates