DEV Community: Maxwell Dave Gazo

Glitch Runner: A Platformer Game with Dynamic Glitch Mechanics Made with Amazon Q CLI

Maxwell Dave Gazo — Fri, 20 Jun 2025 11:39:56 +0000

⚠️ Disclaimer: This project was developed using a prompt-driven, vibe-coding approach via Amazon Q CLI. This approach is not recommended for production-grade systems without thorough understanding of the underlying code generated by your prompts. All generated output should be reviewed, tested, and validated for correctness and security.

Try Glitch Runner now:
https://github.com/maksdeb-g/Glitch-Runner

The Idea Behind Glitch Runner

Glitch Runner is a 2D platformer game created using Python, Pygame and Amazon Q CLI. I decided to use this idea because the concept of controlled chaos might give another twist to traditional platformer games. In Glitch Runner, the "glitches" are random and require the player to adjust to a new situation every few seconds.

Every effect changes the difficulty the game plays and can turn the precision platforming into a creative way of parkouring through the glitches. It seemed to be the ideal setting that would test the abilities of Amazon Q to manage both game-logic and rich visuals.

Prompting Techniques

I started with prompting the description of the game, giving the Q the concepts and the mechanics that I wanted.

I'm building a 2D platformer called Glitch Runner where the core mechanic is random real-time glitches affecting gameplay.

Break Features into Smaller Tasks

I asked Q to create features one-by-one to increase its efficiency in creating the logic behind those features.

Help me implement reversed gravity in my player class.

I want you to implement a glitch that shakes the user screen and also the platforms

Iteration with Feedback

Once the features where working, I asked Q to improve them and provided my insights on what to improve.

The pixelation glitch feels like nothing has changed. Can you increase the distortion so it's more noticeable?

The background is too visually distracting. Can you make it simpler while keeping the difficulty intact?

Debugging using Problem-Solution Format

When I'm trying Q to fix a bug, I first laid out what was wrong and what I am expecting to be the result.

During reversed gravity glitch, the character floats out of the screen and doesn’t return. Can you fix that by putting screen boundaries?

How Amazon Q Handled Classic Programming Challenges

Amazon Q did a great job in developing this whole game by doing all these tasks:

Modularity: Q helped in breaking down the play classes, game loops, and glitch engines into reusable modules.
Input Handling: The glitches comes with altered inputs for the users, Q did a great job in syncing the supposed inputs with their respective glitches.

Prompts That Saved Time

Basically, Amazon Q saved me from creating a project too long. However, there were notable prompts there that were more complicated than the other logics.

Sprite Animation States: laid out expected animation folders for idle, run, jump, fall, and wall slide, saving me the trouble of guessing file structure.
Audio and event wiring: With a single prompt, Q hooked up sound effects to player death, win conditions, and glitch events.

But the most surprising automation came when I tested PyInstaller and accidentally built an old version of the game. I asked Q to run the updated version directly and it executed the script from my directory like a local assistant. This deeply integrated behavior highlighted how Q goes beyond code generation to support full project workflows.

Examples of Smart AI-Generated Solutions

Screen Shake Glitch

def screen_shake(self, activate):
   if activate:
     self.shake_amount = random.randint(5, 15)
   else:
     self.shake_amount = 0
     self.screen_offset = (0, 0)

def update_screen_shake(self):
   if self.shake_amount > 0:
       self.screen_offset = (
         random.randint(-self.shake_amount, self.shake_amount),
         random.randint(-self.shake_amount, self.shake_amount)
    )

Gravity Reversal Glitch

def reversed_gravity(self, activate):
    if activate:        
       self.game.player.velocity_y = -self.game.player.velocity_y 
       self.game.player.gravity = -self.original_gravity           
       self.game.player.ceiling_enabled = True
   else:
        # Restore normal gravity
        self.game.player.velocity_y = -self.game.player.velocity_y  # Immediate direction change
       self.game.player.gravity = self.original_gravity
       self.game.player.ceiling_enabled = False

Final Gameplay and Screenshots

Conclusion

The development of Glitch Runner using Amazon Q was a great example of how the present-day AI can be directly beneficial to the entire process of game creation.

