DEV Community: Attila Olbrich

Automated Code Reviews and Docs with AI — Seamlessly in GitHub Actions or from the CLI

Attila Olbrich — Sun, 11 May 2025 19:49:33 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

What I Built

I created an automation tool using golang, called QReview that enhances code review workflows using Amazon Q Developer CLI, and optionally integrates with GitHub, Ollama, and Amazon Bedrock. It helps developers automate reviews, generate documentation, and surface security or improvement suggestions — all from the command line.

Demo

Here’s a quick demo of QReview in action: Note: This video uses AI voice over.

[![Watch the video]

You’ll see:

At the beginning of the video I explain what the tool can do
Terminal reviews and summaries
Markdown + HTML output generation
PR inline comments via GitHub API
Dynamic, timestamped documentation
GitGub action set-up

Code Repository

https://github.com/olbrichattila/qreview

Key Features:

Local or GitHub PR Code Review: Perform in-depth reviews using local changes or GitHub Pull Requests. Output can be shown directly in the terminal (with formatting and colors) or posted as inline comments in the PR.
Auto-Generated Documentation: Creates structured local HTML documentation for each review session — broken down by year, month/day, and hour/minute — and includes:
Review Documentation: AI-driven comments and suggestions
Code Documentation: Describes what the code does
Update Documentation: Explains what changed and why
Custom Prompt Support:

Extend reviews using your own YAML configuration. You can define prompts, input modes (diff, file, etc.), and outputs (HTML, Markdown, PR comments). Example:

- prompt: "Summarize the differences."
  retrieverKind: diff
  commentOnPr: true
  reporters:
    - kind: html
      name: diff-summary
    - kind: markdown
      name: diff-summary

Flexible AI Client Integration: Supports Amazon Q Developer CLI by default, but can also run with:
Amazon Bedrock
Ollama (locally installed)

GitHub Action Support:

Fully automatable via GitHub workflows. Example:

name: Run code review on PR

on:
  pull_request:
    types: [opened]

jobs:
  run-qreview:
    runs-on: ubuntu-latest
    steps:
      - name: Pull Docker image
        run: docker pull aolb/qreview:latest

      - name: Run the container
        env:
          AI_CLIENT: ${{ secrets.AI_CLIENT }}
          PR_URL: ${{ github.event.pull_request.html_url }}
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
        run: |
          docker run \
            -e PR_URL="$PR_URL" \
            -e AI_CLIENT="$AI_CLIENT" \
            -e GITHUB_TOKEN="$GITHUB_TOKEN" \
            -e AWS_ACCESS_KEY_ID="$AWS_ACCESS_KEY_ID" \
            -e AWS_SECRET_ACCESS_KEY="$AWS_SECRET_ACCESS_KEY" \
            -e AWS_REGION="$AWS_REGION" \
            aolb/qreview

Note: Amazon Q Developer CLI currently requires interactive login, so GitHub Action support is limited to Bedrock or other backends unless expanded.

Possible Future Improvements

This project is already quite powerful, but there are several areas I plan to enhance further:

Improve Code Quality and Refactoring:
The tool has grown quickly, and parts of the codebase would benefit from refactoring and better organization. As it continues to evolve, I plan to clean up internal abstractions, enforce stricter typing, and improve test coverage.
Additional Reporter Types:
Expand the current HTML and Markdown reporters to include:
Direct uploads to Amazon S3 for documentation hosting
Integration with Confluence for team-wide visibility
Custom API calls to push documentation or review results to internal systems
Dynamic Documentation Portal:
Create a dedicated documentation viewer site with search and filtering by file, time, and type (review, code explanation, change summary). This would make it easier for teams to explore the review history over time.
Better GitHub Integration:
Support for more GitHub workflows (e.g., triggered on push or comment), better diff visualization, and inline responses to review comments.
Slack or Other Chat Notifications for Reviews:
Add integration with Slack (or similar chat platforms) to send real-time notifications when a new review is completed. This could include summaries, critical suggestions, and direct links to full reports or PR comments — helping teams stay informed and act faster.
Domain-Aware, Agentic AI Reviews:
Extend the reviewer with agentic AI capabilities using Retrieval-Augmented Generation (RAG), where reviews can be enhanced by specific domain knowledge or internal documentation. This would allow the tool to not only identify code issues, but also evaluate business logic, validate domain-specific rules, and flag inconsistencies based on proprietary requirements or best practices.

These improvements aim to make the tool even more developer-friendly, team-scalable, and capable of reasoning beyond the code itself.

Screenshots

Command line

Running in GitHub action

Review is done in GitHub action

8 Comment added to the pull request

Example comment

Reports

Report - menu

Report - file list

Report - example

How I Used Amazon Q Developer

Amazon Q Developer CLI is at the heart of this project. I used it to:

Analyze code diffs and full files using custom prompts
Extract improvement proposals, summaries, and documentation
Output structured, reliable feedback in both markdown and HTML
The Amazon Badrock implementation was done by Q developer, installed in vscode with a prompt like please use the existing interface like ollama and create a Badrock implementation.

After I finished the prototype::

I was curious to see if the Q developer could continue implementing features in the system while following the interfaces and code style I had established. I asked Q to create a new reporter that should implement my existing interface—but I didn’t mention this requirement explicitly. I wanted to see if it could figure it out on its own.

Q not only implemented the feature but also correctly identified that it needed to conform to the existing interface and be added to the existing factory.

Here is my conversation with Q:

My question

Modifications

Q Review explanation

An interesting fact:

I created a pull request with the new code, and the automated AI review highlighted several potential improvements. However, it failed to notice that the code generated by Q had effectively copy-pasted a function from the reference code I provided—but never actually used it. As a result, there was an orphaned function left in the generated code.

This highlights an important limitation of current AI review tools: while they can catch stylistic issues and suggest optimizations, they may miss higher-level problems like unused or redundant code. It reinforces the need for human oversight—especially when AI-generated contributions are involved.

Development Experience and Challenges

What started as a quick automation experiment quickly evolved into a much larger and more powerful tool as new ideas emerged during development — especially around making the system modular, with support for multiple and extendable reporters (e.g., HTML, Markdown, PR comments).

Key Challenges:

Aligning Reviews to the Correct Lines in GitHub PRs
One of the most complex problems was ensuring that AI-generated comments could be accurately mapped to the correct lines in a Pull Request. Since the AI (Amazon Q or others) may tokenize input, omit blank lines, or slightly reformat code internally, it often drifted from the original structure.
To solve this, I preprocess the full source file (removing blank lines) before feeding it into the model, then carefully map the cleaned lines back to their positions in the raw file. This also includes parsing and respecting the Git diff hunk headers @@ -a,b +c,d @@ to ensure the review appears exactly where intended in the PR.
Handling Incomplete Context in Diffs:
Reviewing just the diff often lacked enough context, leading to poor or irrelevant suggestions. I had to design a hybrid approach that uses both the full source file (for context-aware reviews) and the diff (for accurate line mapping and change detection).
Unexpected but Welcome Feedback — From Itself:
Once the system was functional, I turned it loose on its own source code. The result? A cascade of inline suggestions and improvement ideas — effectively reviewing and improving itself. This was a rewarding moment that reinforced the value and practical utility of the tool

What began as a utility has grown into a versatile, self-improving, and extensible code review companion.

Local installation guide:

Please use the command:

go install github.com/olbrichattila/qreview@latest

Usage:

Review local git changes

qreview

Locally review GitHub Pull request

qreview -gitHubPr=<your PR url>

Locally review GitHub Pull request and comment on the PR in GitHub

qreview -gitHubPr=<your PR url> -comment

GitHub automation installation guide:

Set Up GitHub Secrets

AI_CLIENT=bedrock
FILE_EXTENSIONS=php,go,js  # Add/extend file types to analyze
GH_TOKEN=<your_GitHub_token>  
AWS_ACCESS_KEY_ID=<your_AWS_access_key>  
AWS_SECRET_ACCESS_KEY=<your_AWS_secret_key>  
AWS_REGION=<your_AWS_region>

Note: Ensure your AWS IAM user has permissions for Amazon Bedrock (anthropic.claude-v2).

Create GitHub Workflow

Add this YAML to .github/workflows/code-review.yml:

name: Automated Code Review on PR  

on:  
  pull_request:  
    types: [opened]  

jobs:  
  review:  
    runs-on: ubuntu-latest  
    steps:  
      - name: Pull QReview Docker Image  
        run: docker pull aolb/qreview:latest  

      - name: Run Code Review  
        env:  
          AI_CLIENT: ${{ secrets.AI_CLIENT }}  
          FILE_EXTENSIONS: ${{ secrets.FILE_EXTENSIONS }}  
          PR_URL: ${{ github.event.pull_request.html_url }}  
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}  
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}  
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}  
          AWS_REGION: ${{ secrets.AWS_REGION }}  
        run: |  
          docker run \  
            -e PR_URL="$PR_URL" \  
            -e AI_CLIENT="$AI_CLIENT" \  
            -e FILE_EXTENSIONS="$FILE_EXTENSIONS" \  
            -e GITHUB_TOKEN="$GITHUB_TOKEN" \  
            -e AWS_ACCESS_KEY_ID="$AWS_ACCESS_KEY_ID" \  
            -e AWS_SECRET_ACCESS_KEY="$AWS_SECRET_ACCESS_KEY" \  
            -e AWS_REGION="$AWS_REGION" \  
            aolb/qreview

