About the Project

Inspiration

The idea for this project came from my daughters, who are huge fans of cats. Inspired by their favorite cartoon, Gabby’s Dollhouse, they often draw adorable pictures of cats. I wanted to create something special that combined their creativity with my passion for technology. That’s how I decided to build FlipCats, a simple memory game that features their artwork.

What I Learned

This project was an incredible learning experience for me. Here are some of the key takeaways:

• Exploring New Tech Stack: I wasn’t familiar with React, but Amazon Q Developer made it easy to get started. I learned how to work with React components and manage states effectively.
• AWS Integration: Deploying the game using Amazon S3 taught me how to use AWS services for static web hosting. I also discovered AWS Amplify, which I plan to explore for future projects.
• AI-Assisted Development: Amazon Q Developer provided valuable code suggestions, which helped me save time and focus on refining the game.
• Creativity Meets Technology: Using MidJourney to digitize my daughters’ hand-drawn cat illustrations was a fun and rewarding experience.

How I Built It

1. Game Design
   I designed the game as a flipped cards memory game, where players match pairs of cat-themed cards. The functionality was implemented using React.

2. Development with Amazon Q Developer
   I installed the Amazon Q plugin for VS Code, which helped generate much of the initial code. With its intelligent prompts, I was able to quickly scaffold the project and learn React basics along the way.

3. Custom Art Integration
   The game features cat illustrations based on my daughters’ hand-drawn sketches. I used MidJourney to transform their drawings into polished digital images and replaced the placeholder assets with these custom designs.

4. Deployment
   Following Amazon Q’s instructions, I deployed the game to Amazon S3 as a static website. The process was straightforward and efficient, and it allowed me to make the game accessible online.

Challenges I Faced

• Learning React: As a beginner with React, understanding how to manage state and props was challenging initially, but Amazon Q Developer helped simplify the process.
• Image Processing: Converting hand-drawn sketches into high-quality digital illustrations required some experimentation with MidJourney and manual adjustments.
• Deployment: Although Amazon Q recommended AWS Amplify for deployment, I decided to use Amazon S3 for simplicity. Setting up the bucket policy and enabling static website hosting required some trial and error.

What’s Next?

I’m excited to enhance the game with more features and explore other AWS services. Future updates could include:

• Scoring System: Adding a scoring mechanism to track players’ progress.
• Responsive Design: Optimizing the game for mobile devices.
• AWS Amplify: Migrating to Amplify for a smoother deployment workflow and additional backend functionality.

Built With

• react