1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>Build with Claude Code â Paid Cohort (Starts 5 July)</title> 7<link rel="icon" type="image/svg+xml" href="/favicon.svg"> 8 9<!-- SEO --> 10<meta name="description" content="A 4-week paid cohort that takes you from zero to three deployed AI products. Real Next.js + Vercel + Supabase + Claude API. 60 seats. Starts 5 July 2026."> 11<link rel="canonical" href="https://buildwithcc.vercel.app/paid"> 12 13<!-- Open Graph --> 14<meta property="og:title" content="Build with Claude Code â Paid Cohort (Starts 5 July)"> 15<meta property="og:description" content="4 weeks. 3 deployed products. Real Next.js stack. Live cohort with Sid Arora. Starts 5 July 2026."> 16<meta property="og:image" content="https://buildwithcc.vercel.app/og-image.png"> 17<meta property="og:image:width" content="1200"> 18<meta property="og:image:height" content="630"> 19<meta property="og:url" content="https://buildwithcc.vercel.app/paid"> 20<meta property="og:type" content="website"> 21<meta property="og:site_name" content="JustAnotherPM"> 22 23<!-- Twitter Card --> 24<meta name="twitter:card" content="summary_large_image"> 25<meta name="twitter:title" content="Build with Claude Code â Paid Cohort (Starts 5 July)"> 26<meta name="twitter:description" content="4 weeks. 3 deployed products. Real Next.js stack. Live cohort with Sid Arora."> 27<meta name="twitter:image" content="https://buildwithcc.vercel.app/og-image.png"> 28 29<!-- Meta Pixel -->
30<script>
vendor: 390 bytes, lines 30-32
30 31!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js'); 32fbq('init','
32969823588751327
vendor: 29 bytes, lines 32-33
32'); 33fbq('track','PageView');
34fbq('track','ViewContent',{content_name:'Build with Claude Code â Paid Cohort',content_category:'paid_course',value:600,currency:'USD'}); 35</script>
35 36<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=969823588751327&ev=PageView&noscript=1"/></noscript> 37<!-- End Meta Pixel --> 38 39<!-- Samcart Slide-out Checkout -->
40<script defer="defer" src="https://static.samcart.com/checkouts/sc-slide-script.js"></script>
40 41 42<link rel="preconnect" href="https://fonts.googleapis.com"> 43<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 44<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> 45<style> 46*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} 47:root{ 48 --black:#111827; 49 --grey-dark:#374151; 50 --grey:#6B7280; 51 --grey-light:#9CA3AF; 52 --grey-border:#E5E7EB; 53 --grey-bg:#F9FAFB; 54 --yellow:#FACC15; 55 --yellow-dark:#CA8A04; 56 --yellow-bg:#FEFCE8; 57 --yellow-border:#FEF08A; 58 --green:#16A34A; 59 --green-bg:#F0FDF4; 60 --red:#DC2626; 61 --white:#FFFFFF; 62} 63html{background:var(--white);color:var(--black);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;scroll-behavior:smooth} 64body{overflow-x:hidden} 65 66/* ââ NAV ââ */ 67nav{border-bottom:1px solid var(--grey-border);padding:0.875rem 2rem;display:flex;align-items:center;justify-content:space-between;max-width:100%} 68.nav-logo{font-size:14px;font-weight:700;color:var(--black);letter-spacing:-0.01em;text-decoration:none} 69.nav-logo span{color:var(--yellow-dark)} 70.nav-pill{font-size:12px;font-weight:600;color:var(--yellow-dark);background:var(--yellow-bg);border:1px solid var(--yellow-border);border-radius:20px;padding:4px 12px} 71.nav-link{font-size:13px;font-weight:600;color:var(--grey-dark);text-decoration:none;margin-right:1.25rem} 72.nav-link:hover{color:var(--black)} 73.nav-right{display:flex;align-items:center} 74 75/* ââ HERO ââ */ 76.hero{max-width:880px;margin:0 auto;padding:4.5rem 2rem 3.5rem;text-align:center} 77.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--yellow-dark);margin-bottom:1.5rem} 78h1{font-size:clamp(38px,5vw,56px);font-weight:900;line-height:1.05;letter-spacing:-0.03em;color:var(--black);margin-bottom:1.25rem;max-width:760px;margin-left:auto;margin-right:auto} 79.hero-sub{font-size:19px;color:var(--grey-dark);line-height:1.6;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto} 80 81/* Price tag */ 82.price-tag{display:inline-flex;align-items:center;gap:14px;background:var(--yellow-bg);border:2px solid var(--black);border-radius:12px;padding:14px 22px;box-shadow:3px 3px 0 var(--black);margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center} 83.price-eb{font-size:28px;font-weight:900;color:var(--black);letter-spacing:-0.02em} 84.price-strike{font-size:18px;color:var(--grey);text-decoration:line-through} 85.price-badge{background:var(--green);color:var(--white);font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:0.04em} 86 87/* CTAs */ 88.btn-primary{display:inline-block;background:var(--yellow);color:var(--black);border:2px solid var(--black);border-radius:10px;padding:18px 28px;font-size:16px;font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--black);transition:transform 0.1s, box-shadow 0.1s;cursor:pointer} 89.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--black)} 90.btn-secondary{display:inline-block;background:var(--white);color:var(--black);border:2px solid var(--black);border-radius:10px;padding:14px 22px;font-size:14px;font-weight:700;text-decoration:none;margin-top:0.6rem} 91 92.cta-note{margin-top:0.9rem;font-size:13px;color:var(--grey-dark)} 93.cta-note strong{color:var(--black);font-weight:700} 94 95/* Date strip */ 96.date-strip{margin-top:2.5rem;display:inline-flex;gap:2.5rem;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--grey-dark)} 97.date-strip strong{color:var(--black);font-weight:700;display:block;font-size:16px} 98 99/* ââ DIVIDER ââ */ 100hr{border:none;border-top:1px solid var(--grey-border)} 101 102/* ââ SECTIONS ââ */ 103.section{padding:4.5rem 2rem} 104.inner{max-width:720px;margin:0 auto} 105.inner-wide{max-width:960px;margin:0 auto} 106h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-0.025em;line-height:1.15;color:var(--black);margin-bottom:0.6rem} 107h2 u{text-decoration:none;border-bottom:3px solid var(--yellow)} 108.section-sub{font-size:16px;color:var(--grey-dark);margin-bottom:2.25rem} 109 110/* Outcome row */ 111.outcome-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey-border);border:1px solid var(--grey-border);border-radius:12px;overflow:hidden} 112.outcome-cell{background:var(--white);padding:1.5rem;text-align:center} 113.outcome-num{font-size:32px;font-weight:900;color:var(--yellow-dark);letter-spacing:-0.02em;line-height:1} 114.outcome-label{font-size:13px;color:var(--grey-dark);margin-top:0.4rem;font-weight:600} 115 116/* Weeks */
117.weeks{display:flex;flex-direction:column;gap:1rem;margin-top:2rem} 118.week{border:1px solid var(--grey-border);border-radius:12px;padding:1.75rem;background:var(--white);transition:border-color 0.15s} 119.week:hover{border-color:var(--black)} 120.week-label{display:inline-block;font-size:11px;font-weight:800;color:var(--yellow-dark);background:var(--yellow-bg);border:1px solid var(--yellow-border);padding:3px 9px;border-radius:5px;margin-bottom:0.75rem;font-family:monospace;letter-spacing:0.05em} 121.week-title{font-size:20px;font-weight:800;color:var(--black);margin-bottom:0.5rem;letter-spacing:-0.015em} 122.week-theme{font-size:15px;color:var(--grey-dark);margin-bottom:1rem;line-height:1.55} 123.week-gate{font-size:13px;color:var(--green);font-weight:700;background:var(--green-bg);padding:8px 12px;border-radius:6px;display:inline-block} 124.week-gate::before{content:"â ";font-weight:900} 125.week-activity{font-size:14px;color:var(--black);background:var(--yellow-bg);border:1px solid var(--yellow-border);border-radius:8px;padding:0.85rem 1rem;margin:0.25rem 0 1rem;line-height:1.55} 126.week-activity strong{font-weight:800} 127.week-sub{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);margin:1.1rem 0 0.5rem} 128.week-list{margin:0;padding:0} 129.week-list li{list-style:none;position:relative;padding-left:1.3rem;font-size:14px;color:var(--grey-dark);line-height:1.5;margin-bottom:0.35rem} 130.week-list li::before{content:"â";position:absolute;left:0;color:var(--yellow-dark);font-weight:800} 131.week-session{font-size:14px;color:var(--grey-dark);line-height:1.55;margin-bottom:0.4rem;padding-left:1.3rem;position:relative} 132.week-session::before{content:"â¸";position:absolute;left:0;color:var(--grey-light)} 133.leave-list{margin-top:1.5rem;display:grid;gap:0.6rem} 134.leave-list li{list-style:none;position:relative;padding-left:1.6rem;font-size:15px;color:var(--grey-dark);line-height:1.55} 135.leave-list li::before{content:"â";position:absolute;left:0;color:var(--green);font-weight:900} 136.leave-list li strong{color:var(--black);font-weight:700} 137.keep-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.55rem 2rem;margin-top:1.5rem} 138.keep-grid li{list-style:none;position:relative;padding-left:1.5rem;font-size:14px;color:var(--grey-dark);line-height:1.5} 139.keep-grid li::before{content:"â";position:absolute;left:0;color:var(--yellow-dark);font-weight:900} 140.threaded{background:var(--grey-bg);border:1px solid var(--grey-border);border-radius:12px;padding:1.5rem 1.75rem;margin-top:1.5rem} 141.threaded-title{font-size:13px;font-weight:800;color:var(--black);margin-bottom:0.75rem} 142.threaded li{list-style:none;position:relative;padding-left:1.4rem;font-size:14px;color:var(--grey-dark);line-height:1.5;margin-bottom:0.4rem} 143.threaded li:last-child{margin-bottom:0} 144.threaded li::before{content:"â»";position:absolute;left:0;color:var(--yellow-dark);font-weight:800} 145.threaded li strong{color:var(--black);font-weight:700} 146.two-tables{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem} 147.two-tables h3{font-size:15px;font-weight:800;color:var(--black);margin-bottom:0.5rem} 148 149/* Stack table */ 150.stack-table{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:14px} 151.stack-table th{background:var(--grey-bg);font-weight:700;color:var(--black);text-align:left;padding:10px 14px;border-bottom:2px solid var(--grey-border);font-size:12px;letter-spacing:0.05em;text-transform:uppercase} 152.stack-table td{padding:10px 14px;border-bottom:1px solid var(--grey-border);color:var(--grey-dark)} 153.stack-table td:first-child{font-weight:700;color:var(--black);white-space:nowrap} 154.stack-table td:nth-child(2){font-family:monospace;color:var(--yellow-dark);font-size:13px} 155 156/* Audience grid */ 157.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey-border);border:1px solid var(--grey-border);border-radius:12px;overflow:hidden;margin-top:2rem} 158.audience-item{background:var(--white);padding:1.5rem;transition:background 0.1s} 159.audience-item:hover{background:var(--grey-bg)} 160.audience-title{font-size:15px;font-weight:800;color:var(--black);margin-bottom:0.4rem} 161.audience-desc{font-size:14px;color:var(--grey-dark);line-height:1.55} 162 163/* What's not in */ 164.not-in{background:var(--grey-bg);border-left:4px solid var(--red);padding:1.5rem 1.75rem;border-radius:8px;margin-top:1.5rem} 165.not-in li{font-size:14px;color:var(--grey-dark);margin-bottom:0.5rem;list-style:none;padding-left:1.4rem;position:relative;line-height:1.55} 166.not-in li::before{content:"â";position:absolute;
166left:0;top:0;color:var(--red);font-weight:900} 167.not-in li:last-child{margin-bottom:0} 168 169/* Pricing card */ 170.pricing-card{background:var(--black);color:var(--white);border-radius:16px;padding:3rem 2.5rem;max-width:560px;margin:2rem auto 0;text-align:center;position:relative} 171.pricing-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--black);background:var(--yellow);padding:5px 12px;border-radius:5px;margin-bottom:1.25rem} 172.pricing-price-row{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:0.4rem;flex-wrap:wrap} 173.pricing-eb{font-size:64px;font-weight:900;letter-spacing:-0.03em;line-height:1} 174.pricing-strike{font-size:22px;color:var(--grey-light);text-decoration:line-through} 175.pricing-save{font-size:13px;font-weight:700;color:var(--yellow);margin-bottom:1.5rem;letter-spacing:0.04em} 176.pricing-code-row{background:rgba(250,204,21,0.12);border:1px dashed var(--yellow);border-radius:8px;padding:14px;margin-bottom:1.5rem;font-size:14px} 177.pricing-code{font-family:monospace;font-weight:800;color:var(--yellow);font-size:18px;letter-spacing:0.05em} 178.pricing-deadline{font-size:13px;color:var(--grey-light);margin-top:0.5rem} 179.pricing-includes{text-align:left;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.15);font-size:14px} 180.pricing-includes li{list-style:none;padding-left:1.6rem;position:relative;margin-bottom:0.55rem;color:var(--grey-light);line-height:1.55} 181.pricing-includes li::before{content:"â";position:absolute;left:0;color:var(--yellow);font-weight:900} 182.pricing-includes li strong{color:var(--white);font-weight:600} 183.pricing-cta{margin-top:1.75rem} 184 185/* FAQ */ 186.faq-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--grey-border);border-radius:12px;overflow:hidden;margin-top:1.5rem} 187.faq-item{padding:1.25rem 1.5rem;border-bottom:1px solid var(--grey-border);background:var(--white)} 188.faq-item:last-child{border-bottom:none} 189.faq-q{font-size:15px;font-weight:700;color:var(--black);margin-bottom:5px} 190.faq-a{font-size:14px;color:var(--grey-dark);line-height:1.65} 191 192/* Founder */ 193.founder{background:var(--grey-bg);border-top:1px solid var(--grey-border);padding:4rem 2rem} 194.founder-inner{max-width:560px;margin:0 auto} 195.founder-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem} 196.founder-av{width:52px;height:52px;border-radius:50%;background:var(--yellow);border:2px solid var(--black);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--black);flex-shrink:0} 197.founder-name{font-size:15px;font-weight:800;color:var(--black)} 198.founder-role{font-size:13px;color:var(--grey)} 199.founder-body{font-size:15px;color:var(--grey-dark);line-height:1.75} 200.founder-body p{margin-bottom:1rem} 201.founder-body p:last-child{margin-bottom:0} 202 203/* Final CTA */ 204.final-cta{text-align:center;padding:5rem 2rem} 205.final-cta h2{margin-bottom:0.5rem} 206.final-cta p{font-size:16px;color:var(--grey-dark);margin-bottom:2rem;max-width:560px;margin-left:auto;margin-right:auto} 207 208/* Placeholder marker */ 209.tbd{display:inline-block;background:var(--yellow-bg);border:1px dashed var(--yellow-dark);color:var(--yellow-dark);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;font-family:monospace} 210 211footer{padding:1.5rem 2rem;text-align:center;font-size:12px;color:var(--grey);border-top:1px solid var(--grey-border)} 212 213@media(max-width:768px){ 214 .outcome-row{grid-template-columns:1fr} 215 .audience-grid{grid-template-columns:1fr} 216 .keep-grid{grid-template-columns:1fr} 217 .two-tables{grid-template-columns:1fr;gap:2rem} 218 .section{padding:3.5rem 1.5rem} 219 .hero{padding:3.5rem 1.5rem 2.5rem} 220 .pricing-card{padding:2.25rem 1.75rem} 221 .pricing-eb{font-size:48px} 222 .date-strip{gap:1.5rem} 223 .nav-link{display:none} 224} 225</style> 226</head> 227<body> 228 229<!-- NAV --> 230<nav> 231 <a href="/" class="nav-logo">just<span>another</span>.pm</a> 232 <div class="nav-right"> 233 <div class="nav-pill">Paid Cohort</div> 234 </div> 235</nav> 236 237<!-- HERO --> 238<section class="hero"> 239 <div class="hero-eyebrow">Paid Cohort · 4 Weeks · Starts 5 July 2026</div> 240 <h1>Build with Claude Code.<br>Ship 3 real products in 4 weeks.</h1> 241 <p class="hero-sub">A small live cohort. Real Next.js, Vercel, Supabase, Claude API. You leave with 3 deployed products â two we build together, one is your own idea â and the skill to build more, even if you've never written code.</p> 242
243 <div class="price-tag"> 244 <span class="price-eb">$450</span> 245 <span class="price-strike">$600</span> 246 <span class="price-badge">25% OFF â EARLY BIRD</span> 247 </div> 248 249 <div> 250 <a href="https://japmusd.mysamcart.com/checkout/build-with-claude-code#samcart-slide-open-right" class="btn-primary">Reserve your seat â</a> 251 </div> 252 <p class="cta-note">Use code <strong>CCEB150</strong> at checkout. Early bird ends <strong>21 June 2026</strong>.</p> 253 254 <div class="date-strip"> 255 <div><strong>5 July 2026</strong>Cohort starts</div> 256 <div><strong>4 weeks</strong>4 live sessions</div> 257 <div><strong>60 seats</strong>Cohort cap</div> 258 </div> 259</section> 260 261<hr> 262 263<!-- WHAT YOU LEAVE WITH --> 264<section class="section"> 265 <div class="inner-wide"> 266 <h2>What you leave with. <u>Real products, real URLs.</u></h2> 267 <p class="section-sub">Not slides. Not notes. Not a certificate. Three deployed products and the workflow to keep shipping.</p> 268 <div class="outcome-row"> 269 <div class="outcome-cell"> 270 <div class="outcome-num">3</div> 271 <div class="outcome-label">Deployed products with live URLs</div> 272 </div> 273 <div class="outcome-cell"> 274 <div class="outcome-num">4</div> 275 <div class="outcome-label">Live sessions with Sid</div> 276 </div> 277 <div class="outcome-cell"> 278 <div class="outcome-num">60</div> 279 <div class="outcome-label">Other builders alongside you</div> 280 </div> 281 </div> 282 <ul class="leave-list"> 283 <li><strong>Three products on real URLs</strong> â the Second Brain (Week 1, single-user), the AI Interview Coach (Week 2, multi-user B2C), and your own idea (Weeks 3â4, any shape).</li> 284 <li><strong>A reusable pattern library</strong> â forkable starter repos, a CLAUDE.md template, the claude-utils.ts failure-handling library, an MCP starter, a Skill 2.0 worked example, an eval harness, a prompt-caching pattern, and a /polish-check command.</li> 285 <li><strong>Working judgement</strong> â on model selection (Opus/Sonnet/Haiku), agent architecture, product shape, and cost engineering.</li> 286 <li><strong>All session recordings + lifetime cohort Slack.</strong></li> 287 </ul> 288 </div> 289</section> 290 291<hr> 292 293<!-- THE 4 WEEKS --> 294<section class="section"> 295 <div class="inner-wide"> 296 <h2>What you actually <u>learn</u>.</h2> 297 <p class="section-sub">Each week is a skill you walk away with. The three products you ship are the proof you can use it.</p> 298 <div class="weeks"> 299 300 <div class="week"> 301 <span class="week-label">WEEK 01</span> 302 <div class="week-title">Claude Code as your build partner</div> 303 <div class="week-activity"><strong>Activity 1 â Second Brain.</strong> A single-user personal knowledge tool. Paste links, drop PDFs, drag in screenshots, type notes. Claude tags everything, summarises it, and answers questions across your whole library with citations back to the source. Shipped to a live URL by Friday.</div> 304 <div class="week-sub">Objectives â by the end of Week 1 you can</div> 305 <ul class="week-list"> 306 <li>Explain how Claude Code works as an agent â what it sees, does, and remembers</li> 307 <li>Use the core primitives â CLAUDE.md, plans, sub-agents (Task tool), slash commands</li> 308 <li>Direct Claude through the 5-step build loop: scaffold â implement â review â refactor â ship</li> 309 <li>Use the built-in tools â vision, files, web search, code execution â on real inputs</li> 310 <li>Pick between Opus, Sonnet, and Haiku for a given task</li> 311 <li>Ship the Second Brain to a real URL</li> 312 </ul> 313 <div class="week-sub">Topics</div> 314 <ul class="week-list"> 315 <li>The agent loop in plain English â read context, pick a tool, act, read result, repeat</li> 316 <li>CLAUDE.md â the memory file Claude reads every session; the highest-leverage thing in the course</li> 317 <li>Plans + TODOs â when to ask Claude to plan, when to just let it run</li> 318 <li>Sub-agents via the Task tool â parallel helpers (one tags notes, one summarises, one indexes)</li> 319 <li>Slash commands / custom skills â shortcuts you build and reuse forever (e.g. /summarise)</li> 320 <li>Model selection â Opus / Sonnet / Haiku, plus extended thinking</li> 321 <li>Vision + Files API â Claude reads PDFs, images, and screenshots directly</li> 322 <li>Built-in tools â web search and code execution</li> 323 <li>The modern AI app stack â Next.js, Vercel, Supabase, Anthropic SDK</li> 324 </ul> 325 <div class="week-sub">Live session (90 min)</div> 326 <p class="week-session">45 min â Sid builds the Second Brain live, empty folder to deployed URL</p> 327 <p class="week-session">45 min â live student debugging on what broke for them</p> 328 <div class="week-gate">Deliverable: a live Second Brain. Drop in 3 documents, ask 3 questions, get answers cited back to the source.</div> 329 </div> 330 331 <div class="week">
332 <span class="week-label">WEEK 02</span> 333 <div class="week-title">Make it real: connect to the world</div> 334 <div class="week-activity"><strong>Activity 2 â AI Interview Coach.</strong> A multi-user B2C web app. A user uploads their resume and a job posting, then completes a tailored mock interview. Three Claudes work together â an interviewer asks the next question, a grader scores the answer, a coach explains why. Per-user history. Anki-style export of weak spots as a custom Skill. The headline build of the cohort.</div> 335 <div class="week-sub">Objectives â by the end of Week 2 you can</div> 336 <ul class="week-list"> 337 <li>Connect Claude to a real external app via MCP (Gmail, Slack, Calendarâ¦)</li> 338 <li>Write a custom Skill (Skills 2.0)</li> 339 <li>Build a multi-user app â sign-up, sign-in, isolated data per user</li> 340 <li>Apply cost engineering â prompt caching, batch API, per-feature model routing</li> 341 <li>Handle Claude's five common production failure modes</li> 342 <li>Run a basic evaluation suite on AI output quality</li> 343 <li>Ship the AI Interview Coach â a real B2C app strangers can sign up to and use</li> 344 </ul> 345 <div class="week-sub">Topics</div> 346 <ul class="week-list"> 347 <li>MCP â connectors that let Claude talk to your real apps; turns Claude from chatbot into worker</li> 348 <li>Skills 2.0 â executable mini-programs Claude can install and run on demand</li> 349 <li>Hooks â automatic triggers (on sign-up, on deploy, on a schedule)</li> 350 <li>Background / scheduled work â Claude on a cron, the "works while you sleep" pattern</li> 351 <li>Auth (Clerk) + data isolation (Supabase Row Level Security)</li> 352 <li>The five Claude failure modes + the claude-utils.ts library that handles all five</li> 353 <li>Cost engineering â prompt caching (up to 90% cheaper), batch API (50% cheaper), model routing</li> 354 <li>AI UX patterns â streaming, optimistic UI, graceful failure</li> 355 <li>Evals â one Claude grading another; in Activity 2 this is literally the product</li> 356 <li>Anthropic's first-party Multi-Agent Orchestration (shipped May 2026 in Claude Code)</li> 357 </ul> 358 <div class="week-sub">Live session (90 min)</div> 359 <p class="week-session">45 min â Sid builds Activity 2 live: three-agent setup, auth, prompt c
359aching, eval; types a deliberately bad answer and shows Claude grading Claude in real time</p> 360 <p class="week-session">45 min â student share-outs of what broke when their first stranger tried it</p> 361 <div class="week-gate">Deliverable: a live, multi-user AI Interview Coach. A stranger signs up, uploads a resume + job posting, gets scored and coached. Sid tries every student's app.</div> 362 </div> 363 364 <div class="week"> 365 <span class="week-label">WEEK 03</span> 366 <div class="week-title">Your idea, the right shape</div> 367 <div class="week-activity"><strong>Activity 3 â Your own idea.</strong> The thing you've been thinking about for months â cut to a 7-day build and deployed in its appropriate shape. By Demo Day at least one stranger has used it.</div> 368 <div class="week-sub">Objectives â by the end of Week 3 you can</div> 369 <ul class="week-list"> 370 <li>Cut a vague idea down to a 7-day buildable version</li> 371 <li>Pick the right product shape for your idea</li> 372 <li>Pick the right agent architecture for the problem</li> 373 <li>Build a v1 of your own idea, deployed in its appropriate shape</li> 374 </ul> 375 <div class="week-sub">Topics</div> 376 <ul class="week-list"> 377 <li>The scoping cut â vague idea â 7-day version, done live on real student ideas</li> 378 <li>The one-page spec â what it is, who it's for, the core loop, the stack + agent pattern, the biggest risk</li> 379 <li>Product shapes â web app, background agent, MCP server, Skill-as-product, Slack/Discord bot, CLI tool, and when each is the right pick</li> 380 <li>Agent architectures â single Claude call, fixed pipeline, sub-agents, or full Multi-Agent Orchestration</li> 381 <li>The pattern-selection rule â three questions that decide the architecture</li> 382 <li>Extended thinking â when slowing Claude down is worth the latency</li> 383 <li>Claude Agent SDK â building Claude programs that aren't web apps</li> 384 <li>Design-as-you-build â prototype the riskiest part first, ugly, by hand</li> 385 <li>Deploying each product shape</li> 386 </ul> 387 <div class="week-sub">Live session (90 min)</div> 388 <p class="week-session">45 min â each student gives a 2-minute pitch; Sid names the one scope risk per project</p> 389 <p class="week-session">45 min â 3â4 students get a full live architecture review</p> 390 <div class="week-gate">Deliverable: v1 of your own idea, deployed in its appropriate shape. Core loop works end-to-end.</div> 391 </div> 392 393 <div class="week"> 394 <span class="week-label">WEEK 04</span> 395 <div class="week-title">Polish, evaluate, demo, keep going</div> 396 <div class="week-activity"><strong>Demo Day.</strong> Every student demos live for 3 minutes. Real URL, real input, real output. No slides. Sid closes with the post-cohort path forward.</div> 397 <div class="week-sub">Objectives â by the end of Week 4 you can</div> 398 <ul class="week-list"> 399 <li>Honestly evaluate your product against stranger-usability</li> 400 <li>Run a real evaluation suite on AI output quality and act on the results</li> 401 <li>Polish to demo-ready</li> 402 <li>Demo live in 3 minutes</li> 403 <li>Keep building and stay current with Anthropic's release velocity post-cohort</li> 404 </ul> 405 <div class="week-sub">Topics</div> 406 <ul class="week-list"> 407 <li>Honest self-evaluation â the three-question test, done aloud, away from the laptop</li> 408 <li>Evals on AI quality (deepened) â a golden set for your product, LLM-as-judge, catching regressions</li> 409 <li>The five edge cases â empty/one-word input, the paste-bomb, prompt injection, the "is this output good?" UI moment, the undo flow</li> 410 <li>The 10-minute polish checklist â loading / error / empty states, above-the-fold copy, mobile, one-sentence description</li> 411 <li>Demo craft â opening claim â single core flow â one wow moment â clear close</li> 412 <li>Computer Use (March 2026) â Claude controlling your actual desktop</li> 413 <li>Post-cohort trajectory â Anthropic's release cadence, how to stay current, what to ship next</li> 414 </ul> 415 <div class="week-sub">Live session â Demo Day (120 min)</div> 416 <p class="week-session">Every student demos live for 3 minutes; the cohort reacts; Sid closes with the path forward</p> 417 <div class="week-gate">Deliverable: a polished, evaluated AI product demoed live to 60 people.</div> 418 </div> 419 420 </div> 421 422 <div class="threaded"> 423 <div class="threaded-title">Threaded through all 4 weeks â sharper each time:</div> 424 <ul> 425 <li><strong>Directing Claude Code</strong> â briefing-first prompts, not typing</li> 426 <li><strong>Reading what Claude wrote</strong> â when to accept, push back, or ask for a redo</li> 427 <li><strong>Model selection</strong> â rule of thumb in Week 1, measured framework in Week 4</li> 428 <li><strong>Cost discipline</strong> â Week 1 awareness â Week 2 caching and batching â Week 4 monitoring</li> 429 <li><strong>The 5-step build loop</strong> â run dozens of times across the cohort</li> 430 </ul> 431 </div> 432 </div> 433</section> 434 435<hr> 436 437<!-- THE STACK --> 438<section class="section"> 439 <div class="inner-wide"> 440 <h2>The stack. <u>What you'll actually use.</u></h2> 441 <p class="section-sub">Modern, industry-standard. You don't need to know any of it upfront â every piece is
441introduced when it's needed and explained in plain English.</p> 442 <table class="stack-table"> 443 <thead> 444 <tr><th>Layer</th><th>Technology</th><th>What it does</th></tr> 445 </thead> 446 <tbody> 447 <tr><td>Frontend</td><td>Next.js (React)</td><td>The interface users see</td></tr> 448 <tr><td>Deployment</td><td>Vercel</td><td>One-command deploy to a live URL</td></tr> 449 <tr><td>Backend</td><td>Next.js API routes</td><td>Server logic, handles requests</td></tr> 450 <tr><td>Database</td><td>Supabase (Postgres)</td><td>Stores user data, persists state</td></tr> 451 <tr><td>Auth</td><td>Clerk</td><td>User accounts, login, per-user data</td></tr> 452 <tr><td>AI runtime</td><td>Anthropic SDK</td><td>Powers the intelligence (Claude API)</td></tr> 453 <tr><td>Build agent</td><td>Claude Code</td><td>Writes the product itself</td></tr> 454 <tr><td>Connectors</td><td>MCP servers</td><td>Connect Claude to real apps</td></tr> 455 <tr><td>Skills</td><td>Skills 2.0</td><td>Reusable, executable workflows</td></tr> 456 <tr><td>Multi-agent</td><td>Multi-Agent Orchestration</td><td>Lead + specialist Claudes, native</td></tr> 457 <tr><td>Non-web shapes</td><td>Claude Agent SDK</td><td>Background agents, CLI tools, MCP servers</td></tr> 458 </tbody> 459 </table> 460 </div> 461</section> 462 463<hr> 464 465<!-- WHAT YOU KEEP --> 466<section class="section"> 467 <div class="inner-wide"> 468 <h2>What you keep. <u>Forever.</u></h2> 469 <p class="section-sub">You don't just leave with products â you leave with a forkable library you reuse on every build after.</p> 470 <ul class="keep-grid"> 471 <li>Activity 1 repo (Second Brain) â forkable</li> 472 <li>Activity 2 repo (AI Interview Coach) â forkable multi-user B2C template</li> 473 <li>Your Weeks 3â4 own-idea repo</li> 474 <li>Canonical CLAUDE.md template</li> 475 <li>claude-utils.ts â the failure-handling library (all five failure modes)</li> 476 <li>One MCP connection pattern (Gmail or Slack)</li> 477 <li>One Skill 2.0 template + worked example</li> 478 <li>Eval harness template â golden set + LLM-as-judge runner</li> 479 <li>Prompt-caching pattern code</li> 480 <li>Clerk + Supabase Row Level Security starter</li> 481 <li>Product-shape decision tree (the Week 3 menu)</li> 482 <li>/polish-check slash command</li> 483 <li>All four session recordings</li> 484 <li>Lifetime cohort Slack access</li> 485 </ul> 486 </div> 487</section> 488 489<hr> 490 491<!-- THE COMMITMENT --> 492<section class="section"> 493 <div class="inner-wide"> 494 <h2>The commitment. <u>Time and cost, no surprises.</u></h2> 495 <p class="section-sub">Total effort: 15â25 hours over 4 weeks. Pre-cohort setup (~1 hr) the week before: a laptop, Claude Pro ($20/mo) + Claude Code, and free-tier GitHub, Vercel, Supabase, and Clerk accounts.</p> 496 <div class="two-tables"> 497 <div> 498 <h3>Time investment</h3> 499 <table class="stack-table"> 500 <thead><tr><th>Component</th><th>Hours</th></tr></thead> 501 <tbody> 502 <tr><td>4 live sessions</td><td>6.5 hrs</td></tr> 503 <tr><td>Own building (2â4 hrs à 4 weeks)</td><td>8â16 hrs</td></tr> 504 <tr><td>Pre-cohort setup</td><td>1 hr</td></tr> 505 <tr><td>Total</td><td>15â25 hrs / 4 weeks</td></tr> 506 </tbody> 507 </table> 508 </div> 509 <div> 510 <h3>Running cost after the cohort</h3> 511 <table class="stack-table"> 512 <thead><tr><th>Service</th><th>Free tier covers</th></tr></thead> 513 <tbody> 514 <tr><td>Vercel</td><td>Hobby â thousands of users</td></tr> 515 <tr><td>Supabase</td><td>500 MB DB, 50k monthly users</td></tr> 516 <tr><td>Clerk</td><td>10k monthly active users</td></tr> 517 <tr><td>Claude API</td><td>~free to ~$5â15/mo with caching</td></tr> 518 <tr><td>Total</td><td>$0â$25/mo for the first few months</td></tr> 519 </tbody> 520 </table> 521 </div> 522 </div> 523 </div> 524</section> 525 526<hr> 527 528<!-- WHO THIS IS FOR --> 529<section class="section"> 530 <div class="inner-wide"> 531 <h2>Who this is for.</h2> 532 <p class="section-sub">You don't need to code. Claude Code writes the code. You make the decisions.</p> 533 <div class="audience-grid"> 534 <div class="audience-item"> 535 <div class="audience-title">The AI-curious</div> 536 <div class="audience-desc">You've heard about building with AI and want to understand what it actually means. You've used ChatGPT but never shipped anything.</div> 537 </div> 538 <div class="audience-item"> 539 <div class="audience-title">The AI enthusiast</div> 540 <div class="audience-desc">You follow the space, you've tried tools, you know the concepts. You haven't built a real product yet.</div> 541 </div> 542 <div class="audience-item"> 543 <div class="audience-title">The AI builder</div> 544 <div class="audience-desc">You've built small things â agents, automations, scripts. You want to go from tinkering to shipping something real.</div> 545 </div> 546 <div class="audience-item"> 547 <div class="audience-title">The idea person</div> 548 <div class="audience-desc">You have product ideas you can't execute because you don't know how to build. This course closes that gap.</div> 549 </div> 550 </div> 551 </div> 552</section> 553 554<hr> 555 556<!-- WHAT'S NOT IN --> 557<section class="section"> 558 <div class="inner"> 559 <h2>What's <u>not</u> in this course.</h2> 560 <p class="section-sub">Being honest about what this isn't matters more than promising everything.</p> 561 <ul class="not-in"> 562 <li>No theory without a build â every concept is immediately applied</li> 563 <li>No slides-only lectures â every session includes live building</li> 564 <li>No coding required from you â Claude Code handles implementation, you handle decisions</li> 565 <li>No certificate â you leave with deployed products, not a PDF</li> 566 <li>No drip videos â every session is live</li> 567 </ul> 568 </div> 569</section> 570 571<!-- PRICING --> 572<section class="section" style="background:var(--grey-bg);border-top:1px solid var(--grey-border);border-bottom:1px solid var(--grey-border)"> 573 <div class="inner"> 574 <h2 style="text-align:center">Reserve your seat.</h2> 575 <p class="section-sub" style="text-align:center">60 seats. First 25 get early bird pricing.</p> 576 577 <div class="pricing-card"> 578 <div class="pricing-eyebrow">Early Bird · Ends 21 June</div> 579 <div class="pricing-price-row">
580 <span class="pricing-eb">$450</span> 581 <span class="pricing-strike">$600</span> 582 </div> 583 <div class="pricing-save">YOU SAVE $150 · 25% OFF</div> 584 585 <div class="pricing-code-row"> 586 Use this code at checkout:<br> 587 <span class="pricing-code">CCEB150</span> 588 <div class="pricing-deadline">Code expires 21 June 2026 at 23:59 BST.</div> 589 </div> 590 591 <ul class="pricing-includes"> 592 <li><strong>4 live sessions</strong> with Sid (Weeks 1â4)</li> 593 <li><strong>3 deployed products</strong> by end of cohort, with live URLs</li> 594 <li><strong>Full Claude Code + Next.js + Supabase stack</strong> â taught from zero</li> 595 <li><strong>Cohort Slack</strong> â 60 builders going through it alongside you</li> 596 <li><strong>Demo Day</strong> â 3-minute live demo to the whole cohort</li> 597 <li><strong>Recordings</strong> of every live session, yours to keep</li> 598 </ul> 599 600 <div class="pricing-cta"> 601 <a href="https://japmusd.mysamcart.com/checkout/build-with-claude-code#samcart-slide-open-right" class="btn-primary" style="background:var(--yellow);color:var(--black);box-shadow:4px 4px 0 var(--yellow-dark)">Reserve my seat â $450 â</a> 602 </div> 603 <p style="margin-top:1rem;font-size:12px;color:var(--grey-light)">Cohort starts 5 July 2026. Live sessions <span class="tbd">times TBD</span>.</p> 604 </div> 605 </div> 606</section> 607 608<hr> 609 610<!-- FAQ --> 611<section class="section"> 612 <div class="inner"> 613 <h2>Before you reserve.</h2> 614 <div class="faq-list"> 615 <div class="faq-item"> 616 <div class="faq-q">Do I need to have done the free course first?</div> 617 <div class="faq-a">Recommended but not required. The paid cohort introduces Claude Code basics in Week 1 for students who haven't done the free course â but if you have time before 5 July, the free course at buildwithcc.vercel.app is the fastest way to walk in already comfortable.</div> 618 </div> 619 <div class="faq-item"> 620 <div class="faq-q">How much time do I need to commit?</div> 621 <div class="faq-a">Roughly 2â4 hours per week outside the live sessions, plus the 4 live sessions themselves. Most of the work is building, not watching.</div> 622 </div> 623 <div class="faq-item"> 624 <div class="faq-q">Do I really not need to code?</div> 625 <div class="faq-a">Correct. Claude Code writes the code. You direct it â decide what to build, review what it produces, iterate. We teach you how to direct it well. Many of the strongest builds in cohorts like this come from people who've never opened a terminal before.</div> 626 </div> 627 <div class="faq-item"> 628 <div class="faq-q">What does it cost to run my product after the cohort?</div> 629 <div class="faq-a">For a small product with a handful of users: roughly $0â$25 a month. Vercel, Supabase, and Clerk all have generous free tiers that cover early usage. Claude API costs scale with use. We cover cost control explicitly in Week 2.</div> 630 </div> 631 <div class="faq-item"> 632 <div class="faq-q">When are the live sessions?</div> 633 <div class="faq-a"><span class="tbd">Times TBD â announced before cohort start</span>. All sessions are recorded, so you can catch up if you can't attend live. The cohort runs from 5 July through early August 2026.</div> 634 </div> 635 <div class="faq-item"> 636 <div class="faq-q">What's the refund policy?</div> 637 <div class="faq-a"><span class="tbd">Refund policy TBD â finalise before launch</span>. Default plan: full refund within 14 days if you complete Week 1 in full and decide it's not for you.</div> 638 </div> 639 <div class="faq-item"> 640 <div class="faq-q">Where do I check out?</div> 641 <div class="faq-a">Click any "Reserve your seat" button. You'll go to Samcart (our checkout partner). Pay with card or Apple Pay. You'll get an immediate confirmation email with your Slack invite and cohort details.</div> 642 </div> 643 </div> 644 </div> 645</section> 646 647<!-- FOUNDER --> 648<section class="founder"> 649 <div class="founder-inner"> 650 <div class="founder-header"> 651 <div class="founder-av">S</div> 652 <div> 653 <div class="founder-name">Sid Arora</div> 654 <div class="founder-role">Head of Product, Gen AI & Agentic Solutions · Yelp</div> 655 </div> 656 </div> 657 <div class="founder-body"> 658 <p>Two years ago I started building AI products in production. Agents, orchestrators, MCP integrations, the performance trade-offs that aren't in any tutorial â I had to figure all of it out the hard
658way.</p> 659 <p>I built the free course because the patterns shouldn't take months to find. I built this paid cohort because going from "I get the patterns" to "I shipped a real product" is a different kind of work â one that needs live feedback, peer accountability, and someone in the trenches with you for 4 weeks.</p> 660 <p>If you've watched the AI space for a year and still haven't shipped, this is the cohort that closes that gap. By 2 August 2026, you'll have three deployed products with live URLs â two we build together and one of your own. That's the deal.</p> 661 </div> 662 </div> 663</section> 664 665<!-- FINAL CTA --> 666<section class="final-cta"> 667 <h2>Reserve your seat.</h2> 668 <p>$450 with early bird code <strong style="color:var(--black)">CCEB150</strong>, valid through 21 June 2026. Cohort starts 5 July.</p> 669 <a href="https://japmusd.mysamcart.com/checkout/build-with-claude-code#samcart-slide-open-right" class="btn-primary">Reserve my seat â $450 â</a> 670 <p style="margin-top:1rem;font-size:13px;color:var(--grey)">60 seats total. First 25 get the early bird price.</p> 671</section> 672 673<footer>Built by Sid Arora · JustAnotherPM · Not affiliated with Anthropic</footer> 674 675</body> 676</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.