Usage
The Pull Request is automatically reviewed when it is created.

Notes:
Default model: anthropic.claude-v2 (ensure IAM permissions).
Extend FILE_EXTENSIONS to include other languages as needed.

ExplainMate, the Browser Context Helper AI Extension

Attila Olbrich — Fri, 09 May 2025 07:44:44 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Exploring the Possibilities

What I Built

ExplainMate is a browser extension powered by a Golang backend that uses Amazon Bedrock via Q Developer to explain any selected content on the web. Just highlight the text you want to understand better, right-click, and choose “Explain with AI.” A popup window will appear with an AI-generated explanation you can scroll through — all without leaving the page.

This project represents a novel use of Amazon Q Developer because it was built entirely with Q — I didn’t write a single line of code myself. I simply provided a todo.txt file with high-level requirements, and Q Developer took care of everything from scaffolding the project to writing backend code, generating the browser extension, and even producing a README.md for setup and usage. This shows the transformative potential of Q Developer for rapid prototyping and AI-driven development.

Demo

📽️ Video Demo – AI Voiceover Included

https://youtu.be/d9OXnjJzrzA

Screenshot

Code Repository

https://github.com/olbrichattila/explainmate

How I Used Amazon Q Developer

This project was created entirely through Amazon Q Developer. I began by uploading a plain text file containing my project requirements. From there, Q Developer generated the full project — including backend logic in Golang, the browser extension UI, and supporting configuration files. It even authored the documentation.

