I Built "Hackerman" with Amazon Q

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment! What I Built Ever had your non tech friends/colleagues/family stare when you use a terminal in front of them, asking if you are you hacking something. Now you can truly amaze them them further with a web based terminal simulator that turns random keystrokes into impressive looking cybersecurity wizardry. Inspired by Hollywood's classic hacker scenes furious typing, screens filled with code, dramatically shouting "I'm in!", Hackerman transforms ordinary typing into a spectacular digital show. The interface creates convincing technical jargon, shows animated progress bars, and simulates security breaches all without needing any actual hacking knowledge. I created this fun project with Amazon Q generating code in JavaScript, CSS, and HTML to create a convincing terminal experience that responds dynamically to user input. The terminal simulator includes: Realistic "hacking" command responses with technical terminology Animated progress indicators and loading sequences that build suspense Fake network intrusion displays with random IP addresses and security alerts Options for freestyle typing or preset hacking routines (like "crack password" or "bypass firewall") Different visual themes you can choose from, including classic green-on-black and modern blue interfaces Demo Link to try, hosted on Github pages: Hackerman Youtube video of the demo: Youtube Code Repository Github Repo for Hackerman How I Used Amazon Q Developer Amazon Q Developer helped me throughout the project. I first asked AWS Nova to refine my idea into a clear prompt, which I then used with Amazon Q to create the foundation. With a few small changes, the final product was ready. Interactive elements prompt 1. Code Generation Amazon Q created the core functions after I described needing a terminal that responds to typing with fake hacking sequences. The generated code handled: Reading and understanding command inputs through event listeners Creating styled terminal outputs with CSS animations Managing animation timing with JavaScript promises and setTimeout Generating random technical jargon that appears authentic When I needed to implement the typing simulation effect, Amazon Q provided code that mimics realistic typing with variable speeds. It also helped create the command parser that interprets what users type and generates appropriate responses. 2. UI Enhancement For visual improvements, Amazon Q helped create: A realistic blinking cursor that matches actual terminal behavior Smooth loading bar animations with percentage counters Various color options based on popular terminal color schemes Designs that work on different screen sizes, from desktop to mobile Amazon Q also suggested adding small details like occasional "access denied" messages and authentication requirements to make the simulation more engaging and interactive. Challenges and Learnings The main challenge was making small updates. Minor change requests sometimes broke the code, and without proper version control at first, these problems often meant rebuilding parts from scratch. For example, adding new command types would sometimes conflict with existing command parsing logic. Another issue was unused code, some visual elements were created but not connected to the final interface. This resulted in code bloat, teaching me the importance of incremental development and testing. What I learned: Simple animations can create very engaging experiences when timed correctly Random timing makes computer actions seem more human and authentic Terminal interfaces still fascinate most people due to their mysterious nature The perception of hacking is often more about visual feedback than actual technical processes Amazon Q excels at generating functional interface code with minimal guidance Next Steps Future improvements will include: More complex hacking sequence simulations with multi stage "attacks" Support for multiple terminal windows to simulate advanced system access Story-based hacking missions with objectives and success conditions Better experience on mobile devices with touch optimized controls Sound effects to enhance the immersive experience A "movie mode" that automatically runs impressive sequences for demonstrations Try it out and let me know what you think. Lets Connect - Lewis Sawe: LinkedIn Buy me coffee ☕

May 8, 2025 - 22:16

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

Ever had your non tech friends/colleagues/family stare when you use a terminal in front of them, asking if you are you hacking something. Now you can truly amaze them them further with a web based terminal simulator that turns random keystrokes into impressive looking cybersecurity wizardry.

Inspired by Hollywood's classic hacker scenes furious typing, screens filled with code, dramatically shouting "I'm in!", Hackerman transforms ordinary typing into a spectacular digital show. The interface creates convincing technical jargon, shows animated progress bars, and simulates security breaches all without needing any actual hacking knowledge.

I created this fun project with Amazon Q generating code in JavaScript, CSS, and HTML to create a convincing terminal experience that responds dynamically to user input.

The terminal simulator includes:

Realistic "hacking" command responses with technical terminology
Animated progress indicators and loading sequences that build suspense
Fake network intrusion displays with random IP addresses and security alerts
Options for freestyle typing or preset hacking routines (like "crack password" or "bypass firewall")
Different visual themes you can choose from, including classic green-on-black and modern blue interfaces

Demo

Link to try, hosted on Github pages: Hackerman

Youtube video of the demo: Youtube

Code Repository

Github Repo for Hackerman

How I Used Amazon Q Developer

Amazon Q Developer helped me throughout the project. I first asked AWS Nova to refine my idea into a clear prompt, which I then used with Amazon Q to create the foundation. With a few small changes, the final product was ready.

Interactive elements prompt

1. Code Generation

Amazon Q created the core functions after I described needing a terminal that responds to typing with fake hacking sequences.

The generated code handled:

Reading and understanding command inputs through event listeners
Creating styled terminal outputs with CSS animations
Managing animation timing with JavaScript promises and setTimeout
Generating random technical jargon that appears authentic

When I needed to implement the typing simulation effect, Amazon Q provided code that mimics realistic typing with variable speeds. It also helped create the command parser that interprets what users type and generates appropriate responses.

2. UI Enhancement

For visual improvements, Amazon Q helped create:

A realistic blinking cursor that matches actual terminal behavior
Smooth loading bar animations with percentage counters
Various color options based on popular terminal color schemes
Designs that work on different screen sizes, from desktop to mobile

Amazon Q also suggested adding small details like occasional "access denied" messages and authentication requirements to make the simulation more engaging and interactive.

Challenges and Learnings

The main challenge was making small updates. Minor change requests sometimes broke the code, and without proper version control at first, these problems often meant rebuilding parts from scratch. For example, adding new command types would sometimes conflict with existing command parsing logic.

Another issue was unused code, some visual elements were created but not connected to the final interface. This resulted in code bloat, teaching me the importance of incremental development and testing.

What I learned:

Simple animations can create very engaging experiences when timed correctly
Random timing makes computer actions seem more human and authentic
Terminal interfaces still fascinate most people due to their mysterious nature
The perception of hacking is often more about visual feedback than actual technical processes
Amazon Q excels at generating functional interface code with minimal guidance

Next Steps

Future improvements will include:

More complex hacking sequence simulations with multi stage "attacks"
Support for multiple terminal windows to simulate advanced system access
Story-based hacking missions with objectives and success conditions
Better experience on mobile devices with touch optimized controls
Sound effects to enhance the immersive experience
A "movie mode" that automatically runs impressive sequences for demonstrations

Try it out and let me know what you think.

Lets Connect - Lewis Sawe: LinkedIn

Buy me coffee ☕