Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

AWS Logo
Menu
Ups and Downs - The game but also my journey with AWS Q

Ups and Downs - The game but also my journey with AWS Q

Experimented with Amazon Q to entirely create my frontend React for the game

game-challenge
Nishtha Patel
Published Jan 15, 2025
Comments
Game Overview
"Ups and Downs" is a life simulation game inspired by Snakes and Ladders. Players roll a die to navigate life’s surprises, answering questions at each step that shape their journey. Randomly selected "Snake/Ladder" questions bring successes or setbacks based on their background and choices. At the 100th step, players receive a life analysis and can chat with an AI bot about their journey.
Demo:
Frontend code: Link
Backend code: Link

My Background

I am a developer with expertise in Angular. I want to take a challenge and assess the complete competence of Amazon Q. Hence, I chose to make my entire front-end code in React. Though I know minor things about frameworks, it is not enough to even make a simple project. Since I do have experience in frontend development, I took up this opportunity to challenge myself.
Side note - For brevity, I will address Amazon Q as Q from here on.

My Journey

Q helped me integrate my Three.js test code (link) into a React-Vite project for seamless implementation. I structured the project into key components: Dashboard, Game, Game Analysis, and GamePlay. It helped me implement React Router for smooth routing and navigation. It generated dynamic page code to enable in-app navigation and included reusable React components for each page.
Image not found
The code provided by Q referenced my code and created GLTFLoader to optimize 3D model loading (which was better implemented than my code). IT fixed all the import issues that were met due to change of code. It also created the character and implemented interactive features like character movement, stair climbing (on space bar input), and dice roll animations.
Image not found
A rendering issue arose with duplicate dice, which was resolved after iterative debugging through back-and-forth communication with Q. With these back-and forth conversations, it created files for reference as well. Link.
Image not found
I requested a two-panel layout, with the top panel displaying Game History and the bottom panel focused on GamePlay, which Q implemented successfully.
Image not found
Q implemented the panels, but I was not happy with the look. So I asked it to change the layout. Unfortunately, I used up my free monthly 1000 code line feature, by this point. I felt at a standstill for a while. However, I picked up again and decided to work on this with Q's chat plugin.
I utilized it to provide code context and modify the logic for jobs like displaying the Question Panel dynamically.
Image not found
Q assisted in repositioning the Game History from the top panel to a new left-side panel, aligning with the updated UI design.
Image not found
The Roll Dice feature was also moved to the left game panel, consolidating gameplay controls for better accessibility. It also helped me successfully implement logging of the player’s traversed steps in the Game History panel.
Image not found
I also instructed Q to seek clarifications, and it responded with a detailed breakdown for each file with the questions on which it needed clarification.
Image not found
Q also helped in creation of a huge metadata for nearly 100 steps, formatting the questions and answers into the specified object structure for correct game flow. Link.
Image not found

What worked for me?

  • During development, I asked React-specific questions, such as how data is passed between components and the role of props in React, which it clearly explained with examples.
  • Q helped me quickly style pages and fine-tune my CSS for a polished UI.
  • It efficiently handled tasks ranging from the smallest tweaks to major changes, provided it had the necessary code context.
  • I gave exact prompts like “The question panel appears before the charcater climbs the steps, how do I make sure that question panel appears => after 0.5 second of dice roll, if the roll number was 1 => after 1 second of dice roll, if the roll number was 2 => after 1.5 second of dice roll, if the roll number was 3” Even misspelling was not an issues as you see I wrote character spelling wrong.

What didn't work for me?

  • I had a big problem on finding what to do when Amazon Q was working one my code. Will take time to get it used to the work environment.
  • If Q chat could analyze 2-3 files at once, I wouldn’t have to repeatedly paste code.
  • It generates a lot of code in fraction of time, so the programmer need to assess constantly if the code is written optimally is an issue.
     
Comments

Comments

Log in to comment