A Full-Stack App, Built Without a Keyboard

What I Built

VibeCheckMe.net is a free AI personality roast generator disguised as a Fortune 500 corporate analytics tool. Enter a name, pick an intensity level (Gentle, Roast, or Unhinged), and Claude generates a personalized "Vibe Diagnostic Report" complete with a Chaos Index, Audacity Index, Threat Level assessment, and classified vibe analysis.

The corporate-parody aesthetic is load-bearing. Deep navy backgrounds, muted gold accents, "CONFIDENTIAL" watermarks at 0.03 opacity, report IDs formatted like VC-XXX-XXXX. Results look like leaked internal documents. That is what makes them shareable.

Here is the part that matters for this case study: I built the entire thing on my phone, over a single weekend. Claude Code on the iOS app. Not a single line was hand-written. I never opened an IDE or sat at a computer.

By the Numbers

• 253 commits over a single weekend (~33 hours of development)
• 13,176 lines of source code across 75 files
• 20 React components, 6 modals, 3 API endpoints
• 6 Claude system prompt variants totaling 600+ lines of prompt engineering
• 4 production dependencies (React, ReactDOM, html2canvas, qrcode.react)
• 0 possible user-facing error states

Every commit links to a Claude Code session. The git history reads like a real-time development stream.

Architecture

The stack is deliberately minimal. React 18 handles the frontend as a single-page app with phase-based state management in one 658-line App.jsx. No router, no state library, no CSS-in-JS framework. All styles are inline JavaScript objects driven by a full design token system: 8 token categories, 50+ individual tokens, 100+ color values across light and dark palettes.

Claude API Integration

Claude is the product. Every roast is generated live by the Claude API through a Cloudflare Worker that handles routing, model selection, and response streaming.

The Worker selects the right model for each intensity: Haiku 4.5 for Gentle (fast, cheap, still funny), Sonnet 4.6 for Roast and Unhinged (higher quality, sharper writing). Temperature varies per intensity too. The frontend streams the response in real-time, parsing Claude's output into structured fields (Chaos Index, Audacity Index, vibe summary, threat level) as chunks arrive. No waiting for a complete response. The report builds itself on screen.

Six system prompts cover three intensity levels across two modes (single and dual). Each prompt includes specific profanity density anchors with example text, word count targets (50-80 words), structural mandates ("exactly 1 SHORT paragraph, 3-4 sentences MAX"), and writing quality instructions. The prompts tell Claude what TO do, not what to avoid. That inversion is deliberate.

Cloudflare KV caches the daily AI-generated vibe forecast and enforces IP-based rate limits. D1 (SQLite) handles non-blocking leaderboard tracking.

Resilience by Design

What happens when the API fails? Nothing visible. The user gets a result anyway.

2,500+ lines of fallback content power a combinatorial generator. It independently randomizes every field from intensity-specific pools: Gentle, Roast, Unhinged, and Hype variants. Even the daily vibe forecast has a deterministic fallback keyed to day-of-year. The fallback output is indistinguishable from a real Claude response because the pools were built to match each intensity voice.

What This Demonstrates

This project demonstrates three capabilities at once.

Claude Code Infrastructure Setup: The entire development process ran through Claude Code on iOS. No terminal, no IDE, no manual file editing. Architectural decisions, components, 600+ lines of prompt engineering. All of it went through Claude Code. 253 commits in a weekend is not fast typing. It is what happens when the agentic development workflow is set up correctly and the developer knows how to direct it.

Claude API Development and Support: The Cloudflare Worker implements a streaming Claude API integration with per-intensity model routing (Haiku 4.5 for Gentle, Sonnet 4.6 for Roast and Unhinged), temperature tuning, and real-time structured output parsing. Six system prompts, each tuned to produce a distinct voice at a distinct quality bar, are the entire product. Without the prompt engineering and API integration, there is no app. Claude generates every piece of user-facing content. This is a production AI application, not a wrapper around a string template.

Agentic Workflow/Automation Development: A solo developer on a phone shipped a production app in a weekend. 20 components, 3 API endpoints, a D1 database, KV caching, CI/CD via GitHub Actions, and a PWA manifest. The workflow itself is the proof.

If this resonates, book a free intro call -- 15 minutes, no pitch.

The Weekend Build

Why build from a phone? It started as a fun experiment. Could I ship something real without ever touching a keyboard?

The answer turned out to be yes. Claude Code on iOS provided the same agentic workflow available on desktop: file creation, editing, git operations, build commands, deployment. The constraint forced clarity. Every instruction had to be precise because I was typing on a phone screen. That precision made the output better, not worse.

By Sunday evening, the app was live. 253 commits, a full design system, Claude API integration, fallback content, leaderboard, shareable links. Production-deployed and working.

Technical Highlights

A few decisions worth noting:

Zero CSS files. Every style is an inline JavaScript object. The theme.js file exports a complete design token system with dev-mode shape assertions. This means intensity-driven theming works by swapping token references, not by toggling CSS classes. When you switch from Gentle to Unhinged, the entire visual language shifts in one state update.

Intensity as a design axis. Unhinged mode applies CRT scan lines, screen drift, opacity flicker with multi-keyframe timing, and button text that glitches with random Unicode characters via requestAnimationFrame. Gentle gets soft pastel glows and gentle breathing animations. The visual effects are not cosmetic. They reinforce the intensity selection and make each mode feel different.

Prompt engineering as product. The six system prompts are the most important code in the repo. Each one specifies exact profanity density with example text, mandates structural constraints, and anchors the voice so Claude produces consistent, funny output across thousands of generations. Gentle prompts produce office-appropriate humor. Roast turns up the heat. Unhinged removes the guardrails. Getting each voice right required iterative tuning, and the prompts are 600+ lines for a reason.

Easter egg architecture. Hardcoded results for names like "claude" (the AI roasts itself with an existential crisis), "god" (receives a performance review), and "alexa" (diagnosed as a hostage). Celebrity prompt modifiers inject custom directives for specific names through user message layer injection, keeping system prompts untouched. The Easter eggs are discoverable, shareable, and they reward repeat usage.

Send-a-roast flow. Users can construct shareable URLs with pre-filled name, mode, intensity, and a custom message. Recipients see a dramatic splash screen before Claude generates their result live. I built this viral mechanic in a single development session.