The only manual intervention I needed was when Q Developer hit a timeout while trying to generate icon assets. I prompted it to continue, and eventually the full project was generated.

This experience was eye-opening. In under 30 minutes, I had a fully functioning prototype — all from a natural-language task list. It made me reflect deeply on how the role of software engineers is shifting. We’re entering an era where working with AI tools like Q Developer will be essential. Rather than writing every line of code manually, developers can now act as architects and collaborators with AI, accelerating delivery while maintaining creative control.

To share the journey, I’ve included the full conversation thread with Q Developer that led to the final implementation.

My todo.txt prompt

Implement Browser Context Helper Extension

- Build a Chrome extension that allows users to highlight text on a webpage and select “Explain” to generate a detailed explanation.
- Develop a Golang backend that communicates with AWS Bedrock for generating explanations.
- Ensure the backend retrieves AWS security keys from OS environment variables.
- Host the backend on a server (e.g., Amazon EC2 or DigitalOcean droplet).
- Allow users to configure the API endpoint via the extension's settings page.

Conversation with Q Developer

Full conversation

can you put together this project from my todo.txt here?

I'll help you put together the project based on your todo.txt file. Let me first check the contents of that file to understand what needs to be done.

I'll help you implement this Browser Context Helper Extension project. Based on your todo.txt, we need to create:

