AWS Logo
Menu
Peekaboo Pairs

Peekaboo Pairs

A backend engineer's adventure in a front end project

Published Jan 14, 2025
Give it a shot at Peekaboo Pairs

Backstory

When I came across AWS Game Builder Challenge, I had multiple goals in mind with this, with the obvious being the prize money, the more realistic one being - see how far I can get to with the latest stack of front end technologies in developing a complete solution. I have been a backend developer for my entire engineering career working on C, C++, Python, Perl, Ruby. My indulgence in front end development is minimal and probably a decade old tinkering something with jQuery and primitive HTML, CSS. The other tangetial goal I had is to develop something that my kid has fun playing with.
My initial attempt for is a multi-player board game, spent few days on it, even though I am using the Code generation tools like Amazon Q, ChatGPT, Google AI Studio the sorts of problems I am encountering weren't easy to solve, I was not able to get to a workable solution with help of online documentation and LLMs, I realized it would require lot more domain expertise to proceed further with that, which I don't have at the moment, so I gave up on this challenge.
With 4 days left in the competition, I didn't want to feel defeated in this, so I came back to Amazon Q this time right from the beginning in terms of what game that I could try for this and picking a simpler game which has minimal components and I went more methodical with this one, starting with minimal skeleton and slowly adding features with increasing complexity, so that I can debug and potential fix thigns on the way. Fortunately, this approach worked, I am amazed at LLMs(in this specific scenario with Amazon Q) capability to writing code that helps in full end to end development.

Services used for development

  • Amazon Q as part of VS Code for ideation, design & development
  • Amazon Amplify to host the game
  • Amazon DynamoDB to store highest score

Amazon Q Usage

There are 960 lines of code including all the files in the src and few configuration files at the root level. All these lines except 7 lines(in src/styles/GameBoard.css) including comments 😀 were generated by Amazon Q, all I had to do was click Insert At Cursor of the generated code in the right file.
A full chat history of prompts and responses captured at docs/amazon-q-full-chat.md for the curious. I wish I had an easier way to capture the marked down response generated in the chat window. Also included some images captured of the prompts and responses in docs.
I am quite surprised on how far I was able to go with the Amazon Q IDE integrated Chat plugin, highlighting some of the aspects of the Amazon Q usage below:
Couple of screenshots of the game:
New Game
New Game
Finished Game
Finished Game

 

Comments