DEV Community: Yusra Liaqat

Building a Web-Based Riddle Game with Amazon Q CLI: My Journey with 'Riddle Me This'

Yusra Liaqat — Sun, 22 Jun 2025 16:48:54 +0000

Building a Web-Based Riddle Game with Amazon Q CLI: My Journey with "Riddle Me This"

Introduction

Recently, I embarked on a fun project to build a riddle game called "Riddle Me This" using Amazon Q CLI as my AI assistant. In this article, I’ll walk you through how I created both a console-based and web-based version of the game, the prompts I used, and what I learned along the way.

What is Amazon Q CLI?

Amazon Q is an AI assistant built by AWS that helps with coding tasks, infrastructure management, and software development. The CLI version allows you to interact with Amazon Q directly from your terminal, making it a powerful tool for developers.

Project Overview: Riddle Me This

"Riddle Me This" is an interactive riddle game with two versions:

A text-based console application
A web-based application using Flask and HTML/CSS/JavaScript

The game presents players with riddles, tracks their scores, provides hints after failed attempts, and maintains a leaderboard of high scores.

Setting Up the Environment

First, I set up my development environment:

# Create a project directory
mkdir riddle-me-this
cd riddle-me-this

# Initialize a virtual environment
python -m venv venv
source venv/bin/activate  # On Linux/macOS

# Install Flask for the web version
pip install flask

Using Amazon Q CLI to Build the Game

I used Amazon Q CLI to help me build the game by running:

q chat

This opened an interactive chat session where I could describe what I wanted to build and get code suggestions.

The Prompts I Used

Here are some of the key prompts I used with Amazon Q:

Initial console version:

Create a simple text-based game called "Riddle Me This" in Python. The game should present riddles to the player, check answers, implement scoring, timing, hints after failed attempts, and store high scores.
Web-based version:

Create a GUI version of the "Riddle Me This" game in Python with Flask for the backend and HTML/CSS/Javascript for the frontend. The main page should display riddles, provide input for answers, show hints after failed attempts, and track scores and time.
When I encountered installation issues:

error: externally-managed-environment

Amazon Q provided solutions for handling this error by suggesting virtual environments.

What I Built

Console Version

The console version includes:

A collection of riddles with questions, answers, and hints
Player name input
Scoring system (1 point per correct answer)
Timer for each riddle and total game time
Hints after 2 failed attempts
High score system stored in a CSV file

Web Version

The web version expanded on this with:

A Flask backend
Responsive HTML/CSS frontend
Welcome page for player name input
Game page for displaying riddles and accepting answers
Game over page showing final score
High scores leaderboard
Timer displayed on the game interface

Project Structure

riddle-me-this/
├── app.py                 # Flask application
├── high_scores.csv        # High scores data file
├── riddle_me_this.py      # Original console version
├── static/
│   └── css/
│       └── style.css      # CSS styles
└── templates/
    ├── game.html          # Game page template
    ├── game_over.html     # Game over page template
    ├── highscores.html    # High scores page template
    └── welcome.html       # Welcome page template

What I Learned

Through this project, I learned:

AI-Assisted Development: Amazon Q CLI significantly accelerated my development process by generating code, suggesting improvements, and helping with debugging.
Full-Stack Development: I gained experience building both backend (Python/Flask) and frontend (HTML/CSS/JavaScript) components.
Session Management: I learned how to manage user sessions in Flask to track game state.
Responsive Design: The web interface adapts to different screen sizes for a better user experience.
Error Handling: I implemented graceful error handling for invalid inputs and edge cases.
Virtual Environments: I learned the importance of using virtual environments to manage dependencies.

Challenges and Solutions

One challenge I faced was the externally-managed-environment error when installing Flask. Amazon Q suggested using a virtual environment, which solved the problem:

python -m venv venv
source venv/bin/activate
pip install flask

Future Improvements

Some ideas for future enhancements:

Add difficulty levels
Implement user authentication
Add sound effects
Create a multiplayer mode
Add categories for riddles

Code Repository

You can find the complete code for this project on my GitHub repository: https://github.com/Yusra310/Riddle-me-this

Conclusion

Building "Riddle Me This" with Amazon Q CLI was a fun and educational experience. The AI assistant helped me quickly develop both console and web versions of the game, allowing me to focus on the creative aspects rather than getting stuck on implementation details.

If you’re interested in game development or learning web development with Flask, I encourage you to try building your own version of this game!

Ecommerce App Deployment with Flask (Python), GitHub, Jenkins, Docker, and EC2. 🚀

