Forem: Justin Dominic S. Veloso

What If Exam Finals Were a Game? A Pinoy College-Themed Endless Arcade Made with Amazon Q and Pygame-CE

Justin Dominic S. Veloso — Tue, 17 Jun 2025 00:07:26 +0000

As a student developer who is exploring AWS technologies, I recently came across Amazon Q and its current event. The event encouraged participants to build a game, and that instantly hit a nostalgic chord in me. A few years ago, I've created a simple game in Unity without knowing how to code. Now, equipped with two years of coding experience and the help of Amazon Q, I managed to recreate that idea as a full parody arcade game using pygame-ce in just one day!

Although AI tools are not new to me and to everybody, it still amazes me how much faster development becomes with the use of it. So in this short post, I’ll be sharing a quick look at how Amazon Q helped me bring this fun small project to life. The game is called the "The Last Bluebook".

Github Repository: https://github.com/ThatDott/The-Last-Bluebook

The Game Concept

The Last Bluebook is an arcade-style projectile-avoiding game where you play as the final bluebook (exam book) during the final exam of the last semester. Inspired by the real academic pressure in Philippine universities, the game pokes fun at our collective fear of the singko or 5.00 (failing grade). You collect checkmarks representing correct answers while dodging flying numeric grades, starting from 5.00 all the way to 1.00 (highest grade).

Honestly, this was just a fun random idea that I thought of. Nothing serious, just a cutesy parody of Filipino college experience during the finals. The mechanics of the game is similar to the game I made before, but with a better and a relatable concept, meme sound effects, and better gameplay.

Thanks to Amazon Q and pygame-ce, I was able to rebuild the game from scratch in just one day. The idea was goofy, but AI made it real—and fast, which shows how easy ideas become reality with these technology.

Effective Prompting Techniques I Discovered

Be Specific About Implementation Details

Prompt:

"I want the multiplier to change color per level. Purple for highest, white for lowest."

✅ Result: Amazon Q generated a full system for visual feedback based on multiplier values.

Provide Clear Visual/Functional Requirements

Prompt:

"I want the projectiles to be numeric grades that evolve with difficulty (from 5.00 to 1.00)."

✅ Result: Amazon Q handled sprite asset switching logic, making implementation smooth and bug-free; leaving me a template wherein I can easily just import my assets.

Request Incremental Changes

Prompt:

"Add background music and loop it."

"Now add two game over sound effects: one for passing, one for failing."

✅ Benefit: Helped build features layer by layer. This retains code context, reducing more bugs and confusion.

Refine and Simplify When Needed

Prompt:

"Undo the multiple game over sounds; just have two types based on pass/fail."

✅ Benefit: Fast iteration when something felt too bloated.

How AI Handled Classic Programming Challenges

Resource Management
Amazon Q helped build a reliable system for loading images and sounds with fallback behavior if assets were missing.

State Management
It organized game states like the start screen, gameplay, and game over screen using simple flags and clear conditions. This made transitions smooth and easy to control.

Collision Detection
It helped me implement sprite collision logic using bounding boxes, which made both the collectibles (checkmarks) and hazards (grades) work exactly as they should.

Difficulty Scaling
The game gets harder every 5 points scored, and Amazon Q helped create a dynamic system that reasonably increased projectile rate that keeps the game hard but still enjoyable.

Examples of Development Automation That Saved Me Time

Audio System Setup
I asked for background music with a mute toggle, and Amazon Q gave me the full implementation, including a looping playback using pygame-ce.

Sprite Variants & Grade System
I prompted that different projectile should have different sprites based on difficulty, and it automatically mapped each grade (5.00 to 1.00) to a respective sprite. All I had to do is match the asset names.

Multiplier System
I wanted a score multiplier that changed color based on level, and Q generated a complete UI system with color feedback, score tracking, and timer-based reset. I also followed up a prompt to add a pop-up effect for each collected score, and it implemented it the way I wanted it to be.

Game-Over Logic
I asked Q to revert my initial complex changes and just use two different sounds and messages based on whether the player passed or failed, and the AI handled the whole logic and conditionals perfectly.

Code Examples of Interesting AI-Generated Solutions

Dynamic Grade Sprite Selection

def get_projectile_image_for_level(level):
    grade = GRADE_SEQUENCE[min(level, len(GRADE_SEQUENCE) - 1)]
    return load_image(f"{grade}.png")

This function matches the right sprite depending on the difficulty level (e.g. 5.00, 3.00, 1.00).

Randomized Projectile Angle

angle_deviation = math.radians(random.uniform(-max_angle_deviation, max_angle_deviation))
final_angle = base_angle + angle_deviation
self.dx = math.cos(final_angle) * projectile_speed
self.dy = math.sin(final_angle) * projectile_speed

This gives projectiles a bit of unpredictability, so dodging them becomes more engaging over time.

Smart Point Placement to Avoid Spawning at Center

def generate_point_position():
    """Generate a random position for the point object away from the center"""
    while True:
        x = random.randint(point_size, SCREEN_WIDTH - point_size)
        y = random.randint(point_size + 30, SCREEN_HEIGHT - point_size)

        # Check distance from center
        dx = x - CENTER_X
        dy = y - CENTER_Y
        distance = math.sqrt(dx*dx + dy*dy)

        if distance >= min_distance_from_center:
            return [x, y]

This function ensures that new collectible points spawn randomly, but not too close to the center, where projectiles often originate. This small detail keeps gameplay fair and engaging.

Screenshots of Gameplay

Starting Screen

Gameplay at 3.00 Grade

Gameplay at 1.50 Grade

Gameover at 5.00 Grade

And that sums up my short journey! Honestly, I never thought I’d actually recreate this game. But with Amazon Q and a bit of free time, I pulled it off in a day. Super fun experience to explore game development with py-game too! Hope this game gets to Filipino College students. Unta relatable siya sainyo! HAHAHAHA

Download Link Here:
https://github.com/ThatDott/The-Last-Bluebook/releases/tag/v1.1

Get Started with NoSQL: AWS DynamoDB Fundamentals

Justin Dominic S. Veloso — Mon, 04 Nov 2024 15:51:14 +0000

Behind the scenes of most modern applications is a vital component that brings websites and apps to life, the database. Databases are in charge of storing all the different data and information that a web application uses. It is relied upon to store, retrieve, update, and query data for various purposes.

In the programming world, one of the most important types of database is a non-relational database, often known as NoSQL databases. These are typically used to store flexible, dynamic data that needs quick access. It is a very useful tool for web applications that require fast and flexible data exchange between the web server and the database.

But here's the problem: dealing with databases is frequently regarded as one of the most difficult aspects of development. In fact, it is an established joke in the programming community that the backend side of development, where database maintenance occurs, is so much more difficult than the, often more visually satisfying, frontend.

So then, this is where Amazon Web Services (AWS) comes in. Allowing us to worry no more, introducing their serverless, NoSQL, fully managed database: AWS DynamoDB.

What is AWS DynamoDB

DynamoDB is a scalable NoSQL database service that is completely managed and programmed for fast and consistent performance, with response times measured in single-digit milliseconds. Since its creation in 2012, it has been an excellent match for modern serverless apps, catering to businesses of all sizes. DynamoDB effectively handles large workloads, handling over a billion queries per hour and accommodating table sizes more than 200 TB, all while providing continuous availability and resiliency.

Why use AWS DynamoDB?

High Availability and Resilience with Global Tables: DynamoDB offers global tables that enable multi-active data replication across selected AWS Regions, ensuring 99.999% availability. This feature allows applications to access data locally, maintaining high performance in data delivery. This also avoids the probability of server downfalls due to its multiple tables around regions.
Service Integrations: DynamoDB seamlessly integrates with various AWS services, facilitating the development of serverless applications. It integrates with AWS Lambda to automatically respond to events, Amazon S3 for simple data import and export, and Amazon Redshift for easy analytics without needing to move the data around. Having this feature provides your application easy access to other AWS technologies to assist you in development.

When to use AWS DynamoDB?

Need fast and reliable access to data for real-time applications, like finance or gaming.
Want to reduce management tasks with automatic scaling and easy setup.
Require low-latency access to data from different locations around the world.
Need to handle changing amounts of traffic smoothly, like during busy gaming sessions or streaming events.
Want strong data safety with features that ensure everything stays consistent and reliable.
Need a system that grows easily as your data and user demands increase

Intro to AWS DynamoDB (via CLI)

Prerequisites

Step 1. Make sure to install AWS CLI
Install AWS CLI

Step 2. Configure your IAM credentials in AWS CLI
Configure AWS CLI

Creating a Table

The first action that you would do is to create a table. So, assuming we want to store data about video games. You would create a Games table in DynamoDB with the following details:

Partition key — Developer
Sort key — GameTitle

(Windows CMD):

aws dynamodb create-table ^
    --table-name Games ^
    --attribute-definitions ^
        AttributeName=Developer,AttributeType=S ^
        AttributeName=GameTitle,AttributeType=S ^
    --key-schema ^
        AttributeName=Developer,KeyType=HASH ^
        AttributeName=GameTitle,KeyType=RANGE ^
    --provisioned-throughput ^
        ReadCapacityUnits=5,WriteCapacityUnits=5 ^
    --table-class STANDARD

Output:

Writing Data

After creating a table, you can then also insert several items into the Games table that you created.

(Windows CMD):

aws dynamodb put-item ^
    --table-name Games ^
    --item ^
        "{\"Developer\": {\"S\": \"Epic Games\"}, \"GameTitle\": {\"S\": \"Fortnite\"}, \"Genre\": {\"S\": \"Battle Royale\"}, \"Rating\": {\"N\": \"9\"}}"

aws dynamodb put-item ^
    --table-name Games ^
    --item ^
        "{\"Developer\": {\"S\": \"Rockstar Games\"}, \"GameTitle\": {\"S\": \"Grand Theft Auto V\"}, \"Genre\": {\"S\": \"Action-Adventure\"}, \"Rating\": {\"N\": \"10\"}}"

aws dynamodb put-item ^
    --table-name Games ^
    --item ^
        "{\"Developer\": {\"S\": \"Valve\"}, \"GameTitle\": {\"S\": \"Half-Life 2\"}, \"Genre\": {\"S\": \"First-Person Shooter\"}, \"Rating\": {\"N\": \"9\"}}"

aws dynamodb put-item ^
    --table-name Games ^
    --item ^
        "{\"Developer\": {\"S\": \"Naughty Dog\"}, \"GameTitle\": {\"S\": \"The Last of Us\"}, \"Genre\": {\"S\": \"Action-Adventure\"}, \"Rating\": {\"N\": \"10\"}}"

Reading Data

If you'd like to retrieve data about the data you wrote, you can also read the items that you created in the table.

--consistent-read refers to the latest changes of your table

(Windows CMD):

aws dynamodb get-item --consistent-read ^
    --table-name Games ^
    --key "{\"Developer\": {\"S\": \"Valve\"}, \"GameTitle\": {\"S\": \"Half-Life 2\"}}"

Output:

Updating Data

And of course! If you can write and read, you can also update existing data!

(Windows CMD):

aws dynamodb update-item ^
    --table-name Games ^
    --key "{\"Developer\": {\"S\": \"Valve\"}, \"GameTitle\": {\"S\": \"Half-Life 2\"}}" ^
    --update-expression "SET Genre = :newval" ^
    --expression-attribute-values "{\":newval\":{\"S\":\"First-Person Shooter, Puzzle\"}}" ^
    --return-values ALL_NEW

Output:

Query Data

With your existing table Games, you can query the data that you wrote by specifying Developer. This will display all games that are associated with the partition key: Developer.

(Windows CMD):

aws dynamodb query ^
    --table-name Games ^
    --key-condition-expression "Developer = :name" ^
    --expression-attribute-values "{\":name\":{\"S\":\"Naughty Dog\"}}"

Output:

Deleting a Table

Lastly, this step helps ensure that you aren't charged for resources that you aren't using by deleting the table you created.

(Windows CMD):

aws dynamodb delete-table --table-name Games

Output:

Conclusion

In this short article, you have learned the fundamentals of AWS DynamoDB, specifically on creating a table, inserting and updating data, all the while using the command-line interface to perform such actions. DynamoDB is a good choice for developers trying to produce quick, dependable, and serverless apps. It is because of its high availability, scalability, and seamless connection with other AWS services. You are now ready to implement NoSQL on your applications. You may learn more about AWS DynamoDB in their official documentation below:

https://docs.aws.amazon.com/dynamodb/?icmpid=docs_homepage_featuredsvcs

Improving User Experience: The Role of Lazy Loading in Web Development using ReactJs

Justin Dominic S. Veloso — Mon, 19 Feb 2024 13:25:55 +0000

This article was co-authored by @teocutie0213

Overview

In today's continuously evolving digital era, where online visibility has become synonymous with success, the performance of a website plays a significant impact on influencing user experiences. The internet has evolved into a dynamic environment in which users expect smooth and quick interactions. In such a setting, web performance can be a very essential key in constructing a successful website.

Web performance refers to how quickly and efficiently a website or web application loads and responds to user interactions. It includes several factors such as page load times, responsiveness, and general efficiency in providing material to visitors. In today's digital environment filled with fast-paced transactions, users have increasingly high expectations about the speed and smoothness of their online interactions.

At the core of effective web design is User Experience (UX), wherein web performance stands out as a critical component. Users, consciously or unconsciously, criticize a website based on how quickly it responds. A slow and complicated website can cause dissatisfaction, a poor user experience, ultimately leading to shorter and lesser page visits.

Following that, web performance is fundamentally linked to user satisfaction in the digital space. As customers want quick services and seamless experiences, designers and developers must prioritize the optimization of the performance of their websites. In the following section, we will look deeper into a specific technique, known as lazy loading, that helps to improve web performance, and as a result, a better overall user experience.

What is Lazy Loading?

Lazy loading, also called on-demand loading, is a technique used in web development to improve web performance by delaying the loading of unnecessary content until when it is actually required. This method enables websites to prioritize the loading of key elements, such as images, scripts, or other resources, that users see instantly when they arrive on a page.

Meanwhile, in the traditional method, page elements are loaded all at once, which can result in lengthier loading times; where its drop in loading speed is caused by the loaded content that is not immediately required. On the other hand, lazy loading selectively loads material according to the user’s perspective and interactions, reducing the initial page load time and offering a faster and more responsive user interface.

The following are the benefits or advantages of adapting Lazy loading in websites:

Faster Initial Page Load - By loading only the necessary material in the beginning, websites may greatly decrease the amount of data transferred over the network, resulting in faster page loading times.
Improved Resource Management - Lazy loading minimizes the use of system resources, and avoids using unnecessary memory and rendering power.
Enhanced User Engagement - Visitors can begin interacting with the accessible material sooner, without being slowed by lengthy loading times. This can improve user satisfaction and encourage longer engagement periods.
Optimized Performance for Graphic-Heavy Websites - From a user experience perspective, a smoother experience can be achieved, particularly for pages with a lot of images and videos as content.

Implementing Lazy Loading using ReactJs

Native Lazy Loading: Use the loading="lazy" attribute on your img tags to enable native lazy loading in modern browsers

React Lazy and Suspense: You can combine React.lazy() and React.Suspense to dynamically load components only when they are needed, while also providing a fallback UI during the loading process.

Error Boundaries: Use error boundaries to handle any errors that occur when lazy-loaded components fail to load

Route-based Lazy Loading: Use dynamic imports with React Router to lazily load route components

Best Practices and Tips

General best practices for implementing lazy loading effectively

Prioritize Content: Identify and prioritize the critical content that needs to be loaded initially to ensure a smooth user experience. Lazy load non-essential information to minimize initial loading times.
Optimize Images: Optimize images for the web to reduce file sizes without compromising quality. Consider using responsive image techniques and formats like WebP to further enhance performance.
Chunking and Code Splitting: Implement code splitting techniques to break down your codebase into smaller, manageable chunks. This allows for more efficient lazy loading of components and resources, reducing the initial payload size.
Set Loading Priorities: Determine the loading priorities for different resources based on user interactions and page structure. Load critical resources first and progressively load less important content as the user engages with the page.
Fallback Mechanisms: Implement fallback mechanisms, such as placeholders or loading spinners, to provide users with visual feedback while lazy-loaded content is being fetched. This helps manage user expectations and improves perceived performance.

Common pitfalls to avoid

Over-Lazy Loading: Avoid excessive lazy loading, as it can lead to unnecessary delays in content delivery and degrade the user experience. Strike a balance between lazy loading and loading critical resources upfront for optimal performance.
Ignoring SEO Impact: Consider the SEO implications of lazy loading, especially for content that contributes to search engine rankings. Ensure that lazy-loaded content is accessible to search engine crawlers and properly indexed for improved visibility.
Incomplete Fallbacks: Ensure that fallback mechanisms are implemented effectively to handle cases where lazy-loaded content fails to load or encounters errors. Provide informative error messages and graceful degradation to mitigate user frustration.
Lack of Monitoring and Optimization: Continuously monitor and optimize lazy loading performance based on real user data and feedback. Regularly review and refine lazy loading strategies to address evolving user needs and technological advancements.

Conclusion

Lazy Loading is an effective strategy for speeding up and improving website performance. It's all about having web pages load and respond to user input more swiftly. Lazy Loading makes your website more efficient, providing a better experience for your web users. Today's digital world is full of fancy websites with interesting designs and animations. However, making these sites run smoothly can be difficult. This is where Lazy Loading comes in useful. It is becoming increasingly significant since it allows websites to keep up with designers' creative ideas.

Lazy Loading is a behind-the-scenes assistance, ensuring that content loads quickly, providing users with a seamless experience when exploring your website. It's more than simply a great idea; it should become a regular practice for web developers, and that aspiring designers should also look into it to improve and make their websites more accessible to everybody.

*Sources: *
https://www.geeksforgeeks.org/what-is-lazy-loading/
https://ijcrt.org/papers/IJCRT2006238.pdf