# Day 4: Build an App Claude Code Accelerator, Day 4. The day runs in seven beats. Everything under each beat gets built from scratch, live, walked through with Max. --- ## Beat 0: Frame (10 min) The opener. Not technical. Three things, fast. - The moat. Everyone can build now, so building faster is not the edge. The edge is three things: knowing WHAT to build (a validated idea), making it trustworthy (design), and making the output 10x not 10 percent better (quality). App slop is the third wave after prompt slop and content slop. Today is about not shipping slop. - The pattern is the cargo. "Your app idea does not matter, the patterns do." Two audiences, both right: build your own app, or watch Max command a complex build and take the pattern. The watchers get the command pattern at full resolution, and it works on any multi-component project. - Honest scope. Today you ship a real, small app: planned, with a real backend and a real share link, deployed to a URL. Not a finished product. The persistence-hardening, the second flow, and the polish ship the following week on top of what you build today. Land it: today is the ceiling of what one operator can direct in an afternoon. By the time we close, you will know where your ceiling is. --- ## Beat 1: Annoyance to a shaped, validated 1.0 (15 min) - Name the annoyance, not a cool idea. A real, specific drain that an app would kill. If it is a cool idea instead of a real annoyance, push back: we are not building demos today. - Cut to five features, park the rest. The cap is the gift. The sixth feature is the reason v1s ship at 60 percent and die in the half-built drawer. - Lightning validation (5 minutes, one pass). Not the full Atomic Insight Engine, which is pre-work and take-home. Just the gut-check: is this Universal, Intense, Unsolved, Reachable? Anyone who ran the engine in pre-work just confirms their score. - Shape of the data first. Before any code, name what the app stores: the 3 to 5 fields and what one record looks like. Schema churn forces redeploys later, so cheap thinking now saves expensive rework. - Optional, for builders with their own idea: run the Prompt Architect meta-prompt (`build-assets/prompt-architect-meta-prompt.md`). It interviews them and outputs a build-ready kickoff prompt with plan-first, data-shape-first, MVP, guardrails, and a prove-it close already baked in. Watchers run it on a client workflow instead. By the end: one annoyance named, a five-feature 1.0, the data shape sketched, and optionally a kickoff prompt in hand. --- ## Beat 2: Plan first, for real (15 min) - Plan mode (shift+tab). Claude interviews you and writes the plan before any code. This is the one universal move across every build tutorial in the market. Lead with it, every time. - Set up Git so you can roll back. One line: "create a git repo and commit, and keep committing after each change so I can roll back." Cheap insurance the moment a build goes sideways. - One adversarial pass, not a four-pass loop. Run a single "destroy this plan, find every flaw, assume nothing" pass, then have Claude rewrite. The pushback is what you paid for; one sharp pass gets most of the value without the time sink. - Advanced option (level-up): run that adversarial pass through Codex (the codex-exec skill or your claudex review command) for a genuine second-model opinion. Claude does not push back hard enough on its own work; a different model will. - Output: a short plan with the chosen stack, the data model, and the deploy target. No alternatives carried forward, so execution stays tunnel-visioned on the chosen path. --- ## Beat 3: Build the MVP core flow, live Two builds, low to high. The first proves the loop on something tiny. The second is the real thing everyone builds together. ### Part A: Blank folder to a live calculator (the warm-up) - Open a brand-new, empty folder on screen. Nothing in it. This is the "from zero" moment. - Drop in a real Facebook Ads export (demo file: `build-assets/Coastal-Glow_Meta-Ads_Last-30-Days.xlsx`). Prompt Claude to build a small web app around it that calculates what a creative strategist actually needs: CAC (cost per purchase), ROAS, and which creatives are winning vs dragging the account down. - Watch it go from empty folder to a working local web app. - Safety move (the live-worthy piece of the Building Safely prompts): early on, tell Claude to set up Git and commit on every change so you can always roll back. One line does it: "create a git repo and commit, and keep committing after each change so I can roll back." - Host it: push to GitHub, then deploy to Netlify or Vercel (same move as Day 3). The "push and it is live" loop, proven on something small. - The point: from nothing to a deployed tool in one sitting. That is the loop. Everything after this is just surface area. Note: the FB export gives CAC and ROAS directly. True LTV needs margin and repeat-rate, which Facebook does not export, so the app would ask the user for those as inputs (or we add a small companion file). ### Part B: The group build, the Creative Showcase (kickoff here, finishes across Beats 4 and 6) - The build everyone makes together: a clean, premium way to present ads, creative, and brand ideas to a client. - Upload the creative (Facebook ads, images, video), brand it for that specific client (their logo and colors), and display it beautifully. It makes the whole client presentation look sharp. - Start from one detailed, data-shape-first prompt. Build together so everyone walks out with their own live version. - This one needs the full stack, so it runs past this beat: GitHub backup plus a database and file storage (Beat 4) and a real deploy (Beat 6). Open decisions (recommendations to confirm as we build): - Database, storage, and auth: Convex. Chosen so nobody hunts for keys: `npx convex dev` provisions the backend and writes the env automatically. Schema lives in TypeScript that Claude reads. File storage handles the media. - Client access: a public, unguessable share link. The client does not log in; only the creator does. - "Brand it for the client": this is the magical moment (Beat 5). Upload a logo and two colors and the whole board re-themes. ### Part C: Drop in cool components (the make-it-beautiful pass, after the core build) Once the core Showcase app works, show everyone how one command adds premium, animated components from a library (21st.dev). Build first, then make it beautiful. Two components, wired into the real app (see `build-assets/component-addins.md` for the install commands and integration prompt): - A drag-and-drop video upload card (isaiahbjork) as the item-upload UI, rewired to upload to Convex file storage. - A GSAP flip-reveal grid (paceui) for the client gallery, so filtering by section or favorites animates the items into place. This is the component-libraries pillar made live, and the highest visible-polish-per-minute move of the day. --- ## Beat 4: Make it real (DB + auth + secrets) (25 min) The emotional peak. This is where the Showcase stops being a toy. - Stand up the backend with Convex: run `npx convex dev`. It provisions the backend and writes the deployment URL into .env.local automatically, so nobody hunts for keys in a dashboard. Watch Claude refuse to take secrets in chat: that is the secrets-discipline beat happening live. - The data model becomes the Convex schema; the access model becomes Convex functions: a public getBoardBySlug query for the client view, a public addFeedback mutation (favorite, comment, approve, request changes, with just a name), and auth-checked creator mutations keyed to ownerId. Convex Auth handles the creator login. The client never logs in. - The magical moment: set the client brand (use the Halo demo, logo plus teal #14B8A6 and coral #FB7185), and the whole board re-themes. Save it as a reusable brand kit so the next board themes in one click. - Verify IN the backend, not the chat. Add a real item and show it land in Convex. Because Convex is real-time, the creator dashboard updates live. - Secrets discipline: env vars live in .env.local and the host settings, never in chat, and nothing sensitive is ever a NEXT_PUBLIC_ var. --- ## Beat 5: Verify like you mean it (20 min) - Fake-success detector. Is the data real, mocked, or fallback? If you refresh, does state persist? If feedback fails, do you see a real error? Open the share link in a private window, logged out, and leave a favorite and a comment as the client. Watch it appear on the creator dashboard live. - Magical-moment check (light touch). One pass asking "where is the 5-to-7-star moment?": the first open, the brand re-theme, the approve. That is the line between app slop and a product people remember. - Real hands tap-test. Everyone opens each other's boards and taps the core flow. Real users do what the operator never imagined, so the killer bugs surface here and get fixed before close. - Make-it-beautiful pass. This is also where the impeccable plugin and the component add-ins land: drop in the 21st.dev video upload card and the flip-reveal gallery (`build-assets/component-addins.md`). Make-it-beautiful is a separate pass from make-it-work, and that order is the lesson. See the real before/after of the calculator dashboard for proof: `build-assets/Before.png` to `build-assets/after.png`. - Then give the whole thing one premium brand language with power-design (the design skill from the website day): pick a premium brand system from its library (Linear, Apple, Notion, and so on), apply its 20 principles to the real UI, kill every gradient, commit to one scarce accent. This is exactly how the Showcase demo went from functional to its dark-gallery glass look. Recipe: `build-assets/power-design-polish.md`. --- ## Beat 6: Ship it (15 min) - Deploy, and name the difference out loud. The calculator is static, so push to GitHub and it is live. The Showcase has a Convex backend, so the frontend deploys to Vercel and the backend deploys with `npx convex deploy`. It is NOT a static GitHub Pages site. Saying this prevents the "push equals live" expectation from breaking on the backend app. - The URL is the receipt. Every builder drops their share link in chat before close. Everyone visits each other's boards, opens a link logged out, and leaves real feedback. - Analytics wire-up does not get a live slot. It goes in the post-workshop email (a three-line snippet and a dashboard link), so members have it live in five minutes from home. --- ## Close (10 min) - The artifact is the receipt; the capability is the workflow. The URL, the deployed board, the calculator: those prove the workshop happened. They are not the value. The value is the workflow (plan, verify, brief-the-senior, drive the stack), and that is what compounds. - The identity: "I build what used to require waiting on someone else." Before this week, an internal tool meant a freelancer, a budget conversation, and a half-built result eight weeks later. After this week, it means an afternoon and a clickable URL by dinner. - The take-home kit keeps producing: the Prompt Architect (any idea to a build-ready prompt), the Building Safely prompts (for when you build for real on Monday), the component add-ins, and the recordings. The system you installed this week does not stop producing when the four days end. - The line: you walked in looking for a tool. You walk out with an architecture. Go build. (The Genesis door, soft and earned, link in chat.)