Yusra Liaqat — Fri, 24 Jan 2025 21:39:51 +0000

Hey folks! 👋 I’m super excited to share an end-to-end DevOps project I recently completed. This project ties together AWS EC2, Docker, GitHub, and Jenkins into a seamless CI/CD workflow. If you're looking for a hands-on guide with a real-world use case, buckle up. I'll walk you through every step I took, from setting up infrastructure to deploying a containerized app with Jenkins. Let’s dive in! 🤿

The Idea
Setting Up AWS EC2 Instances
Installing Docker on the Ubuntu EC2 Instance
Building the Ecommerce App
Creating Repo locally and initializing on GitHub
Pulling Jenkins and Installing Plugins
Setting Up Jenkins with GitHub
Creating a Jenkins Freestyle Pipeline
Resolving Docker Issues
Application Deployment
Visualizing the Workflow
Code and Resources
Closing Thoughts

The Idea:

The goal was to build and deploy an ecommerce application using modern DevOps tools and practices. The process included application development, containerization, and setting up a pipeline for automated deployment.

Setting Up AWS EC2 Instances

I created two EC2 instances on AWS:

Ubuntu Instance: For running Docker and hosting the application.
Windows Instance: For developing the ecommerce app.
Both instances were provisioned with security groups to allow SSH/RDP and HTTP access.

Installing Docker on the Ubuntu EC2 Instance

To containerize and run our app, I installed Docker on the Ubuntu EC2 server. Here's the magic command I used:

sudo apt update
sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker

Building the Ecommerce App

The Windows EC2 instance served as my dev environment. I developed a simple ecommerce app using Flask python. Once I was happy with the app, I pushed the code to GitHub.

Creating Repo locally and initializing on GitHub

Essentially, it is just as if you were creating your development project locally and then uploading it to Git

Create any Repo/Project locally in VS code
It won’t be a part of GitHub Repo as for now
After adding files your project and updating them we need to initialize our Repo so Git can recognize it

echo "# terraform01" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Yusra310/terraform01.git
git push -u origin main

This made my workflow a little cleaner and portable.

Pulling Jenkins and Installing Plugins

To automate the build and deployment process, I pulled the official Jenkins Docker image on the Ubuntu instance:

docker run -d --name jenkins \
  -p 8080:8080 -p 50000:50000 \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v jenkins_home:/var/jenkins_home \
  jenkins/jenkins:lts

I accessed Jenkins through the browser

http://54.159.138.147:8080

unlocked it using the initial password, and installed the necessary plugins:

GitHub Plugin for GitHub integration.
Docker Plugin to enable Docker commands within Jenkins.

Setting Up Jenkins with GitHub

To securely integrate GitHub with Jenkins, I created a GitHub Personal Access Token. This token was added as a credential in Jenkins, allowing the CI/CD pipeline to pull code from the GitHub repository.

Creating a Jenkins Freestyle Pipeline

Here’s the exciting part! 🎉 I set up a Freestyle Jenkins pipeline for the CI/CD workflow. The pipeline:

Jenkins Shell Script:

Docker build -t ecommerce-app
Docker run -p 5000:5000 -d ecommerce-app

Resolving Docker Issues

The first pipeline run failed with an error: docker: command not found.
The issue? Docker wasn’t installed in the Jenkins container! 🤦‍♀️
Solution: I installed Docker inside the Jenkins container and gave it access to the host’s Docker socket. This allowed Jenkins to execute Docker commands seamlessly.

Application Deployment

With everything in place, I ran the Jenkins pipeline again and The ecommerce app was deployed and accessible in the browser at

http://54.159.138.147:5000

Visualizing the Workflow

To make things more digestible, I created a draw.io diagram that outlines the entire workflow, from code push to deployment. Here's a summary of the steps:

Develop the app on the Windows instance.
Push the code to GitHub.
Jenkins pulls the code, builds a Docker image, and runs the container.
The app is hosted on the Ubuntu EC2 instance.

Code and Resources

I’ve shared the source code, Jenkins configuration, and the draw.io diagram here on GitHub [https://github.com/Yusra310/ecommerce-app]. Feel free to check it out and try this workflow yourself.

Closing Thoughts

This project was a blast to work on! It taught me the power of automation and containerization in modern application development. If you’re just starting with DevOps, projects like this are a fantastic way to get hands-on experience.
Got questions or suggestions? Drop them in the comments below! Let’s keep building. 💪
Until next time, happy coding and deploying! 🖤