How I used AWS Generative AI (Bedrock & Q Developer) to build Hangman game from scratch

1. Introduction

I recently took part in the AWS Game Builder Challenge 2024 as a solo individual. In the challenge, I was tasked with creating an innovative game that showcases my creativity, originality, and utilization of AWS services. The requirement is to use Amazon Q Developer, a generative AI-powered assistant, to build my game faster. The other requirement is to use at least one other AWS service of my choosing. I decided to pick AWS Amplify Hosting for deployment and Amazon Bedrock to add generative AI capabilities. The reason for participating in this challenge is because I wanted to experience how useful Generative AI can speed up coding and also to broaden my AWS skill sets.

I did some research on AWS Amplify and found out that among the frameworks supported, ReactJS was one of them. Also, AWS Amplify can integrate with GitHub for deployment. As a total newbie in ReactJS with zero background, I decided to challenge myself and hence went with ReactJS to build Hangman, a letter/word guessing game. I played Hangman a lot during my childhood so I decided to experience for myself how challenging it is to build this game.

Video walkthrough: https://youtu.be/CbPD9t8H2KQ
GitHub URL: https://github.com/JiaweiLin/Project_Hangman
Hangman URL (not optimized on mobile yet): https://main.d44lwcf49q79c.amplifyapp.com/

Below is the architecture diagram of the Hangman game,

2. What it does

The objective of my Hangman game is to guess the word correctly. Player can select one out of two game modes - Single player or Two-Player. During the player's turn, he/she can guess individual letters or attempt to solve the entire word. If a wrong guess is made, the player loses one life immediately. Player is given 6 lives for each round. There are 6 rounds in both single player and two-player mode. The game ends if player has 0 lives left.

For the two-player mode, it is a turn-based game where each player alternates their turn every round. There is a time-limit for two-player mode (20s, 25s, 30s). Score tracking is implemented where the shorter time taken to guess the word, the higher the score for that round.

In the initial landing page, the player is able to select one word category from a dropdown list - animals, countries, food, colors, cities, sports, music, sci-fi, fantasy, history. The player is also able to select either easy, medium or hard difficulty setting. In addition, the player is able to select the time limit value from a dropdown list of 3 options - 20 sec, 25 sec and 30 sec.

3. Amazon Q setup

I installed the Amazon Q plugin for my Visual Studio Code Editor, from the Extensions Marketplace. I signed in my AWS Builder ID for Individual Users with Free Tier. AWS Builder ID is a free personal profile that provides access to select tools and services. For development-related questions or tasks, Amazon Q Developer is used which can be accessed via “/dev <Insert Question/Task>” in the instruction dialog.

4. Initial prompt executed to generate the game

Above is the initial prompt which I used in Q Dev to generate the game files, which were successfully generated as shown below.

5. Using Q Dev to fix issues encountered in the game

Below are the list of issues encountered and I used Q Dev to fix them automatically without me manually writing any code.

5.1 Fixed issue with package JSON not generated

5.2 Fixed issue with index.html not generated

5.3 Fixed issue with missing index.js file (a critical entry-point in ReactJS)

5.4 Fixed issue with game logic not triggered after a letter is clicked

5.5 Fixed issue with “Play again button” logic

5.6 Fixed issue with game not ending when player ran out of lives

5.7 Fixed issue with two-player game mode when player clicks “Play again”, the mode becomes single player instead of remaining in two-player mode

5.8 Enhancement : Add a button “Exit to main page” on the game-over screen

5.9 Fixed issue when in two-player mode and player runs out of time, the game fails to reveal the correct word

5.10 Fixed issue when in two-player mode and letter has been submitted, the timer fails to refresh

5.11 Fixed issue when player guesses the word in final round, the page becomes blank i.e error encountered

6. Integrating the Hangman game with Amazon Bedrock

For context, Amazon Bedrock is a fully managed service that offers a choice of high-performing foundation models (FMs) from leading AI companies like AI21 Labs, Anthropic, Cohere, Meta, Mistral AI, Stability AI, and Amazon through a single API, along with a broad set of capabilities you need to build generative AI applications with security, privacy, and responsible AI.

One can also privately customize the FMs with data using techniques such as fine-tuning and Retrieval Augmented Generation (RAG), and build agents that execute tasks using enterprise systems and data sources.

Q Developer generated a set of template codes for me to invoke Amazon Bedrock to generate a list of 6 words based on the category that the user selected. At this point, I needed to go to the AWS console to configure my Amazon Bedrock credentials.

First, I went to Bedrock service and enabled access to Claude 3 Sonnet.

I wrote down the inference profile ID of Claude 3 Sonnet.

I also went to find out what is the Product ID of Claude 3 Sonnet which is prod-6dw3qvchef7zy

Another step was to create my secret access key and access key ID under IAM security credentials section. These values are required to invoke the Bedrock API.

I then wrote the above information to the bedrockService.js code that Q Dev generated for me previously.

Then, I went to create a role named BedrockRole under IAM service that will be accessing Bedrock resources.

I proceeded to create a policy named BedrockPolicy.

This BedrockPolicy will contain 2 permissions — Bedrock and Marketplace. In order to create these 2 permissions, I needed to upload their JSON content.

7. Testing the Hangman game locally

To test the Hangman game locally, all I needed was to run below 2 commands and then access http://localhost:3000/

npm run build
serve -s build

8. Hosting the Hangman game on AWS Amplify

For context, AWS Amplify is a comprehensive set of tools and services that help developers build and deploy scalable mobile and web applications quickly and easily. It includes features such as authentication, APIs, storage, hosting, and more, all backed by the reliability and scalability of the AWS cloud. With Amplify, developers can focus on building great user experiences without worrying about the underlying infrastructure.

Using AWS Amplify to deploy the Hangman game was relatively simple. Amplify integrates with several Git providers such as GitHub, BitBucket and Gitlab. I only needed to select “GitHub” and point Amplify to my Hangman repository.

One tricky part that I took some time to figure out was how to pass the AWS secret access key and secret key ID to Amplify via console configuration. I decided to use Environment Variables eventually as I found an issue while integrating with AWS Secrets library from AWS SDK in my code. I was not able to resolve the issue and had to use Environment Variables as a work-around (instead of using Secret Management). Please note that this approach is not recommended!

I had to modify amplify.yml to inject both variables into a .env file. My code will then read the .env file to load both values at runtime.

The Hangman game was successfully deployed on Amplify with no issue.

9. Key learning points

I learnt that using Q Developer to code an application from ground-up is very much possible, as demonstrated in my Hangman game building experience. Even though I had zero background in ReactJS, I was able to successfully build a playable game using Q Developer. However, Q Developer currently was not able to produce a fully-working game from the initial prompt and I had to test the game to find out all the issues. Interestingly, Q Developer was able to resolve all the issues that I discovered without any manual coding from me.

To answer the question whether AI would entirely replace human programmers today, my short answer is no. There still needs to be a human-in-the-loop to ensure that the application programmed by the AI assistant has zero issues. Participating in the AWS Game Builder Challenge allowed me to pick up new skills in Amazon Bedrock and AWS Amplify which I am certain would be helpful to me in the near future.

10. What is next for Hangman

I have a few enhancements in mind for Hangman's roadmap in this year 2025.

Players can enter a category of their choice in a free-text input box. I would use then Amazon Bedrock GuardRails API to validate both input and output.
I will use Amazon Incognito to authenticate users to my Hangman game.
I will integrate Hangman with Amazon DynamoDB and implement a leaderboard page containing the highest scores of players.

Site Terms, Privacy, and more.