72  72. Following the Tutorial, with Claude Code for Help

The tutorial steps that follow tell you what to do, and you do it yourself: you type every command and do every step on the websites, as developers did before AI tools. That’s how you learn what each piece of the app does and how the pieces connect. You don’t have to get stuck alone, though: when something doesn’t work, you show Claude Code what happened, and it explains the problem and tells you what to type or click. This page sets that up. Classes 10–12: Start here has the same setup in more detail, and its step pages are the most up to date.

72.1 Your workspace

As of Oct 13, 2026 · Official docs: Use Claude Code in VS Code

Use VS Code, a free code editor, with the Claude Code extension. One window then shows:

  • the project’s files on the left, so you can open .env.local and paste your keys into it yourself;
  • a terminal at the bottom (Terminal > New Terminal), where you type every command, such as npm install;
  • the Claude Code panel, where you ask Claude for help when you’re stuck.

You can also ask Claude in a separate terminal window instead (type claude there). It is the same Claude Code, and both share your conversation history (see Claude Code Beyond the Terminal).

72.2 Keep your keys in the worksheet

You’ll collect about 25 IDs, web addresses and keys from Supabase, Google, OpenAI, Stripe and Vercel. The Task App Setup Worksheet (Excel) keeps them in one place: you type each value once on its My Info sheet, and its Commands sheet builds the exact lines you copy into .env.local, the terminal and the websites.

The worksheet holds secret keys

Keep it in the project folder (~/projects/full-stack-demo-app), next to the task-app code folder and not inside it, so Git can never upload it to GitHub. Don’t email it, post it, or show it while sharing your screen. Claude may read it when you ask for help: in this course that’s fine (see “Keys and Claude” below).

72.3 Keep a screenshot log (required)

Besides the worksheet, keep a Word document with a screenshot of every screen where you enter or copy a setting: each form before you click Create or Save, each page that shows an ID, a web address or a key, and every error message. This is required: you hand it in to your instructor as it is, without covering anything, and when something doesn’t work, it’s the fastest way for you, Claude or your instructor to find the setting that went wrong.

Keep both the worksheet and the log up to date. The worksheet is for a quick look at your values; the log keeps the original screenshots, which show exactly what each screen said.

  • Start from the template, Task App Setup Screenshots (Word). It has a heading for each screenshot to take. Keep it next to the worksheet, in ~/projects/full-stack-demo-app, not inside the task-app folder.
  • When a website shows a key only once (Google’s client secret, the OpenAI key, Stripe’s keys), paste the screenshot into the log first, then copy the key into the worksheet: if you close the window by mistake, the screenshot still has it.
  • Paste each screenshot under its heading. For a screen the template doesn’t list (an error message, for example), add a line saying where it is from and what it shows, for example Classes 10–12 (D), step 4: the OAuth client form, filled in, before Create.
  • Paste a screenshot with Ctrl+V (Mac: Cmd+V). To shrink a large one, drag a corner of the picture.
  • Any program that saves .docx files works: Word, LibreOffice Writer, or Pages (File > Export To > Word). Don’t use Google Docs or another online editor for this file: that would upload your keys to the internet.
The screenshot log can show secret keys too

Some screens show a secret key or password. Keep the log as safe as the worksheet: same folder, not posted or shared except when you hand it in the way your instructor tells you. Claude may read it when you ask for help.

72.4 Taking screenshots

A screenshot of the whole screen shows everything, including other windows and your browser tabs. A screenshot of one window shows just that window, which is usually what you want: it’s easier to read, and it doesn’t show what else you have open.

  • Whole screen: press Cmd+Shift+3.
  • One window: press Cmd+Shift+4, then press Space: the pointer turns into a camera. Click the window.
  • Part of the screen: press Cmd+Shift+4 and drag across the part you want.

The picture is saved on your Desktop, named Screenshot with the date and time. To copy it instead, so that you can paste it straight into Word, add Control to any of these (for example Cmd+Control+Shift+4).

  • Whole screen: press Windows+PrtScn (PrtScn is the Print Screen key). The screen dims for a moment, and the picture is saved in Pictures > Screenshots.
  • One window: click the window, then press Alt+PrtScn. The picture is copied, not saved: paste it into Word right away.
  • Anything, with the Snipping Tool: press Windows+Shift+S. At the top of the screen, choose Window or Full screen (or Rectangle to drag across a part), then click. The picture is copied, and Windows 11 also saves it in Pictures > Screenshots.

