GramIt: Photo Game

Home Screen & Username Input
Waiting Room
Round: Prompt, Image Picker, & Add Emojis
Game End!

Inspiration

During our college years, especially during the COVID-19 pandemic, building meaningful connections and maintaining a balanced social life was a challenge. Clubs and extracurriculars struggled to bring people together in engaging ways online.

In response, we created an early version of GramIt using Google Slides. Each slide featured a prompt, and participants inserted images that matched it. The result? A simple yet wildly entertaining icebreaker that sparked creativity and brought people closer together. It became an instant hit, proving that a simple idea can help build communities. So for this hackathon… why not make it into a real online game?

What it does

GramIt combines the social fun of Kahoot with the creative spontaneity of Pictionary. The game begins when a host creates a room that others can join using a unique code. Once the game starts, players are presented with a prompt and are tasked with selecting a photo from their gallery that best matches it. After everyone submits their photos, players vote on their favorite submission of the round. The game continues for a set number of rounds, with votes being tallied after each one. At the end, the player with the most overall votes is declared the winner. GramIt provides a straightforward and interactive way for players to engage creatively while sharing laughs and moments of connection.

How we built it

The backbone of GramIt is powered by AWS Step Functions, which we used to model the game states and manage the transitions between them. This provided a robust and reliable way to control the flow of the round-based game on the backend. To enable real-time communication between the client and the host, we implemented API Gateway WebSocket APIs, which allowed us to trigger the appropriate game events as they happened. AWS Lambda provides the compute backend used by both the API Gateway and State Machine.

On the frontend, we used React Native, bundled for the web, to create a seamless and adaptable user interface. For state management, we leveraged XState, which allowed us to align the frontend's state machine with the backend's Step Function logic. This ensured that the frontend views stayed synchronized with the game's state and logic, providing a cohesive and responsive experience for players. We are hosting the bundle on AWS Amplify.

Challenges we ran into

We ran into a few challenges while implementing the game logic with Step Functions. We were unsure of how to wait for user input to continue the state machine. We initially thought of using polling, but then we consulted Amazon Q and received a better recommendation - using callback tokens provided by the state machine. After that important hint, implementation was a breeze.

Accomplishments that we're proud of

Making a game that you can play with friends online
Leveraging AWS services to build a polished, production-ready product

What we learned

We learned a lot about AWS services while creating this game. This hackathon helped us build on our skills as AWS certified developers. We especially gained a deep understanding of AWS Step Functions, which we utilized for orchestrating our game. Additionally, we learned how effective Amazon Q is at complimenting our abilities during development.