Christmas Catch: Architecting a Web Game with AI Orchestration

The Experiment: AI Orchestration in Frontend Development

As a Test Automation Architect, my day-to-day involves ensuring the structural integrity of enterprise applications. However, to effectively test modern software, you must deeply understand how it is built.

The "Christmas Catch" project was born as a rapid prototyping experiment in my Innovation Lab. My goal was to explore the boundaries of AI-assisted development—often referred to as "vibe coding"—by orchestrating AI agents to bootstrap a modern web application from scratch.

The Architecture & Tech Stack

Rather than relying on basic vanilla JavaScript, I enforced a strict, modern frontend stack. This ensured the generated codebase was scalable, type-safe, and maintainable:

• Core Engine: React + Vite for lightning-fast Hot Module Replacement (HMR) and optimized build times.
• Language: Strict TypeScript to enforce data structures and eliminate runtime errors during the rapid AI generation phases.
• Styling: Tailwind CSS for rapid, utility-first UI design.
• AI Engine: Gemini 3 Pro, orchestrated via the Antigravity agent, to generate the game logic, physics, and state management.

The "Vibe Coding" Process

The most fascinating aspect of this project was acting as the Architect rather than the sole typist. Instead of writing every line of collision detection logic, I focused on prompt engineering, architectural constraints, and code review.

By defining the exact state requirements and TypeScript interfaces upfront, I was able to guide the Antigravity agent to generate robust React components. When the AI hallucinated or produced inefficient rendering cycles, my engineering background allowed me to step in, debug the React hooks, and refactor the code for optimal performance.

The Architect's Touch: CI/CD Integration

A project isn't truly finished until it's automated. Even for a fun, experimental game, I applied enterprise-grade delivery pipelines.

I implemented a fully automated GitHub Actions workflow. Every push to the main branch automatically triggers dependency installation, a strict TypeScript compilation check, and a production build via Vite. If the build passes, the pipeline automatically deploys the latest version to the live environment.

Conclusion

This experiment proved that AI tools like Gemini 3 Pro are incredibly powerful when guided by a solid engineering foundation. AI doesn't replace the need for an Architect; it elevates the Architect to orchestrate more complex systems at an unprecedented speed.