Building Word Wizard for the AWS Game Builder Challenge

Just to set some context, I have no idea how to use any AWS technology before joining this event. But, after developing and deploying the application, I became knowledgeable with Amazon Q, AWS Lambda, AWS CloudWatch, AWS CloudFront, and AWS Amplify. All in a span of 9 days! With that, I highly suggest people to join events such as this to learn, and at the same time, earn prizes.

Without further ado, I'll start at the beginning. I was scrolling through devpost because I want to join a hackathon and I saw this AWS Game Builder Challenge. They are promoting Amazon Q and they mentioned Amazon Bedrock. I searched it up and it has something to do with generative AI, and I looked at the pricing and learned that they don't have a free tier for that.

My first thought was what game could I make that revolves around generative AI. Then, it hit me, what if I use a generative AI to get user input and validate if the result contains the random word I have in mind. I then thought of the wizard concept because AI is like a magical tool that helps me a lot with academics and coding.

For the framework, I used Next.js because I want to practice my web development skills using that technology. I also don't want to be bothered with react routers. Since I was developing this with a limited time in mind, I used shadcn and magic ui to develop it faster. For the game assets, I used free audio assets from itch.io (Leohpaz and Tallbeard Studios and Abstraction Music). Finally, I drew the wizard myself.

Since I don't want to pay for the Amazon Bedrock, I used Gemini API instead. But, I need to hide my API key from the users. Thankfully, AWS Lambda exists! They have a blueprint code written in Node.js for HTTP. However, I want to write mine in Express.js so I can test it locally as well. I used the npm module serverless-http and add this code in my Express.js app:

Inside AWS Lambda you can set Environment variables in the Configuration tab. So in your code, you can say:

to load the API key. And for the best advice I can give you to save you 9 hours, modify the timeout to be longer. Gemini may take a while to load and Lambda, by default, timeouts for 3 seconds. If you encounter issues with Lambda, fret not, you can check AWS CloudWatch to monitor logs and determine issues.

I then create the function URL in the Configuration tab in AWS Lambda, and use that URL to fetch the result of the Gemini API call.

After the struggle with Lamda, I pushed my code to GitHub and deployed it to AWS Amplify. It was very straightforward, connect your GitHub account, type your repo, choose a branch, then deploy. I then copied the URL given to check if there were errors.

To strengthen security, I went back to AWS Lambda and set the origin to point to my AWS Amplify app URL. Furthermore, I used AWS CloudFront for CORS handling and the added security headers. The process is simple, use the function URL of Lambda, configure the necessary options, set CORS to Access-Control-Allow-Origin to the AWS Amplify app URL, set security headers such as X-Frame-Options, Referrer-Policy, Strict-Transport-Security, and others.

Finally, I used the distribution URL of my AWS CloudFront as the URL in the fetch function of Word Wizard, replacing the function URL of Lambda.

If you want to check it out, visit this link: Word Wizard app

If you want to look through the entire source code, visit this link: Word Wizard repo