Mr. Beefburger is a fictional restaurant brand I’ve stewarded for more than two decades, dating back to a GeoCities site I built in 2000. I bought the domain a few years later and have owned mrbeefburger.com continuously for over 20 years, using it as a personal sandbox for whatever I wanted to learn next—first as a basic landing page, then as a small site with a few creative pages, and eventually as the most comprehensive build of my career.
This latest version is a full-stack production-grade website built with Claude Code, designed as a showcase of what’s possible when a long-time designer and frontend builder pairs with modern AI development tools. The project goes well beyond cosmetic design—it includes a real database, real authentication, real transactional email, and a real deployment pipeline. Nothing is mocked or stubbed.
Creative Direction
The fictional brand was a deliberate choice. Mr. Beefburger gave me room to build a complete, production-like system without the constraints of a real business. I developed the full brand world around Gerald Beaufort Beefburger III, a “futuristic-retro” burger chain founder whose personality runs through every piece of copy—from menu descriptions to error messages to verification emails. The visual system pairs Bricolage Grotesque and DM Sans against a warm, slightly nostalgic palette that nods to mid-century roadside Americana while staying contemporary.
Technical Build
Every tool in the stack was chosen to reflect what I’d reach for on a real project, not what was easiest to demo. The site runs on Astro 6 with server-side rendering through Vercel, using React islands for interactive components and Nanostores for persistent client state.
Features & Highlights
- Full multi-step ordering flow that writes to a Neon serverless Postgres database
- Passwordless OTP authentication via Better Auth, with 6-digit codes delivered through Amazon SES
- Order confirmation emails sent automatically through SES on every order
- “The Beefburger Loyalty Accord” — a four-tier loyalty program with a transaction ledger system tracking “Sauce Units” credited automatically to orders placed with a matching email
- Account dashboard at /account with sign-in via email OTP, showing loyalty balance, tier, transaction history, and full order history
- Shareable receipt pages at /order/[id] pulled live from the database
- Interactive OpenStreetMap locations page using Leaflet.js, with browser geolocation to sort the 11 restaurants by proximity
- Persistent cart drawer with quantity controls, stored in localStorage via nanostores
- “Pay Now” gotcha modal — the only honest moment in an otherwise complete e-commerce illusion
- Drizzle ORM for type-safe database queries across eight tables
- Content collections for menu items and locations, edited as Markdown
First-Time GitHub Workflow
This project also marked my first real foray into GitHub as a working environment. I learned the basics in context: commits, branches, push workflows, commit notes, and managing markdown files. Things real developers have been doing forever, but new ground for me—and a meaningful part of what made this project feel like a genuine step forward.
Reflection
Mr. Beefburger sits in an unusual place in my portfolio. It’s a fictional brand I’ve nurtured longer than most of my real client work has existed, and it’s also the project that most clearly demonstrates where I am right now: a designer and builder who has always shipped real websites for real organizations, now equipped with tools that let me reach significantly further than I could on my own. I’m not claiming to be a developer in the traditional sense, and I wouldn’t put this stack in front of a business-critical workload without a real engineer in the loop. But for small businesses, churches, and nonprofits—the kinds of organizations I’ve spent my career serving—this is a genuinely new era. Mr. Beefburger is my way of demonstrating what that era looks like.