Building Crumby Web with AI

This site — the one you're reading right now — was built using AI-assisted development. Not as a gimmick, but as a deliberate experiment in how modern AI tools can accelerate Phoenix development without sacrificing code quality.

The Stack

Crumby Web runs on:

• Elixir 1.20 and Phoenix 1.8 with LiveView 1.2
• Tailwind CSS v4 for styling (CSS-based config, no tailwind.config.js)
• NimblePublisher for this blog (markdown files compiled at build time)
• Tidewave MCP for runtime AI access to the running app

AI Tools Used

Two AI tools powered the build:

Claude Code handled the multi-file scaffolding, test writing, and architectural decisions. Custom slash commands (/new-page, /test-fix, /blog-post) made repetitive tasks one-liners.

Cursor handled inline editing and quick completions while I was deep in a single file.

The combination works well — Claude Code orchestrates across files, Cursor edits within them.

The Landing Page

The interactive rock on the landing page was the most interesting challenge. It's an SVG ellipse with an feTurbulence filter for organic texture, draggable via a Phoenix LiveView JS hook using the Pointer Events API. The drag is purely client-side for zero-latency feel — only the dismiss/restore events hit the server.

def handle_event("dismiss_rock", _params, socket) do
  {:noreply, assign(socket, rock_dismissed: true)}
end

The circular menu underneath uses pure CSS positioning — no JavaScript for layout.

What Worked

• AGENTS.md (generated by phx.new) corrects common LLM mistakes with Phoenix code. Night and day difference.
• Slice-based development — each feature as a small, testable increment with clear "done when" conditions.
• AI for tests — having the AI write tests alongside implementation catches integration issues early.

What I'd Do Differently

• Start with design tokens before any page code. Visual consistency compounds.
• Set up Tidewave MCP earlier — runtime access to the running app is more useful than I expected.

---

This post is itself a portfolio piece. If you're interested in working together on an Elixir project, get in touch.