Fancy Phoenix at the Bridgerton Ball
This post is the 6th entry in The Elixir Year Series.
Vibes Burst Forth
For the past 5 months, I've been writing elixir by hand, "artisanally" as kids say these days. Elixir is my first venture into functional programming so I insisted on keeping LLMs out of my editor, lest I brainrot. But then vibecoding became a thing and FOMO set in.
Since Phoenix LiveView was the next stop on my syllabus, I decided to vibecode my first app to see how far prompting alone can get you with elixir. Thankfully, the perfect starter project landed in my lap at just the right time.
The Windsor Regency Ball
My best friend Joe owns an entertainment company and was preparing to host a Bridgerton-style Ball at the end of June. Horse carriages and all. During one of our weekly game nights, he suggested I try building a multi-room occupancy tracker for use at large events like his. Instead of using hand counters and radios, he was looking for a way to keep his staff on the same page, while also collecting attendance analytics (room popularity, arrival time, migration patterns).
Seems simple enough, and I was pretty sure most LLMs can one-shot this in a few minutes, so we added a couple extra features from his wishlist to spice things up:
- Admin/Staff roles for access control
- Presence & data freshness indicators
- DB persistence for CSV exports
- QR codes
- Dark mode
With the right idea in mind, it was time to sharpen the tools.
Mise en place
In the spirit of "measure twice, cut once", the first step was to create a technical spec using the greenfield prompt from this magnificent codegen guide:
Ask me one question at a time so we can develop a thorough, step-by-step spec for this idea. Each question should build on my previous answers, and our end goal is to have a detailed specification I can hand off to a developer. Let’s do this iteratively and dig into every relevant detail. Remember, only one question at a time.
Here’s the idea: ...
For local development, I used Zed as my editor & agent, powered by Claude 4 Sonnet, with the Tidewave MCP server for access to the Phoenix runtime, database, documentation, and more.
The final ingredient was to add custom rules for steering the agent toward good behavior & practices. As luck would have it, Zach Daniel, creator of the Ash Framework, shared the exact rules & workflow he uses while working with LLMs on the very day I was searching. If you're writing Elixir with LLMs, it's really worth your time.
With everything in place, I put my head down and got to work.
Presenting, "Headcount"!
Access it here! It's currently running for free on fly.io so if there's startup lag, it's because you're the only user. Lucky you.
After a couple days of development, the feature list was completed, the app was delivered (via fly.io's Toronto region for low latency), and Joe used it at the Ball! It'd be really cool to see it used at a tech conference (ElixirConf?) as well, one can dream no?
Although the goals were met and the project was delivered, some things are too good to be true.
First Hit Is Free
Things started off wonderfully as features came to life, one after another, and by the end of the first day I had a working prototype. The rush of dopamine was intoxicating.
Unfortunately, it didn't last long.
I soon hit major roadblocks that I couldn't power through. Things started going sideways when I tried to implement Dark Mode, mobile/iOS specific tweaks, or do nearly anything beyond the backend. This makes sense in hindsight; my 14 years of work experience have almost exclusively been focused on backend engineering. I felt that skill gap viscerally here.
Joe ended up saving the day. On top of being a serial entrepreneur, he's also a whiz at frontend work. He saw the CSS soup Claude created and was able to reign things in. He cleaned up a bunch of Tailwind bloat and fixed the responsive layouts. If the app looks & feels good to use, thank Joe.
Turns out prompting alone only gets you as far as your weakest domain.
I do believe there's some value in vibecoding, mostly if you're looking to explore the adjacent possible of new ideas in a hurry. There's nothing innovative about a headcount app so the tradeoffs to code quality aren't worth it, but for research, it's the right way to go.
Back to the Books
Now that the project is done, I'm very eager to learn how it's all supposed to work in great detail. I'm halfway through Programming Phoenix Liveview and loving it. Having Headcount as an example to compare & contrast with the book is great, concepts are clicking into place quicker now that I recognize certain patterns.
July is devoted to artisanal code crafting once more; my Zed Agent is officially in Ask mode.