On a laptop, PrtScn may share a key with another key; you might need to hold Fn too.

These are the keys in Ubuntu and other systems with the GNOME desktop:

  • Whole screen: press Shift+PrtScn.
  • One window: click the window, then press Alt+PrtScn.
  • Choose: press PrtScn alone. A toolbar appears: choose Selection, Screen or Window, then click the round button.

The picture is saved in Pictures > Screenshots and also copied, so you can paste it straight into Word. Other desktops have their own keys; search for “screenshot” in your system’s settings.

To show a screenshot to Claude, paste it into Claude’s prompt box (Ctrl+V; on Windows Alt+V), drag the picture file in, or type the file’s path (Work with images). Claude reads small print well, so you can zoom the page out (Ctrl and -, on a Mac Cmd and -) to fit a whole page into one screenshot.

72.5 When you’re stuck: ask Claude

Open Claude Code in your project folder, in VS Code’s Claude panel or in a terminal of its own, in Manual mode, so that Claude must ask you before it runs a command or changes a file:

cd ~/projects/full-stack-demo-app
claude --permission-mode manual

Then type /model sonnet in Claude’s chat box (see the next section), and paste the help prompt from “When you’re stuck: ask Claude” on the Classes 10–12: Start here page. The prompt tells Claude:

  • what the project is, where its code is (your fork of the course’s repository, y-rosenthal/yr-2026-full-stack-demo), and where the course notes are;
  • that you do every step yourself: Claude doesn’t run commands or change files; it reads the step you’re on, explains what went wrong, and tells you what to type or click;
  • that it may read your worksheet and screenshot log, to see which steps you’ve done and what you entered;
  • to explain things for someone with your background: how to do each thing (take a screenshot, copy text from the terminal, find a menu), not just what to do.

Then ask your question. Say which step you’re on; paste the command you typed and everything it printed, as text (select it in the terminal, copy, paste); for a website, paste a screenshot; and say what you expected. If an answer goes too fast, say “explain more”; if it explains something you already know, say “I already know how to do that”. Claude adjusts.

If Claude asks permission to run a command, choose Yes only if the command just looks at something (for example, reads your worksheet). If it would do one of your steps or change anything, choose No and ask it to tell you what to type instead. See Permissions, Modes, and Safety.

72.5.1 Keys and Claude

In this course it’s fine for Claude to see your keys, in your worksheet or in what you paste: they belong to a practice app, with test-mode payments and a $5 limit on OpenAI. In a real project, keep secret keys out of AI chats and anything else you share (Publishable and Secret Keys).

72.6 Don’t run out of usage

As of Oct 13, 2026 · Official docs: Manage costs effectively · Model configuration

The Pro plan has a usage limit that resets every five hours, plus a weekly limit, and this project has many steps:

  • Use Sonnet (/model sonnet) for the whole project. On Pro, Claude Code’s default model is Opus, which uses up your limit faster.
  • Switch to Opus (/model opus) only when Sonnet fails to fix the same error twice, then switch back.
  • Check your usage with /usage.
  • Start fresh for a new problem with /clear, then paste the help prompt again.
  • Paste only the command and the last 20 or so lines of a long error.
  • Put related requests in one prompt, as a numbered list. Every message makes Claude re-read the whole conversation, so one message with five requests costs less than five messages.
  • Send one zoomed-out screenshot instead of several: Claude reads small print well. But copy exact values (keys, IDs) as text; never rely on a picture of them.

The full list, including why not to use Fable or extra usage on Pro, is in “Using Claude Code without running out of usage” on the Classes 10–12: Start here page and in Context, Models, Effort, and Usage in Claude Code.

Practice Questions

Easy

Question 1 · Multiple choice

Why do you start Claude Code with --permission-mode manual for this project?

  1. It makes Claude use less of your usage limit
  2. Claude must ask before it runs a command or changes a file, so it can’t do a step for you by accident
  3. It stops Claude from reading files
  4. It’s required to use the Sonnet model

