Inspiration

To say 2020 has been rough would be an understatement. One of the biggest challenges for all of us has been adjusting to being apart from friends and family. We wanted to create an opportunity for friends to gather and share some laughs. We took a game that we've enjoyed playing with friends in person and made it into a web application so that people can get that same connection while staying safe.

Who We Are

We're a team of 5 people from various backgrounds and experience levels, and we came into this hackathon as strangers (we're all friends now :D). We decided to create a Spring REST API with a React Frontend. Shazena and Chelsea worked on the backend while Weily, Corinne, Ingrid and Ebony tackled the frontend.

How We Built It

Using MySQL as a database, our Spring REST API passes data between the database and the frontend, which displays our game to the users using React.

The game we created displays a card to every user with a prompt, then each user anonymously submits a card from their hand in response to the prompt. The users take turns judging, and a favorite submission is selected each round. After 5 rounds the user with the highest selection rate is deemed the winner. Our inspiration for this game was a popular card game named Charty Party, which is similar to games like Apples to Apples and Cards Against Humanity, however it incorporates graphs (and we like graphs).

Challenges

None of us had ever coded a game site that was intended for multiple players simultaneously. One issue we ran into was how we would go about making requests dependent on other users's actions. I.e, when Bob plays his card, how will Susan's website know to refresh and display that information? We then discovered websockets, which look pretty cool! Ultimately for the sake of time we decided to incorporate a countdown feature that forces an API call based off of a UTC value. When the game is created, a countdown for two minutes will begin, at which point every user's browser will make an API call at the exact same time to refresh and start the game. We were also able to use Adobe XD to create an interactive wireframe that demonstrates our design objective and where each button will ultimately direct our user to.

We're very proud of this workaround but intend to learn more about websockets after this weekend!

What We Learned

In general we all were exposed to a different way of creating a fullstack application. Two of us have never used React before, and the other three have never worked with Java, so seeing how those two languages can come together has been eye opening! We also have a greater understanding of deployment, and how data is being passed between the MVC.

Accomplishments

Ultimately this experience has been wonderful, and we're really proud of the amount of work that we accomplished in less than 48 hours. It was fun meeting new developers, gaining exposure to different stacks, and facing new challenges. We learned that constant communication is your best friend when it comes to a project involving multiple people you've only just met!

What's Next

We hope to improve upon Laughs at Graphs after this hackathon by allowing the user to set the amount of rounds that they'd like to play, and by increasing the maximum player count (it's currently set at 4).

Links

Adobe XD Workflow
Heroku based REST API
Backend Repo
Frontend Repo
Eventual Site laughsatgraphs.tech (Purchased at Domain.com!)

Share this project:

Updates