A Chrome extension with text highlighting and explanation functionality

A Golang backend that uses AWS Bedrock

Configuration options for the extension

Let's start by setting up the project structure and implementing each component:

Let's create the project structure. I'll start by setting up the backend and then the Chrome extension.

Creating a README.md file to document the project structure, setup instructions, and usage.

Creating the main project directories for the backend and extension components.

Now, let's implement the backend first:

Creating the main Go backend file that handles API requests and communicates with AWS Bedrock.

Creating the go.mod file to define the Go module and its dependencies.

Now, let's create the Chrome extension files:

Creating the manifest.json file that defines the Chrome extension properties and permissions.

Creating the images directory for the extension icons.

Creating the background.js file that handles context menu creation and API communication.

Creating the content.js file that handles displaying the explanation popup on the webpage.

Creating the popup.html file that displays when the user clicks the extension icon.

Creating the popup.js file that handles popup button interactions.

Creating the options.html file that allows users to configure the extension settings.

Creating the options.js file that handles saving and loading extension settings.

Creating a Dockerfile for the backend to facilitate deployment to servers like EC2 or DigitalOcean.

Creating a placeholder 16x16 icon for the extension.

Creating a placeholder 48x48 icon for the extension.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

I'll continue implementing the project in smaller steps. Let's create the remaining icon file:

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

I'll continue implementing the project in smaller steps. Let's check what we've created so far and then add the remaining files.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

Response timed out - message took too long to generate

can you continue where you left off with ExplainMate is a browser extension powered by AI that helps you understand and explain content directly within your web browser context.

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

Response timed out - message took too long to generate

Response timed out - message took too long to generate

Please try to continue again

Response timed out - message took too long to generate

can you continue?

You took too long to respond - try to split up the work into smaller steps. Do not apologize.

Response timed out - message took too long to generate

I can see you always have a response timeout and it is probably the icon file generation. Can you continue generating the scrpts and I will sort out the iconds manually later?

Response timed out - message took too long to generate

I can see you always have a response timeout and it is probably the icon file generation. Can you continue generating the scrpts and I will sort out the iconds manually later?

Response timed out - message took too long to generate

I can see you always have a response timeout and it is probably the icon file generation.
Can you continue generating the scrpts and I will sort out the iconds manually later?

Response timed out - message took too long to generate

Can you continue generating the scrpts and I will sort out the iconds manually later, or ask you later?

Response timed out - message took too long to generate

What does it mean when you say ersponse timed out, can i do something to fix it in my Ide VsCode?

Response timed out - message took too long to generate


---

You left off my code generatin with response timeout, can we prioritize generating the rest of the script and leage the icons to the end?

I'll prioritize generating the rest of the script for your browser extension. Let me first check what files we have in the project to understand the structure.

Let me check the backend code first to understand what we're working with:

Now I'll create the missing icon128.png file. Let me first check if there's a todo.txt file that might have more information:

Now I'll create the missing icon128.png file:

Creating a placeholder icon128.png file for the Chrome extension

Based on the files I've examined, I can see that most of the extension is already implemented, but we need to complete a few things. Let me prioritize generating the remaining scripts for your browser extension.

Let me enhance the content.js file to improve the explanation popup functionality:

Enhancing the content.js file with improved popup styling, error handling, draggable functionality, and better content formatting

Enhancing the background.js file with improved error handling, health check functionality, and direct explanation requests from popup

Enhancing the popup.html file with improved styling, direct input functionality, API status indicator, and loading spinner

Enhancing the popup.js file with API status checking, direct explanation functionality, and improved result formatting

