One note here - it's a bit weird, we used OBS to make a video for our demo, and when we click on dropdown fields in the browser, OBS wasn't picking up those popup panes...the net effect is a ghost-like magic value-changing when we're clicking dropdown fields in the video. Just so you're aware!


I guess I just thought this was a pretty cool idea I've been wanting to do for a while. Recently saw a BuzzFeed quiz, and it inspired to me to drive this app by anwering fill-in-the-blanks lyrics questions. I thought the theme of this hackathon was appropriate for working on this little game app.

Note the name of the app comes from a fish (the pricklebacks) and is not, despite what teammates may believe, a subtle dig at the band Nickelback.

What it does

This is a game, implemented as a web application, that lets the user create a "fantasy rock band" out of top musicians. That band then goes on tour to different cities, and you answer fill-in-the-blank lyric question at each city. At the end, your score is tabluated and presented!

How we built it

Started with creating a local CockroachDB cluster. Initially added musician data (schema updated using Flyway), while we started finding and processing images. Spring Boot was used as the server technology, and Spring MVC fields incoming web requests. Spring Data used to load data from CockroachDB. The musicians we selected were loosely-based on Rolling Stones "Top 100" lists.

Challenges we ran into

We wanted to get that "recursive" nature just right...the repeated asking of questions. Obviously, there was a lot of busy-work finding photos, processing images, and getting the image names properly stored in the database. Maybe the biggest challenge was trying to edit the feature list into something that would work and be presentable by the end of the time allotted. Been having microphone issues where sometimes it's normal and sometimes it sounds like a metallic buzzsaw, and we ended up recording the demo video multiple times to get it right.

Accomplishments that we're proud of

Getting this much in a short amount of time. All of the pages are data-driven and functional, using data we built out. The demo video shows only one path of selected musicians, tour, questions/answers, but there is a lot more data behind the scenes. Replays of the game are different.

What I learned

Learned a lot about musicians that I never knew. Learned a lot more about using padding and margins in Bootstrap, as well as how to create a carousel and more elaborate cards.

What's next for Prickleback

  • REALLY wanted to implement a dynamically generated band T-shirt at the end of the Tour, but just ran out of time. Definitely will be in Version 2.0.
  • Would like to implement sound effects (Howler JS?).
  • Would like to extend the musicians data out to about 100 musicians for each of the band roles.
  • Would like to differentiate between Lead Vocals and Lead Guitar roles, and then add maybe Keyboardist or 5th-man roles.
  • Would like to implement different sorts of questions, rather than just fill-in-the-blank lyrics.
  • Would like to implement different "game effects" for the specific musicians you select...maybe one guy allows extra time per question, and another guy allows you to remove incorrect answers from the question, etc.

Built With

Share this project: