AI Foundations: Architecting the Next Generation of Apps

Claude Code, Cloudflare, and the shape of modern delivery
4 weeks
2 hrs / week
~8 hrs work outside
Cohort of ~12
Online · Google Meet
Pass / fail
View on GitHub →
Fork the starter →
About
this course

This course is for developers who just finished a bootcamp and want to learn how to ship real products using AI as a collaborator — not as autocomplete. Over four weeks you will build something, deploy it publicly on Cloudflare, and be able to defend every architectural decision in it.

The course is opinionated. AI coding tools make it easy to produce code you don't understand. We will not do that. You'll leave able to work fast and explain what you built, because both are part of passing. The course runs online over Google Meet; sessions are recorded.

Contents

  1. Learning outcomes & how we grade them
  2. Pre-course setup
  3. The pedagogy: how we keep you from vibe-coding
  4. The in-class demo project
  5. The starter repo & skills
  6. Week 1 — Foundations
  7. Week 2 — Agentic workflow
  8. Week 3 — Choosing tools, scaling autonomy
  9. Week 4 — Ship & demo

Section 01Learning outcomes

By the end of this course a graduate should be able to sit next to a stakeholder, turn a problem into a working public URL inside a week, and explain every choice along the way.

Specifically, a graduate can

How you pass

This is a pass/fail course. There are no grades and no quizzes. To pass, you need all four of the following:

  1. Attendance at all four live sessions. Excused absences are allowed — if you miss one, watch the recording. No make-up artifact required.
  2. A public Git repo with your completed project.
  3. The project deployed to Cloudflare at a working public URL, linked from the repo's README.md.
  4. A ≤5 min demo recording (Loom or YouTube unlisted) and a ≤5 min PRD explainer video, both linked from README.md.

The week 4 live demo is part of the course experience, not a pass gate. The instructor will ask questions about your architecture and data model; you're expected to understand those at the architectural level. File-by-file omniscience is not required.


Section 02Pre-course setup

Send this list one week before session one. Solving install problems on the fly will eat week 1.

  1. Install Node.js 20+ (ideally via nvm).
  2. Install Claude Code and sign in. Verify with claude --version.
  3. Create a free Cloudflare account. Verify your email.
  4. Install Wrangler globally: npm install -g wrangler, then wrangler login.
  5. Install Git and be signed into GitHub (SSH keys set up).
  6. Choose a code editor. VS Code or Cursor both fine; Claude Code runs in the terminal regardless.
  7. Optional: a Loom, Screencastify, or YouTube account for the walkthrough video.
  8. Bring an idea — or permission to be interviewed by Claude about not having one yet.

Section 03Pedagogy: how we keep you from vibe-coding

The central risk of AI-assisted development is shipping code you couldn't defend. Five mechanisms push against that, applied throughout the course.

1. Commit-level rubber-duck quizzes

Before every logical commit, you invoke the rubber-duck-quiz skill. Claude asks you four kinds of questions about the diff (what / why / what-if / teach-it-back). Gaps get noted. Claude can draft the commit message and run git commit — that's encouraged — but the quiz is the gate: you must understand the change well enough to defend it before it lands.

2. Diff review is non-negotiable (weeks 1–2)

--dangerously-skip-permissions and other auto-accept modes are forbidden until week 3. You read every diff. Starting week 3 you can use scoped autonomy for well-tested subtasks, but you still review at the turn boundary.

3. Architecture diagram critique

Twice during the course (weeks 2 and 4), Claude generates a Mermaid diagram of your app. Your job is to find what's wrong or missing and commit the corrected diagram to docs/architecture.md. The instructor surfaces a few interesting corrections at the next session. The act of finding Claude's mistakes proves understanding more reliably than building does.

4. Async peer video review

Because the course is remote, peer learning happens through short videos rather than synchronous pairs. You'll record two ≤5 min explainer videos over the course — a PRD video after week 1 and an architecture walkthrough after week 3 — and commit them to your repo's README.md. The cohort is encouraged to review peers' videos between sessions; the instructor highlights standout ones at the start of class. How many peer videos you watch depends on cohort size — watching some is the floor.

5. Week 4 live demo, no slides

You screen-share your deployed app and walk through your repo. The instructor asks questions about your architecture and data model — it's a conversation, not an interrogation, and it's not a pass gate. Knowing this is coming from week 1 still changes how you code, because you want the conversation to go well.


Section 04The in-class demo project

Across all four weeks the instructor builds one small app live — the Community Events Board — so students see the full arc from zero to deployed.

The brief: A public website for a fictional small town that lists upcoming community events. Any resident can see the list. Approved admins can add events through a simple form. Events have a title, description, date, category, and optionally an image. There's a read-only JSON API so the local newspaper could pull the feed.

It's boring on purpose. The point is that it touches every major piece without getting in its own way:

FeatureCloudflare productIntroduced in
Public event list (static + data)Pages + WorkersWeek 1
Event storageD1Week 1
Admin add-event form, validationWorkers + VitestWeek 2
Image upload for event photosR2Week 3
Auto-categorize event from descriptionWorkers AIWeek 3
Per-event live attendee counterDurable ObjectsWeek 3 (light touch)
Scheduled cleanup of past eventsWorkers scheduled handlerWeek 4

Student projects don't have to use this same stack — the product-picker skill helps them choose for their own PRD. The demo project is a reference, not a template.


Section 05The starter repo & the skills

Every student starts with the same skeleton. The skeleton embeds the pedagogy — it doesn't just scaffold code, it scaffolds how you work.

What's in the starter

SkillUse it when
pm-interviewYou need to turn an idea into a PRD
design-briefBefore you write UI — pick mood, components, tokens, a11y
build-planBefore coding — slice the project into phases that fit one session each
rubber-duck-quizBefore every meaningful commit
explain-this-codeYou don't understand what Claude wrote
architecture-diagramGenerating + critiquing Mermaid for your app
cloudflare-product-pickerPicking the right CF product for a need

On hooks

Hooks let Claude Code run your commands automatically at lifecycle events. We use a Stop hook by default: when Claude finishes a turn, it runs npm test. Claude sees failures in the next turn and keeps working. This enforces TDD without per-edit noise. A stricter PostToolUse hook (runs after every edit) is provided as an optional upgrade.


Week 01
Foundations — Claude Code, Cloudflare, your first deploy

Goal: Every student ships a "hello world" to a public Cloudflare URL, leaves class with a working Claude Code setup, and has a PRD conversation started.

0:00 – 0:15

Welcome & the course contract

  • What this course is and isn't. Walk through the four pass criteria — attendance, public repo, deployed Cloudflare URL, the two videos — so students calibrate early.
  • Format reminders: online over Google Meet, sessions are recorded, excused absences are fine, recording covers any miss.
  • The "no --dangerously-skip-permissions until week 3" rule and why.
  • Set up the cohort Discord / Slack (for between-session help and sharing peer videos).
0:15 – 0:45

Claude Code tour (lecture + live demo)

  • What an agentic coding loop looks like vs. autocomplete (Copilot).
  • claude CLI tour: starting a session, where context comes from, the attention budget concept.
  • CLAUDE.md: what to put in it, what not to put in it. Live-edit the demo project's CLAUDE.md.
  • Skills: show the seven starter skills. Demo invoking explain-this-code on a snippet.
  • Plan mode (shift+tab). The permissions prompt. Reading diffs. Accept / reject.
  • Custom slash commands (/commit, /test) as quality-of-life.
0:45 – 1:10

Cloudflare tour (lecture + live demo)

  • What Cloudflare is, briefly (CDN, edge platform). What we care about: Workers, Pages, D1, R2, KV, Workers AI, Durable Objects, Queues. One sentence on each.
  • The llms-full.txt pattern: why we point Claude at it, and how (https://developers.cloudflare.com/llms-full.txt).
  • Live demo: npm create cloudflare@latest → pick Hono on Workers → wrangler deploy → public URL in under 10 minutes.
  • Add a D1 binding, write one row, read it back, deploy. This becomes the seed of the events board.
1:10 – 1:40

Guided exercise: ship your own hello-world

Everyone runs the same flow the instructor just did:

  1. Log into Cloudflare, run wrangler login.
  2. npm create cloudflare@latest my-first-worker.
  3. Customize the response to include their name.
  4. wrangler deploy. Share the public URL in the chat.

Instructor circulates. Typical blockers: Node version, Wrangler auth, billing email confirmation. Have a checklist printed out.

1:40 – 2:00

Claude-as-PM: start your PRD

  • Introduce the pm-interview skill. Live-demo a 5-minute excerpt of Claude interviewing the instructor about a fake idea.
  • Students clone the starter repo, open Claude Code, and invoke the skill. They start the interview — they won't finish in class. That's homework.
  • For students without an idea: tell them to use the interview to explore. For students with a real stakeholder: tell them to show the stakeholder the PRD draft before week 2.
  • Mention the sibling design-brief skill: not run in class, but it's the natural next step once the PRD's must-haves are stable. It's part of week 1 homework. Defaults are React + Headless UI + Tailwind.
  • Mention the third sibling, build-plan: also homework. Once PRD + DESIGN are stable, it slices the project into 3–6 phases sized to fit one Claude Code session each. Frame it as token-economy work — every minute spent on a good build plan saves an hour of context-thrashing later.

Homework before Week 2 (~4 hrs)

  • Finish the PRD. Arrive with docs/PRD.md filled in, at least through sections 1–5.
  • Run the design-brief skill once your PRD's must-haves are stable. Commit docs/DESIGN.md. Defaults are React + Headless UI + Tailwind — capture any deviation and the reason.
  • Bootstrap your project repo with create-cloudflare. Push it to a public Git repo. Deploy something — anything — to a public URL and link it from README.md.
  • Run the build-plan skill after bootstrapping. Commit docs/BUILDPLAN.md with 3–6 phases, each naming the doc sections and files Claude should load to execute it. The plan will drift — that's fine; you'll re-run the skill between weeks.
  • Copy the starter CLAUDE.md, README, and the five skills into your repo. Edit CLAUDE.md to reflect your project.
  • Record a ≤5 min PRD explainer video (Loom or YouTube unlisted) walking through your problem, your user, and your must-haves. Link it from README.md. Drop the link in the cohort channel — peers will be watching them before week 2.
  • Optional but encouraged: show your PRD (or video) to one person who'd use the app. Note what they said.
Week 02
Agentic workflow — planning, diffs, TDD, autonomy

Goal: Students leave running the full agentic loop — plan → propose → diff → test → commit — on their own project, with tests running automatically via a Stop hook.

0:00 – 0:15

Share-outs from the PRD videos

Instructor highlights 2–3 standout PRD videos posted between sessions and opens a brief discussion. Anyone who watched a peer's video shares one sharp question about that peer's "out of scope" section. Volunteers describe what changed in their own PRD after watching peers' videos.

0:15 – 0:50

The agentic loop, in depth

  • Plan mode: when to use it, what a good plan looks like, how to iterate on it before approving. Plan mode is for one feature; BUILDPLAN.md is for the whole project — the two compose.
  • Reading diffs: what to look for (hidden assumptions, swallowed errors, scope creep into unrelated files). A 3-minute diff-reading worked example on a deliberately-flawed AI change.
  • Context management: when to clear context, when to start a new session, how CLAUDE.md auto-loads. Use the current BUILDPLAN.md phase to drive what gets loaded — only the docs and files that phase names. /clear at every phase boundary.
  • Custom slash commands: a /review command that makes Claude critique its own last change.
0:50 – 1:15

TDD with Claude + hooks (lecture + live demo)

  • Why TDD matters even more with agents: tests are the contract the agent can't hallucinate past.
  • Vitest + @cloudflare/vitest-pool-workers setup. Show how tests run against the real Workers runtime.
  • Enable the Stop hook (.claude/settings.json). Demo: add a feature to the events board TDD-style. Claude's Stop hook runs the tests after each turn; Claude fixes a failure before the instructor intervenes.
  • Briefly contrast with the PostToolUse mode for students who want strict TDD.
1:15 – 1:45

Guided exercise: add a tested feature

On your own project:

  1. Open docs/BUILDPLAN.md. Work the next phase, not whatever's most fun. Load only the docs and files that phase names — start with /clear.
  2. Use plan mode for the feature inside the phase. The build-plan tells you what; plan mode tells you how.
  3. If the feature touches UI, read docs/DESIGN.md first. Plan and code should honor the components, tokens, and a11y floor captured there. If the brief is missing a decision the feature needs, update the brief before coding.
  4. Write the test first (with Claude's help, but you direct).
  5. Let Claude implement. Read every diff.
  6. Invoke rubber-duck-quiz before committing.
  7. Commit. Claude can write the message and run git commit — the rubber-duck-quiz is the gate, not the message itself.

Instructor circulates. Watch for students auto-accepting diffs — call it out gently.

1:45 – 2:00

Architecture diagram critique (first pass)

  • Each student invokes architecture-diagram. Claude produces a Mermaid diagram from their current code.
  • Solo, in class: critique your own diagram against your code. What's on the diagram that isn't in the code? What's in the code that isn't on the diagram? Annotate as you go.
  • Instructor circulates over screen share to spot-check critiques. Volunteers share one mistake Claude made.
  • Homework: commit the corrected diagram to docs/architecture.md.

Homework before Week 3 (~4 hrs)

  • Ship at least two more features with the full loop (plan → diff → test → quiz → commit). Each feature should map to a phase or sub-task in docs/BUILDPLAN.md.
  • Commit an updated docs/architecture.md with a Mermaid diagram you've personally audited against the code.
  • Re-run build-plan if reality has diverged from the plan. Append to the decision log; don't rewrite from scratch.
  • Identify one feature from your PRD that will need a Cloudflare product you haven't used yet. Bring the question to class.
Week 03
Tool choices — Cloudflare products, architectural decisions, scaling autonomy

Goal: Students justify adding at least one new Cloudflare product to their project, and begin using scoped autonomy (--dangerously-skip-permissions with an allowlist) for well-tested subtasks.

0:00 – 0:45

Cloudflare products, decided properly

  • A grounded tour: Workers, Pages, D1, R2, KV, Workers AI, Durable Objects, Queues, Workflows. For each: one real use case, one common misuse.
  • The decision tree in the cloudflare-product-picker skill. Walk through three example needs from student PRDs and pick products live.
  • Durable Objects in depth — what makes them different, when they're the right answer (per-entity state, coordinators, websockets), when they're overkill.
  • Live demo: add R2 image upload + Workers AI categorization to the events board. Each decision gets a one-sentence justification before code.
0:45 – 1:05

Scaling autonomy (lecture)

  • The autonomy spectrum: read every diff → auto-accept for a single file → auto-accept within an allowlist → YOLO mode.
  • When scoped autonomy is safe: green tests, narrow scope, reversible.
  • When it's not: anything touching secrets, migrations, deploys, or files you don't own.
  • Setting up Claude Code permission allowlists. The /permissions workflow.
  • What subagents are and why we're not using them in this course (kept in reserve for self-study).
1:05 – 1:35

Guided exercise: justify, then add

On your own project:

  1. Open your PRD feature that needs a new Cloudflare product.
  2. Invoke cloudflare-product-picker. Have Claude walk you through the decision.
  3. Paste Claude's written justification into your PRD under the tech-shape section. Edit it — don't just accept.
  4. Implement the feature. You may use scoped auto-accept for the test-driven parts if your Stop hook is green.
  5. Rubber-duck-quiz before committing.
1:35 – 2:00

Architecture walkthrough recording

Use the time to draft and record your ≤5 min architecture walkthrough video: screen share over your repo, narrate the major components, the data model, and the one decision you'd most want a reviewer to push back on.

Instructor drops into breakout rooms to listen in and coach. Commit the link to README.md and post it in the cohort channel — peers will watch before week 4.

End-of-class share: one volunteer plays a 30-second clip of their video and describes the part they're least sure about.

Homework before Week 4 (~4 hrs)

  • Finish the project to the Must-have bar from your PRD. Deploy to Cloudflare.
  • Record your ≤5 minute demo video (YouTube unlisted or Loom — link in README). This is distinct from the architecture walkthrough: show the deployed app doing real things, then open 2–3 files and explain the choices behind them.
  • Regenerate the architecture diagram. Commit it. If it now differs from week 2's, briefly note why.
  • Write a one-paragraph "what I'd do differently" in the README. This is real engineering reflection, not a formality.
Week 04
Ship & demo — polish, production concerns, live walkthroughs

Goal: Every student demos a publicly-deployed project, answers unscripted questions about their code, and leaves with a realistic plan for continuing past the course.

0:00 – 0:40

Production concerns (focused lecture)

  • Secrets: wrangler secret put vs .dev.vars. Never commit either.
  • Environments: preview, staging, production. Why you want at least two.
  • Custom domains on Cloudflare — 5-minute live setup.
  • Limits and cost awareness: free tier generosity, and what happens when a student project goes viral.
  • What to do when something breaks in production (wrangler tail, rollback, a 5-minute incident drill).
0:40 – 1:20

Extended project time

Students finalize deploys, fix last bugs, polish the README and the walkthrough video. Instructor circulates aggressively — last chance for unblocking. Students who finish early help others.

1:20 – 1:55

Live demos

Target ~3 minutes per student with a cohort of 12. Each student screen-shares and:

  1. Shows the public URL. Does one real action on it in front of everyone.
  2. Shows their architecture diagram. Walks through the single most interesting decision.
  3. Answers instructor questions about the architecture and the data model. The instructor may also open a file and ask about it.

No slides. No pre-written demo script. The live demo is a conversation, not a pass gate — pass criteria (attendance, public repo, deployed Cloudflare URL, the two videos linked from README) should already be satisfied by now. If a student struggles on a question, coach them through it — it's still a teaching moment.

1:55 – 2:00

Where to go from here

The closing five minutes: ideas for continuing. Turning a project into a side business. Reaching out to the stakeholder with an invoice. Joining open-source Cloudflare projects. Teaching what you learned to a friend. The course ends; the work doesn't.