Enhancing the options.js file with connection testing, input validation, and reset functionality

Enhancing the options.html file with improved styling, connection testing button, reset functionality, and setup information

Enhancing the README.md file with more comprehensive documentation including features, deployment options, security considerations, and troubleshooting

Great! I've completed the implementation of your Browser Context Helper extension. Here's a summary of what I've done:

Enhanced Content Script (content.js):

Improved the explanation popup with better styling

Added draggable functionality to the popup

Improved error handling and content formatting

Added a footer with "Powered by AWS Bedrock" text

Enhanced Background Script (background.js):

Added better error handling for API requests

Implemented health check functionality to verify API status

Added support for direct explanation requests from the popup

Enhanced Popup UI (popup.html/js):

Added direct text input functionality for quick explanations

Implemented API status indicator to show backend connectivity

Added loading spinner during API requests

Improved styling and user experience

Enhanced Options Page (options.html/js):

Added connection testing functionality

Implemented input validation for API endpoint

Added reset to default functionality

Improved styling and added setup information

Updated README.md:

Added comprehensive documentation

Included features list, deployment options

Added security considerations and troubleshooting sections

Created Icon128.png:

Added the missing icon file for the extension

All the core functionality is now implemented and should work as expected. The extension allows users to:

Highlight text on any webpage and get AI-powered explanations

Input text directly in the popup for quick explanations

Configure the API endpoint to connect to their backend

Check the API status to ensure connectivity

To use the extension:

Start the Go backend server

Load the extension in Chrome

Highlight text on any webpage and right-click to select "Explain with AI"

View the explanation in the popup

Is there anything specific you'd like me to explain or any other features you'd like to add to the extension?

Readme generated by Q developer:

A Chrome extension that allows users to highlight text on a webpage and get AI-powered explanations using AWS Bedrock.

Components

Chrome Extension: Frontend that allows users to highlight text and request explanations
Golang Backend: Server that processes requests and communicates with AWS Bedrock

Setup Instructions

Backend Setup

Ensure you have Go installed on your system
Set the required AWS environment variables:

   export AWS_ACCESS_KEY_ID=your_access_key
   export AWS_SECRET_ACCESS_KEY=your_secret_key
   export AWS_REGION=your_aws_region

Navigate to the backend directory
Run go mod tidy to install dependencies
Start the server with go run main.go

Chrome Extension Setup

Open Chrome and navigate to chrome://extensions/
Enable "Developer mode" (toggle in the top-right corner)
Click "Load unpacked" and select the extension directory
Configure the API endpoint in the extension settings

Usage

Highlight text on any webpage
Right-click and select "Explain with AI"
View the explanation in the popup window

Features

Highlight text on any webpage and get AI-powered explanations
Direct input in the extension popup for quick explanations
Configurable API endpoint for connecting to your backend
Draggable explanation popup on webpages
API status indicator to check backend connectivity
Responsive and user-friendly interface

Backend Deployment

Local Development

Run the backend locally for testing:

cd backend
go run main.go

Docker Deployment

Build and run using Docker:

cd backend
docker build -t browser-helper-backend .
docker run -p 8080:8080 -e AWS_ACCESS_KEY_ID=your_key -e AWS_SECRET_ACCESS_KEY=your_secret -e AWS_REGION=your_region browser-helper-backend

Cloud Deployment

The backend can be deployed to AWS EC2, ECS, or any other cloud provider that supports Docker containers.

Security Considerations

The extension communicates with your backend server, which should be secured with HTTPS in production
AWS credentials should be stored securely and never exposed in client-side code
Consider implementing authentication for the API in production environments
Review AWS IAM permissions to ensure least privilege access to Bedrock services

Troubleshooting

If the extension shows "API is offline", check that your backend server is running
Verify AWS credentials are correctly set in your environment
Check browser console for any JavaScript errors
Ensure the API endpoint in extension settings matches your backend server address

License

This project is licensed under the MIT License - see the LICENSE file for details.# explainmate

Another Space Invader game in Golang, WebAssembly

Attila Olbrich — Sun, 27 Apr 2025 14:50:34 +0000

Alibaba cloud game challenge

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.

First, The credits:

For images and sound, the credit goes to https://opengameart.org/, the open source game art community, I could not do it in time without them!

What I Built

You are stationed in a hidden facility on your home planet, controlling a robot remotely.
Your mission is to defend the planet against alien invaders descending from the skies and launching bombs.
Dodge the falling bombs and shoot down the enemies before they reach the surface.

The invasion intensifies over time — if you lose all your lives or the invaders manage to land, the game ends.

Demo

Please note that the game is designed to work on a computer; mobile devices are not supported, and some old machines may not work due to a lack of Opengl support.

https://gamechallange.attilaolbrich.co.uk/invader/index.html

Screenshots

Alibaba Cloud Services Implementation

My game is written entirely in Golang and compiled to WebAssembly (WASM) to run directly in the browser. Since I work with Golang professionally on backend systems, I thought—why not build a game with it too? To support the gameplay, I wrote a lightweight Golang-based API that handles storing and retrieving scores, including listing the top 10 leaderboard entries.

Planned Architecture Using Alibaba Cloud Services
Initially, the infrastructure I planned for the game made use of the following Alibaba Cloud services:

Object Storage Service (OSS)
Used to host static assets such as the HTML, WASM, JavaScript, and image files.
Why OSS? OSS offers a scalable, high-performance storage option and can easily integrate with a CDN for faster delivery worldwide.
Integration Experience: The setup wasn’t as seamless as expected. OSS forces static files like HTML to be downloaded instead of rendered in the browser unless a custom domain is configured with HTTPS, which wasn’t obvious during setup. I had to dig through documentation to understand this behavior.
Challenge: I didn’t want to register a custom domain just for HTTPS, so this created friction during deployment.
CDN + OSS
I had planned to serve images via the Alibaba Cloud CDN connected to OSS.
Benefit: Faster asset delivery with minimal latency.
Challenge: Due to the OSS hosting limitation mentioned above, I didn’t proceed with the CDN as originally planned.
Function Compute (FC)
The Golang API was designed to run as a Serverless Function Compute.
Why Function Compute? It was a good fit for the small, stateless HTTP endpoints of the score API. Serverless meant simplified scaling and reduced maintenance overhead.
Challenge: I encountered limitations with the free tier or trial—either I didn’t receive the trial credit or it was extremely restricted. Cost estimates showed that using FC + managed services would exceed hundreds of dollars/month, which is not feasible for a personal, non-commercial game. This issue was echoed by several developers in Alibaba Cloud’s discussion forums.
ApsaraDB for PostgreSQL
Intended for storing game scores in a managed relational database.
Why ApsaraDB? It offered managed backups, security, and scalability, aligning with my professional stack.
Challenge: Same as above—cost and trial limitations made it impractical to use for a personal project.
Elastic Compute Service (ECS)
As a backup plan, I experimented with ECS to run everything in a containerized setup.
Challenge: Strangely, the ECS instance I tested performed significantly slower compared to equivalent instances on another cloud provider—around 20x slower. I couldn’t identify the cause, but it made testing very sluggish and affected the user experience.

Final Setup Due to Cost Constraints Due to the challenges around cost and configuration, I settled on a minimal paid setup using:

Alibaba Cloud ECS* (Elastic Compute Service) – $11/month for the smallest instance

Hosting the entire stack:

WebAssembly game (HTML, JS, WASM, images)
Golang HTTP API
PostgreSQL database (all in a single Docker container)

This allowed me to maintain full control over hosting while staying within budget. It also made HTTPS straightforward to configure with a reverse proxy.

Game Development Highlights

Interesting Aspects of Development

I decided to move forward with this game at the last minute after the deadline was extended, so the time pressure is definitely reflected in the code — which is publicly available here: https://github.com/olbrichattila/goinvader.
I had previously experimented with Golang and WebAssembly, so I already had the basics in place — sprite management, sound handling, and keyboard navigation were ready to go. For this project, I mainly needed to focus on implementing the gameplay itself.

Putting everything together into a complete, playable game in a short amount of time was definitely a challenge. Although the code was assembled rather quickly under time pressure — and could definitely benefit from some cleanup and polish — I'm proud that I managed to complete and submit it by the last day of the competition. Despite the rush, seeing it all come together into a working game is something I’m genuinely proud of.

Test your memory, a simple game!

Attila Olbrich — Sat, 26 Apr 2025 16:15:58 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

Here's another game I've made, and it's a simpler one.

This is a classic memory game where a robot shuffles your cards. Each card features the name of an Alibaba Cloud service, such as

ECS,
Function Compute
OSS
EBS
CDN
ApsaraDB

Your goal is to find matching pairs by clicking to flip the cards.
Cards will automatically flip back after one second. If you flip more than two cards within that second — even if you found a matching pair
— the move is considered invalid. When you successfully match two cards, they will remain face-up and become unclickable. Once you match all the pairs, your completion time will be recorded, and you can enter your name to appear on the top score board. The faster your time, the higher your ranking.

Enjoy!

Screenshots

Demo

https://gamechallange.attilaolbrich.co.uk/

Source code:

https://github.com/olbrichattila/alimemo

Alibaba Cloud Services Implementation

After registering to Alibaba Cloud using the provided link, I unfortunately did not receive the free trial credit, even though this was my first time trying Alibaba Cloud. Despite this, I decided to purchase the necessary services myself, and, due to budget considerations, I opted for a simple and low-cost setup.

I chose Object Storage Service (OSS) to host the static assets of the game. I linked it to a subdomain of my personal website using a CNAME record. For SSL, I manually created a TXT record to verify and issue a certificate via Let's Encrypt.

The game itself is built with ReactJS, while a small Golang HTTP API provides the backend for storing and listing high scores. This backend is deployed on an Elastic Compute Service (ECS) virtual machine, along with a PostgreSQL database, all running inside Docker containers.

In fact, this is the same API I used for another game I submitted here a few days ago (the AliRobo Tunnel Golang WASM game), but with different tables for each game.

Game Development Highlights

This game started as a quick idea — I thought, why not create another one?
Since it’s a simple concept, there were no major hurdles. I built the game in ReactJS, and the whole process, including deployment, was completed in just a few hours.

Credit for images: generated with Bing Copilot AI.

AliRobo: The Go-Powered Game with Wasm

Attila Olbrich — Mon, 21 Apr 2025 20:47:53 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.

First, The credits:

For images credit goes to https://opengameart.org/, the open source game art community, I could not do it in time without them!

What I Built

In this game, you play as a shape-shifting ethical hacker robot on a mission assigned by your boss. Your objective is to use social engineering tactics to infiltrate eight different server rooms located in a secret underground facility.

Navigate the maze of tunnels and ladders using the arrow keys. Your first goal is to locate all the office rooms.
If an office has an employee moving around, you must first shape-shift into a human form by pressing the S key. Be aware that if you move afterward, you will revert to your original robot form. Wait for the employee to come close, then press the Shift key to interact. This represents a social engineering attempt where you claim to be an engineer who forgot their access badge. If successful, you’ll receive a new badge, and a corresponding server room icon will appear, indicating the type of server room the badge grants access to.

Some offices won’t have employees but will contain a computer on a desk. Approach the computer and press the Space bar to collect a password. This simulates the ethical hacker discovering an unattended, unlocked machine and retrieving credentials from it.
Once you’ve collected all the badges, they will begin to flash, signaling that you are now ready to locate and access the server rooms on levels -5 and -6.

Each server room requires the correct badge to enter. The type of server room is indicated by an icon displayed near the door, representing different Alibaba services. You must recognize the correct icon and use the corresponding badge. You have three attempts per room—after that, you’ll lose a life.
Successfully entering a server room allows you to continue to the next one.

After infiltrating all server rooms, return to the starting room, where your boss is waiting. If all server rooms have been accessed, your mission is complete. This final step symbolizes reporting your findings to your boss so they can initiate appropriate security training.

If for the specific room available and you're inside a room and unsure what to do, press the H key to receive a hint—provided the room has special rules or tasks.

Demo

Please note that the game is designed to work on a computer; mobile devices are not supported, and some old machines may not work due to a lack of Opengl support.

https://fast.alirobo.fun

Screenshots

Alibaba Cloud Services Implementation

Planned Architecture Using Alibaba Cloud Services
Initially, the infrastructure I planned for the game made use of the following Alibaba Cloud services:

Object Storage Service (OSS)
Used to host static assets such as the HTML, WASM, JavaScript, and image files.
Why OSS? OSS offers a scalable, high-performance storage option and can easily integrate with a CDN for faster delivery worldwide.
Integration Experience: The setup wasn’t as seamless as expected. OSS forces static files like HTML to be downloaded instead of rendered in the browser unless a custom domain is configured with HTTPS, which wasn’t obvious during setup. I had to dig through documentation to understand this behavior.
Challenge: I didn’t want to register a custom domain just for HTTPS, so this created friction during deployment.
CDN + OSS
I had planned to serve images via the Alibaba Cloud CDN connected to OSS.
Benefit: Faster asset delivery with minimal latency.
Challenge: Due to the OSS hosting limitation mentioned above, I didn’t proceed with the CDN as originally planned.
Function Compute (FC)
The Golang API was designed to run as a Serverless Function Compute.
Why Function Compute? It was a good fit for the small, stateless HTTP endpoints of the score API. Serverless meant simplified scaling and reduced maintenance overhead.
Challenge: I encountered limitations with the free tier or trial—either I didn’t receive the trial credit or it was extremely restricted. Cost estimates showed that using FC + managed services would exceed hundreds of dollars/month, which is not feasible for a personal, non-commercial game. This issue was echoed by several developers in Alibaba Cloud’s discussion forums.
ApsaraDB for PostgreSQL
Intended for storing game scores in a managed relational database.
Why ApsaraDB? It offered managed backups, security, and scalability, aligning with my professional stack.
Challenge: Same as above—cost and trial limitations made it impractical to use for a personal project.
Elastic Compute Service (ECS)
As a backup plan, I experimented with ECS to run everything in a containerized setup.
Challenge: Strangely, the ECS instance I tested performed significantly slower compared to equivalent instances on another cloud provider—around 20x slower. I couldn’t identify the cause, but it made testing very sluggish and affected the user experience.

Final Setup Due to Cost Constraints Due to the challenges around cost and configuration, I settled on a minimal paid setup using:

Object Storage Service*
I linked it to a subdomain of my personal website using a CNAME record. For SSL, I manually created a TXT record to verify and issue a certificate via Let's Encrypt.
WebAssembly game (HTML, JS, WASM, images)

Alibaba Cloud ECS* (Elastic Compute Service) – $11/month for the smallest instance

Hosting the API

Golang HTTP API
PostgreSQL database (all in a single Docker container)

This allowed me to maintain full control over hosting while staying within budget. It also made HTTPS straightforward to configure with a reverse proxy.

Game Development Highlights

Interesting Aspects of Development
I decided to move forward with this game at the last minute after the deadline was extended, so the time pressure is definitely reflected in the code — which is publicly available here: https://github.com/olbrichattila/alirobo.

This was my first game written in Go, and it was a great opportunity to experiment with the Ebiten framework. Throughout development, I learned a lot about rendering, sprite handling, game loop logic, and behavioral interactions within a game context.

One unexpected challenge I ran into was compatibility issues with older Windows machines, particularly due to OpenGL limitations that Ebiten relies on. It was an eye-opener in terms of how graphics APIs can affect cross-platform support.

Despite the time crunch and hurdles, I'm proud of how much I was able to build in such a short time and how I pushed Go beyond backend development into the realm of browser-based gaming.