Q was also useful in the brainstorming of features, bug fixing, organization of my assets, and even running scripts. Even the design of the glitch system; features that thrive on randomness was shaped by the constraints of a prompt-driven development process, making its unpredictability a natural outcome of how the game was built.

This shows that our limited thoughts could, with the proper prompts, turn into a full-fledged game based on your imagination.

Less Code, More Flow: Streamline your Frontend Workflow with Shadcn/UI

Maxwell Dave Gazo — Thu, 24 Apr 2025 10:25:16 +0000

This article was co-authored by: @calyx_426 Charles Nigel Espiloy

Introduction

Every front-end developer knows how dreadful it is to recreate the same UI component across different projects. It might feel great creating a design for elements like buttons, forms, or header at first but it becomes tedious when we create the exact same thing for future projects.

Practically speaking, it's time consuming to rebuild the same line of code from a previous project, consuming a lot of resources that should be dedicated for functionality.

A short building time for a project development is crucial since it saves operation costs from prototyping, revisions, and user testing. This allows us to create different variations of our interface to cater a better end-user experience.

That’s why most, if not all, front-end developers use component libraries to achieve UI needs in consistency and coherency across various projects.

What are component libraries?

Component libraries are collections of already built, UI components like buttons, cards, and forms that follow a consistent design system.

These libraries help developers speed up their front-end development process by providing ready-to-use code components that are functionally robust across various projects.

The main aim of component libraries is to reduce code redundancy, standardize project development, and enforce scalability among different projects. It improves the developer workflow experience because of the following:

Time Saving Capability: As developers we’re faced with very tight deadlines and having tools to make our workflow efficient is vital while also not compromising the web experience of end-users.

Through component libraries we are able to cut time in component creation, giving more time to focus on the finer details of the website.

Less Repetition, More Motivation: Repetition, the enemy of frontend developers who hate recreating the same components manually. Repetitiveness tends to make devs become easily bored and out of focus when developing projects, making errors unconsciously in some components affecting the whole project - rebuilding code and thus wasting more resources and time.

Through the use of component libraries that’s centered around the end-user experience, we are able to produce a complete website while also being able to bring more functionality and focus on the technical aspects.

Guideline to Consistency: Component libraries act as style guides. It dictates the color palettes to use, size of text, and how UI elements behave or interact with each other. If we rewrite the components each time, we are bound to increase the likelihood of deviating from the style we want to achieve

The Problem with Traditional UI Libraries

Traditional Component libraries work by installing packages from NPMs (Node Package Managers), importing the components and using them in projects.

While it’s true that traditional UI Libraries such as Bootstrap or Material-UI provide components that are pre-built that allows users to develop their code quickly, it also has its compromises:

Performance Overhead: Unnecessary styles and scripts are often included in many traditional libraries, using more storage space and may slow down application performance.
Customization Limitation: The libraries mentioned above use a specific design system, focusing more on the ‘out-of-the-box’ components that are already consistent and have a complete feel rather than a base component that the developers can deeply modify. This often time results in developers to override styles or use workarounds to achieve a unique and specific look.
Lock-in Dependency: Completing a projecting using a traditional library enforces devs to stick with that library forever. The problem? When we try to switch to another framework that provides more functions and new features, it might be challenging to switch libraries since some components are heavily dependent on the traditional library’s framework.

Speed vs Customization

The table down below shows the tradeoffs between speed and customization of traditional UI libraries.

Basically, traditional libraries may speed up development of projects at first, but they become the bottleneck when scaling the projects since extensive modifications may be needed to create a complete, consistent, and coherent product.

Why Customizing NPM Packages Can Be a Hassle

Complex Web of Dependencies: Many NPM packages are built upon layers of dependencies, making it difficult for modifications without breaking functionality.
Risk of Version Clashes: Updating or modifying a package often triggers compatibility problems with other dependencies, creating unwanted complications.
Sparse Documentation: Some packages offer limited guidance for customization, leaving developers no choice but to delve into the source code to find the answers they need.
Rebuild Challenges: Customizing a package frequently requires rebuilding it, which can lead to unforeseen errors, adding more complexity to the process.

Why Shadcn/UI is a Game Changer

Components are not imported as NPM packages
Yes, you heard that right, they are not imported as NPM packages. The components are installed directly into our projects. This will provide you the source code of a component and it lives in your project, allowing you or the developer to have control over the blueprint and can tweak it in any way they want.
It uses Tailwind CSS
Tailwind CSS is a utility-first CSS framework that lets us style our JSX by using reusable class names directly to your line of code. It’s fast, consistent, and implementation of Mobile-First Approach in developing a component is easy, and Shadcn uses this framework as its default styling system.

Regular CSS:

Tailwind CSS:

Built for React/Next.js Projects Shadcn/UI is built for React and Next.js applications. Shadcn supports React Server Components which works effectively with Next.js App Router, making it a perfect addition to your modern tech stack. Shadcn’s components are written as .tsx files and come with TypeScript support making it easier to catch type errors and improves developer experience.

Benefits of Using Shadcn/UI

1.) Full Customization

Custom Components: Shadcn/UI allows developers to customize pre-built components to match their application's design system while avoiding excessive dependency.
Tailwind CSS Integration: With Tailwind CSS, developers can easily override default styles and create unique designs.
Flexibility: Developers may extend and adapt components for specific design requirements, leading to flexibility and control.
CSS Variables: Shadcn/UI provides a theming system using CSS variables to promote flexibility and allow for the easy switch between different themes.

2.) Consistent Design

Unified Design Language: By using pre-built components and styles alongside reusable components, Shadcn/UI automatically affords a consistent design language for the application.
Modular Consistency: Shadcn/UI modular design encourages consistent design, simplifying the maintenance of application-level consistency with large-scale applications.
Beautiful Defaults: Shadcn/UI provides good-looking defaults that work on their own design-wise and also form a coherent system with one another.

3.) Streamlined Workflow

Rapid Development: Shadcn/UI permits rapid development, thanks to the hundreds of prebuilt components and the utility-first nature of Tailwind CSS.
Efficient: Developers can quickly access pre-built components and styling, saving time and effort by not recreating them.
Collaborative Efficiency: Shadcn/UI supports collaboration between designers and developers in one UI kit, so everybody speaks the same language.
Streamlined Process: Shadcn/UI smoothens the design-to-code process and bridges the gap between design and development.
Built-In Accessibility: Shadcn/UI keeps accessibility in mind while providing out-of-the-box solutions to ensure that web apps are accessible to as many users as possible.

Getting Started with Shadcn/UI

To use Shadcn/UI in your React/Next.js project, we need to first run the initialize command of shadcn.

In this demonstration, we are going to use mainly Next.js examples.

Create a Next.js Project First, create a next.js project using these command:

npx create-next-app@latest shadcn-demo
cd shadcn-demo

Note: Make sure to choose Typescript

Initialize your Shadcn/UI Run shadcn init in your project terminal

npx shadcn@latest init

Adding Components Once the setup of your project is complete, you can start adding Shadcn/UI components by using this command:

Adding of one component:

npx shadcn@latest add button

This will only add the Button component and it will be placed inside the /app/components/ui directory by default.

Adding multiple components in one command:

npx shadcn@latest add button card input sheet

This one-liner command installs the Button, Card, Input, and Sheet components all at once in the same directory, then you're all set to start using Shadcn!

Building a Modal: Plain CSS vs Shadcn UI Workflow

In this comparison, we'll show the building of a simple modal dialog using these two approaches. This will help highlight their differences in development speed, and customization.

Modal Dialog Using Plain CSS

Modal Dialog using Shadcn/UI:

Below is a side-by-side look at their differences

It's true that making the modal dialog from scratch gives you full control of the CSS. However, it's also clear that Shadcn/UI significantly speeds up the process by providing ready-to-use components.

How to Customize a Shadcn/UI Component?

Open the component source code in your project.
It should be inside the components folder, here's the usual path to your component file /app/components/ui/button.tsx . We are going to use the button component as an example.
Customize its style
Since the code is not precompiled, you can directly modify a component's class names (tailwind css), props/variants, and even their behavior (eg. hover effects, animation).
Inside the code, locate this variant of the button

As you can see, the default style of the button has background-primary, text-primary, hover:bg-primary/50. We can style the button by modifying these tailwind styles that are already used by the button.

Another way to customize Shadcn components is modifying its tailwind class name when the button is already used, no need to touch the original source file. This is a great way to customize how a button looks in one place, without worrying about breaking or changing the rest of your UI.

Adding Custom Variants If you really want a new variant of a button, you can always add a new one inside the original source code. Props are a way of passing data configuration to a component. And a variant is a type of prop used to change the style of a component.

Let's start with opening the button.tsx again. Suppose you want to create a yellow button that has jumping animation on hover. Here's how you can create that variant.

The variant name is jumpy:

Conclusion

To sum up the article we can say how Shadcn/UI:

Installs directly into your project as simple, ready-to-use components-no more wrestling with external dependencies or heavy theming layers that comes with traditional libraries.

Uses Tailwind CSS by default, so you can leverage your existing utility‑first workflow and design tokens from day one.

Is built specifically for React and Next.js, offering first‑class support for TypeScript, server‑side rendering, and seamless integration with your favorite frameworks.

Shadcn/UI is an amazing tool that's more than another run of the mill UI library–it strikes a balance between flexibility and performance. By integrating headless components with stunning, customizable styles right out of the box, it allows developers to create classy interfaces without compromising control.

Whether you're rapidly prototyping or refining production-ready apps, Shadcn/UI streamlines your workflow and enables you to focus on what truly matters: building amazing end user experiences.

Thank you for reading! Happy Coding! 🚀

You can access the source codes of the examples here:

maksdeb-g / shadcndemo

This is a repository for our article about shadcn/ui

ShadCN Demo

This repository contains example code used in my article to demonstrate and compare building UI components from scratch versus using ShadCN UI.

It also shows how to customize ShadCN components and extend them with variants to fit real-world design needs.

🔍 What You'll Find Here

This repo showcases:

A comparison between handcrafted UI components and ShadCN components
How to customize ShadCN components with Tailwind CSS
How to add and manage variants using ShadCN's utility-based approach
Clean and responsive UI patterns using modern frontend tools

If you're following along with the article, this is the companion repo to reference the source code and explore how everything works under the hood.

🛠️ Tech Stack

Framework: Next.js
UI Components: ShadCN UI
Styling: Tailwind CSS
TypeScript for type safety

🚀 Getting Started

To run the examples locally:

# Clone the repo
git clone https://github.com/maksdeb-g/shadcndemo.git
# Navigate into the

…

View on GitHub

Deploying WordPress on AWS Lightsail: A Beginner's Guide to Cloud Hosting

Maxwell Dave Gazo — Mon, 11 Nov 2024 15:07:24 +0000

Let's be real, when we all started learning HTML and CSS for the first time, we all have once wondered on how to make our local repository available for public. On how do all these websites made their way to the internet. Well, worry not, because we will be tackling about how to host your first ever cloud hosted website using WordPress on AWS Lightsail.

What is AWS Lightsail?

AWS Lightsail is a cloud platform designed to simplify the deployment and management of web applications, making it an excellent choice for small businesses, developers, and hobbyists looking for a streamlined alternative to more complex AWS services. Here’s a list of what Lightsail has to offer:

Virtual Private Servers (VPS): Lightsail offers virtual servers that are simple to manage and store your apps in a safe, private setting. Users can choose from a variety of OS options, such as Windows and Linux, or immediately begin a VPS with pre-configured options (such WordPress or other CMS systems).

Containers: Developers can easily deploy containerized apps in Lightsail. Lightsail supports Docker containers which can be very helpful to developers who wants to deploy their app with isolated app environments.

Managed Databases: Lightsail enables users to set up MySQL and PostgreSQL databases. By simply allowing the databases to run independently from the server, it improves security and performance of the deployed app.

Content Delivery Network (CDN): Lightsail allows the users to distribute their app globally by using the AWS’ global content delivery network (CDN) and Amazon CloudFront.

Load Balancers: Lightsail’s load balancing feature provides high availability and resilience during traffic by distributing incoming traffic to several servers. This improves the dependability of expanding website with changing traffics.

SSD-Backed Block Storage: Lightsail also offers SSD-backed storage that is quicker and dependable that old conventional drives. Users can add more block storage that can allow apps to manage more files and data.

Static IP Addresses: Lightsail also give their customers a chance to set their static IP addresses. To make sure that the IP won’t change even if the instance is stopped and restarted.

Domain DNS Management: Users can also manage their domain names thanks to Lightsail’s simple DNS management. This integrates smoothly with apps hosted on Lightsail and makes DNS setup much easier without the need of using third-party DNS providers.

Low and Predictable Pricing: The total cost for all those services is all included in Lightsail’s predictable price structure. This makes it easier for starting developers in managing their budget for their instance.

Integrated Backup and Recovery: Automated snapshots and backup options help protect your data and enable quick recovery, adding to the reliability of your hosted application.

Why use Lightsail?

Easy Set-Up: Lightsail's simple user interface makes it easier for beginners to set up websites without the need of in-depth knowledge about AWS.

Optimized for Small Projects: The target market for Lightsail is for those who find other AWS services complex. Which is ideal for starting businesses, bloggers, and personal projects.

Scalability: Even if the developer decided to switch things up by making their project bigger, lightsail has the ability to upgrade the provided services.

Cost Effective: It is perfect for budget-conscious users because of its predictable pricing.

Let's Start Building!

Pre-requisites
Before we start the demo, here's what you'll need to get started:

AWS Account, if you don't have one head to aws website to sign up.
Basic Knowledge of SSH (Optional, but Recommended)

Step 1
Go to your aws console and navigate to Lightsail.

Step 2: Creating your Instance
On your Lightsail dashboard, locate and click create instance.

Step 3: Setting up your Instance
Set up your instance depending on which region you belong. But in order for you to follow the next steps, I recommend you set up yours the same as this demo:

Select Singapore or ap-southeast-1 as your region and Linux/Unix as instance image.

Then, select WordPress

Leave the SSH key as default. You can enable automatic snapshots when creating an instance. But for this demo, to avoid additional charges, do not enable (But this is highly recommended for those who plan to deploy personal projects in the future).

Then, select Dual-stack as network type and the smallest size Lightsail has to offer.

Finally, name your instance. For this demo you may use "MyFirstWeb-Wordpress" as the name.

Step 4: Set up your Static IP Address
Lightsail provides you a public IP address, however it is not static. We need to set up the static IP address for consistent addressing and improved remote access.

Go to your instance and click manage and navigate to networking.

In the networking page, you can see your public IP address that is not static. Below that is "Attach static IP", press that to make that IP address static then identify your static IP. You can use the recommended name.

Step 5: Accessing WordPress Admin
In order to customize your WordPress site, you need to access first the admin.

Navigate to your instance and click connect. This will automatically open terminal window in your browser. This terminal gives you command-line access to your server directly within the Lightsail console. From there, you can run commands, including those to retrieve your WordPress admin password and other configurations.

Then, use these commands
ls to look at the directory. There should be a file there named "bitnami_application_password" which contains the admin password for your WordPress site.

~$ ls

To access the file, use this command

~$ cat bitnami_application_password

You can now see your admin password in terminal.
This instance is now deleted so you can't use the password below

Copy the password by using the remote clipboard below and use it to log in. Type YourStaticIPAddress/admin to access user log in page.

User as username and paste your password below.

And Voilà! You now have your WordPress site on AWS Lightsail.
Disclaimer: After this demo, kindly delete your instance to avoid unexpected additional charges.

And there you have it! You’ve taken your first step into the world of cloud hosting, deploying a live website accessible to anyone online. With AWS Lightsail, you now have a scalable, secure, and cost-effective platform to build, test, and share your projects with the world. Whether you’re a hobbyist experimenting with ideas or a business owner looking to establish an online presence, Lightsail provides an easy-to-manage solution to bring your vision to life.

Happy hosting! And remember, this is only the beginning. There’s a whole world of cloud services out there to explore as you grow.