b. You do every step yourself; Claude only helps. In Manual mode, Claude stops and asks before any command or file change, and you answer No unless the command only looks at something. It doesn’t save usage (a), Claude still reads files, which it needs to explain errors (c), and the model is chosen separately with /model (d).

Question 2 · Short answer

When you ask Claude for help with a failed terminal command, what should you give it, and why as text rather than a screenshot?

Which step you’re on, the command you typed, everything it printed, and what you expected. Paste the command and its output as text (select, copy, paste): Claude then reads every character exactly, while a screenshot can be misread (l or I, 0 or O).

Question 3 · True or false

The setup worksheet should be kept inside the task-app folder, so it’s backed up to GitHub with the code.

False. The worksheet holds secret keys. It belongs in full-stack-demo-app, next to task-app and not inside it, so Git, which only tracks files inside task-app, can never upload it to GitHub.

Question 4 · Write the command

Which command, typed in Claude’s chat box, switches Claude Code to the Sonnet model?

/model sonnet. Sonnet handles every step of this project and uses up the Pro plan’s limit more slowly than Opus.

Medium

Question 5 · Scenario

Maria’s npx supabase db push fails with an error she doesn’t understand. She wants Claude’s help. What does she do, in what order?

  1. In a terminal of its own (or VS Code’s Claude panel), start Claude Code in her project folder in Manual mode:

    cd ~/projects/full-stack-demo-app
claude --permission-mode manual

  2. Type /model sonnet, and paste the help prompt from the Start here page.

  3. Tell Claude she’s on step G, paste the command and its whole output as text, and say what she expected.

  4. Type the fix herself, as Claude explains it.

Question 6 · Short answer

Name three things the help prompt tells Claude about how to help you.

Any three of: don’t run commands that change anything, and don’t create or change files, because you do every step yourself; it may read the app’s code, the course notes, your worksheet and your screenshot log, and must ask before running a command just to read something; read the step you’re on first; explain in plain English what went wrong and tell you exactly what to type or click, one thing at a time; explain how to do things for someone with your background, and give more or less detail when you say so; don’t change the app’s code, but explain if the code seems wrong.

Question 7 · Multiple choice

While helping you, Claude asks permission to run npm install itself. Which answer should you choose in this project?

  1. Yes
  2. Yes, and switch to auto mode
  3. No, then ask Claude to tell you what to type
  4. Press Shift+Tab

c. In this project you type every command yourself, so you learn what each one does. Answer No, and ask Claude to tell you the command and what it does; then type it in your own terminal. Yes (a) would let Claude do the step for you, and auto mode (b) would let it run commands without asking at all. Shift+Tab (d) switches modes, which you don’t want.

Hard

Question 8 · Scenario

Sam’s Claude session is long, and after the Stripe step he hits his five-hour usage limit. Give three things he could have done to use less.

Any three of: use Sonnet instead of the default Opus; switch to Opus only when stuck; run /clear when he starts on a new problem, so Claude doesn’t re-read the whole conversation with every message; paste only the command and the last lines of long errors; check /usage to see how much is left.

Question 9 · Long answer

In this course, Claude may read your worksheet, which holds your secret keys. Why is that acceptable here, and what would you do differently in a real project?

Anything Claude reads becomes part of the conversation, which is sent to Anthropic’s servers and may be saved in the session history, so the keys are no longer only in your hands. Here the risk is small: the app is for practice, payments are in Stripe’s test mode, and OpenAI can’t spend more than the $5 limit. In exchange, Claude can see exactly what you entered and spot a wrong value quickly. In a real project, with real customers and money, you’d keep secret keys out of AI chats: show Claude the error messages and settings without the keys, and paste the keys yourself where they belong.

Question 10 · Scenario

Sam asks Claude why his Edge Function fails, and Claude’s answer is a long list of technical steps he doesn’t understand. Another time, Claude spends three paragraphs explaining how to take a screenshot, which he already knows. What should he say in each case?

In the first case: “Explain more, one step at a time” (or ask what a specific word or command means). In the second: “I already know how to do that.” The help prompt tells Claude to adjust its level of detail when he says so, for the rest of the conversation.

© 2025-2026 Y. Rosenthal. All rights reserved.