Our team absolutely loves playing the game Among Us, and in fact, we played it just an hour before beginning our brainstorming for this idea. With the game fresh in our thoughts, the theme of Who Done It immediately led us to the idea of a murder mystery. While we all love a good mystery with the suspense and the enjoyment of being lost in the story, we all thought "but this has been done before, how can we make it unique?"

That's where our second piece of inspiration came into play. Being stuck at home during the pandemic, we've all stocked up on groceries, leaving us with lots of ingredients, but no clue how to use them. So our question became "how could we combine a murder mystery and mixing drinks?"

The answer was simple, what if you entered all the ingredients you have laying around your kitchen, and we give you step-by-step instructions to make a drink with those ingredients, without ever telling you what drink you are mixing. That leaves you in the middle of a real mystery with a delicious reward.

And to tie in the murder mystery, we could find a few similar recipes, create a murder mystery story involving those drinks, and as you figure out what drink you are mixing, you are also solving a murder!

Well, to all of us that sounded like a great idea! We all love trying new tastes and solving a mystery, so what could be better than having fun in the kitchen making something delicious while practicing your skills as a detective!?

What it does

To start off, you must be willing to try new alcoholic drinks (21+ please, or whatever the legal age is in your country) and immerse yourself in a murder mystery set in a speakeasy of the 1930's. But first, you can select drink ingredients in your kitchen (minus the kitchen sink, of course), so that we can search and find you 3 drinks that could be made with your ingredients.

Then comes a brief welcome to the speakeasy and scene of the crime, along with an introduction to three murder suspects who each brought one of the 3 drinks. Next, you will follow a step-by-step recipe to make your drink, without ever being told what you are actually making (don't panic, we promise it'll be delicious!) You must figure out which of the 3 drinks matches the recipe you are following - the drink that you are making is the same one that the murderer added poison to and killed a victim with!

At any point, if you figure out what drink you are making, and thus who the killer is, feel free to take a guess. Don't worry if you guessed wrong, no matter what, you will get the chance to finish the recipe so that you can enjoy your drink!

The Benefits: You can use ingredients you already have to learn a new drink recipe, all while solving a fun murder mystery.

How we built it

We built "Who Mixed It?" from scratch using React, JavaScript, and Material UI. We started by creating a UI/UX on Figma to help visualize our idea and then began to code the front-end and back-end following along with our design.

The best part- absolutely nothing is hard-coded. The web application is fully complete with all of the backend logic. We have 20+ recipes, many different ingredients and different murder mystery stories. All of this gets randomized!!!

Challenges we ran into

Challenge 1 The first challenge we faced was how to collaborate virtually. Especially since we had team members in different time zones. Luckily, with the current pandemic, there has been a large focus on virtual collaboration, meaning we had many helpful tools at our disposal. For example, we discovered that Figma allows multiple users to collaborate at the same time. This was really helpful for putting together a wireframe of our idea. We also relied on software, such as Facebook Messenger, to host video calls allowing us to communicate effectively, and share our screens to help each other solve any problems that we ran into.

Challenge 2 Another challenge we faced was coming up with an idea. Based on the theme it seemed obvious to us that a murder mystery was the way to go. But that's been done so many times before that we struggled with coming up with a way to approach this from a new and unique perspective. Luckily, we took some inspiration from alcoholic drinks and came up with a way to solve a murder mystery and make a mysterious drink at the same time!

Challenge 3 I'm sure this is a challenge that everyone ran into, one that we always hope to avoid but know we must face... errors in our code. With 5 people working on the same code, merge conflicts were bound to happen. Luckily, with our essentially 24/7 video call we were able to keep each other informed on what sections of the code we were working on to attempt to avoid any conflicts. Additionally, it is nearly impossible to code something without forgetting a quotation mark or semi-colon, leaving tiny, hard-to-spot errors that must be fixed. Unsurprisingly, we were unable to avoid errors, but we were able to successfully collaborate to solve them whenever they appeared.

Accomplishments that we're proud of

Accomplishment 1 For some of our team members, this was our first ever hackathon. That's definitely a feat to be proud of. We successfully worked as a team to ideate, design, and build something that we all would love to use. There's not really much more that we could ask for.

Accomplishment 2 Working together as a team, we were able to fully build all of the functionality we desired on Who Mixed It?. We were able to code the user interface, add a lot of backend functionality, and connect all the pages together using routes. We are so proud of building the entire web application with functionality (for examples, your drinks will be randomized based on the ingredients you choose, and the killer will always be different!)

Accomplishment 3 In general, our team is proud of what we were able to learn throughout this experience. We were able to share our strengths and improve upon our weaknesses. Our team came into this hackathon with a wide range of experiences and skills, but in the end every one of us was able to learn a new skill and have fun in the process.

What we learned

While each of us were able to apply at least one of our strengths, each member of our team was also given the opportunity to try something new. For the majority of members on our team, we had never used Figma, yet now feel confident that we could successfully use the tool to design a user interface (UI) for future projects.

As well, many team members were able to use React for the first or second time. There was a lot to learn about React, but luckily we had a team member willing to help us out and explain the basic syntax that we needed to know. Our team was also able to expand our knowledge of HTML and CSS, as well as learn about different UI components on MaterialUI beyond our previous experiences.

What's next for Who Mixed It?

  • we would love to expand the idea into food, such as the ability to follow along with recipes to make snacks that would pair nicely with the drinks
  • expand the collection of recipes, providing an even larger variety of options to choose from no matter what ingredients you have.
  • make it into a collaborative online game (multiplayer!). Especially while we are stuck at home, this would give everyone a new activity to enjoy playing together.
  • make a voice version of Who Mixed It connected to either the Amazon Alexa or Google Home. This would read aloud each step in the recipe, allowing users to follow along hands-free from their own kitchen.
  • include a points system so that each time the user solves the murder, they would earn points which may be redeemable for prizes (the sooner on in the recipe the more points you would be awarded).

Built With

Share this project: