Building a multiplayer TriviaSnake game with Amazon Q Developer!

Hey there, coffee lovers and tech enthusiasts! Imagine sipping your favorite brew while effortlessly building a website with the help of Amazon Q Developer. Well, that's exactly what I did. In this blog, I'll take you on a casual stroll through my adventure of creating a browser game using React, S3, DynamoDB, Lambda, API Gateway, and Cognito. Along the way, I'll share how the Amazon Q Developer VS Code integration was like a virtual barista, making my development process as smooth as a latte. So, grab another cup of coffee, get comfortable, and let's dive into the world of coding with Amazon Q Developer!

Imagine a classic snake game, but with the added excitement of trivia questions. That's what you'll get with my latest creation! As you guide your snake across the screen, you'll encounter trivia questions on the left side. Eating the letter corresponding to the correct answer will cause it to shrink and take you to the next question, but don’t take too long cause it’ll grow every 3 seconds!

But here's the best part: you get to be the architect of your own adventure! With easy-to-use tools, you can create your own trivia questions and build a unique questionnaire. Whether you're a history buff, a science enthusiast, or a pop culture junkie, you can tailor the game to your interests.

And the cherry on top? It can be deployed and hosted for free on your aws account!

Check it out here!

From the moment I conceived the idea of the Trivia Snake game, Amazon Q Developer stepped in as my invaluable guide. It provided me with incredible insights on how to bring my vision to life using AWS services.

I started by describing my game concept to Amazon Q Developer. It promptly suggested a suitable architecture encompassing React for the front end, API Gateway and Lambda for the backend, DynamoDB for data storage, Amazon Cognito for user authentication, S3 for asset storage, and CloudFront for content delivery.

As I delved deeper into the development process, Amazon Q Developer continued to assist me at every turn. It generated code snippets for Lambda functions, API Gateway endpoints, and DynamoDB tables, saving me a significant amount of time and effort.

But Amazon Q Developer's contributions didn't stop there. It also guided me in setting up the infrastructure using CloudFormation. I was amazed at how effortlessly it handled the creation of resources and associated permissions.

Throughout the development journey, I constantly engaged in a back-and-forth dialogue with Amazon Q Developer. I would describe the functionality I wanted to implement, and it would suggest the most appropriate AWS services and provide code examples. This collaboration allowed me to not only develop the front-end code in React but also implement the Lambda functions and configure the entire infrastructure.

But the real showstopper was the autonomous agent you could access by typing "/Dev" into the chat before making your request. This is where the AI truly showed its power. I could literally ask it to do something, walk away to make a cup of coffee, and when I came back, it had completed 90-95% of the changes. In many cases, I could simply accept the modifications and watch them take effect in real time, without having to lift a finger. Of course, there were still a few minor errors here and there that I needed to fix, but that was to be expected. What blew my mind was that the AI could make changes to the user interface, the API layer, the lambda functions, and even the cloud formation template, all in order to implement a complex request. It was like having my very own personal coding sidekick!

Heres an example -

Here is an example where Amazon Q Developer nailed it by modifying the react code, my lambda function & the cloudformation template all at once

WOOOTTTT :O

You can checkout how accurate it was by logging in and playing the Trivia ;)

I didn't stop there with the AI sauce, give folks a free form text field and you are bound to see a few inappropriate entries, which is why I added a profanity check on the Create Adventure button that will prevent any submissions that Claude Haiku deems inappropriate for all ages -

I wanted to see if I could really implement something I had absolutely no idea how to do & lean completely on its Amazon Q Developer's guidance for implementation - Multiplayer Mode!

While this was the part that took the longest to implement ( a grand total of 2 days), it would have been atleast a week of trial and error and frustrated burn outs if I didn't have my handy sidekick to implement whole feature sets from UI changes to typescript lambda code & dynamodb table structures. Despite no experience whatesover with websockets I had a functioning multiplayer game that allowed any number of players to attempt the Trivia Snake questions together one question at a time.

There were also some instances where it just forgot to give me a file that it had created. In the example below I had asked it to move the Adventure creation logic into its own component, and while it did implement it correctly, it forgot to actually give me the file. I had to prompt it again to get it.

There were a few instances were it said it did something but when I looked at the code it had implemented that piece of logic was missing. Although this seemed to only happen when I asked it to do a lot of things at once & just like an overburdened assistant it dropped the ball on one of the things.

I LOVE IT! It empowered a backend dev like me to whip up a react web game with features like sign up, sign in, gameplay, leaderboard, quiz authoring, AI, multiplayer AND deploy it with infra-as-code with probably only 10 - 12 hours invested over the span of a few days!

Game link