How I Built a Flipped Cards Game for My Daughters in Just Two Hours
A cat-themed memory game built with Amazon Q Developer, featuring custom artwork inspired by my daughters. Deployed on AWS S3 for fun and learning!
Published Dec 14, 2024
Try it yourself a http://flip-cats-game.s3-website.us-east-2.amazonaws.com/!
My daughters are big fans of cats, inspired by the popular cartoon Gabby’s Dollhouse. They love drawing pictures of cats, which gave me the idea to create a simple and fun cat-themed game for them. I decided to build a flipped cards memory game featuring their cat drawings.
I’m not very familiar with React, but the Amazon Q Developer plugin for VS Code was a game changer. It simplified the entire development process and helped me quickly get started with React and AWS services.
- Getting Started with Amazon Q Developer
First, I installed the Amazon Q plugin in Visual Studio Code. The setup was straightforward, and I was able to start using it right away. With Amazon Q, I simply provided prompts describing the functionality I needed for the game, and it generated most of the code for me. This made it much easier to learn a new tech stack and focus on the core features of my project.
2. Customizing the Game
After generating the initial code, I spent some time revising and debugging to add custom features. I replaced the default images with artwork inspired by my daughters’ hand-drawn cat pictures. To bring their drawings to life, I used MidJourney to convert their sketches into polished digital illustrations.
After generating the initial code, I spent some time revising and debugging to add custom features. I replaced the default images with artwork inspired by my daughters’ hand-drawn cat pictures. To bring their drawings to life, I used MidJourney to convert their sketches into polished digital illustrations.
3.Deploying the Game
Following Amazon Q’s guidance, I deployed the game to Amazon S3, turning it into a static website that my daughters could access online. The deployment process was simple, and the instructions provided by Amazon Q were incredibly helpful. While it also suggested using AWS Amplify for future improvements, I decided to explore that later.
Following Amazon Q’s guidance, I deployed the game to Amazon S3, turning it into a static website that my daughters could access online. The deployment process was simple, and the instructions provided by Amazon Q were incredibly helpful. While it also suggested using AWS Amplify for future improvements, I decided to explore that later.
- Cat-Themed Memory Game: The game challenges players to match pairs of cat-themed cards.
- AI-Assisted Development: Amazon Q Developer streamlined the coding process and helped me quickly implement React components.
- Hand-Drawn Artwork: The game features custom cat illustrations derived from my daughters’ artwork using AI tools like MidJourney.
- Static Hosting: The game is hosted on Amazon S3, making it accessible as a static website.
A short demo video showcasing the game’s functionality has been uploaded to YouTube: