AI and the Architecture of The Green Room
When building The Green Room, a digital zine triggered by physical QR codes at live music venues, the physical environment dictated the architecture. Venues are notorious for hostile network conditions like concrete basement dead zones, overwhelmed public Wi-Fi, and sudden traffic spikes when an artist announces a drop from the stage.
The standard industry reflex is to reach for a heavy front end framework to ensure an “app-like” user experience. However, forcing users to download a massive JavaScript bundle just to read text and view a few pictures over a struggling cellular connection is a guaranteed failure. Instead, I opted to stay close to the metal. By relying on Web Platform fundamentals like modern CSS, fluid typography, and the View Transitions API, we can leverage the browser’s native capabilities to deliver a frictionless experience without the heavy overhead.
The Bookbinder Admin
When it came time to build the administrative dashboard, the “Bookbinder” where creators actually assemble these zines, I wanted to maintain that same ethos of simplicity. The app did not require complex multi-tenant architecture or sprawling user roles. Reaching for a heavy framework like Laravel felt like overkill, so I opted for Leaf. It provides just enough routing and authentication scaffolding without the bloat.
This is where the friction with the AI really started. I wanted to see if I could use AI to help me build something that does not use AI within it. But AI agents are practically hardwired to think in terms of monolithic legacy code or heavy JavaScript applications. Left to its own devices, the AI started generating complete HTML documents, <head>, footers, and all, for every single view, completely ignoring the fact that we were using Blade templates.
To fix this, I had to force the AI to adopt a component-driven mindset. I had to explicitly instruct it to think in “components” and provide concrete examples of how to properly leverage the templating system to break the UI into reusable chunks. Once I established this pattern, the AI caught on and executed it well, but it required constant oversight to prevent a relapse into its bloated defaults.
Splitting the Screen
On the client side of Bookbinder, the primary requirement was a split-screen workspace with a live, real-time preview of the zine. As creators add content blocks on the left, the mobile canvas on the right needs to update instantaneously.
I could have built this with vanilla JavaScript, but this is where context matters. The admin interface is used by creators in a reliable home or office setting, not by fans in a concrete basement dead zone. That context affords a different performance budget. I opted for Alpine.js, specifically Alpine.store, to handle the reactivity. It is lightweight, battle-tested, and handles the difficult parts of state syncing, providing a significantly better DX than rolling a custom vanilla solution.
Interestingly, while the AI initially struggled to grasp idiomatic PHP templating, it handled Alpine’s declarative directives and global stores beautifully. It knew exactly how to map the form inputs directly to the reactive preview without a hitch, freeing me up to focus on the actual app instead of building reactivity from scratch.
The Vibe Coding Assistant
Ultimately, this project reinforced a critical reality about the current state of web development. AI is an incredibly powerful typist, but it still desperately needs an architect’s oversight.
I was not using full agentic orchestration to build The Green Room. I was using the AI as a vibe coding assistant. I set the strict architectural boundaries, like Leaf PHP for routing, Blade components for modularity, and Alpine.js for lightweight reactivity, and let the model accelerate the execution. It turned what would have been a several-week build into a single-week project. But that speed only materialized because I understood the Web Platform fundamentals enough to force the AI to adhere to them, rather than letting it run wild with its bloated defaults. Frameworks and AI agents are great tools, but staying close to the metal is what actually allows you to bridge the gap between generated code and a performant, resilient application.