Classes 10–12: The Task App, Start Here

Classes 10–12, starting Tuesday, October 13, 2026

About the “Class Meetings” section

This section has one page for each meeting of our class this semester. Each page lists the date, the topic, and what we did, with links to the chapters that explain the material. Use it to review, or to catch up on a class you missed.

Topic: We start building the full-stack “task app” from the tutorial video. I demonstrate each step at the front of the room while you do the same steps on your own laptop. You type every command and do every step on the websites yourself, following these pages, as developers did before AI tools: that’s how you learn what each piece does. When you get stuck, ask Claude for help (When you’re stuck: ask Claude). You won’t finish today. Pick up where you left off at home or in our next class, as I’ll announce.

Where this fits

This project is the first of three:

Build the app from the video (starting today). The code is already written; your job is to set up the services it depends on, run it on your computer, and put it online.
Change it. You’ll make a significant change to the app’s database and update the app to match.
Build your own. You’ll build an app for your own business idea from scratch, using the same architecture (Next.js, Supabase and Vercel).

The tutorial chapters, starting with Tutorial - intro and Project Architecture, explain each piece in more depth. This page and the step pages it links to are the checklist to follow. Where they differ from those chapters, follow these pages: the chapters were written for an older version of these services and are being updated.

What you need: accounts and costs

Service	What the app uses it for	Cost
GitHub	Stores your copy of the code	Free
Claude (Pro plan)	Claude Code, for help when you’re stuck	You already have it
Supabase	Database, user logins, image storage, Edge Functions	Free plan
Google Cloud	“Sign in with Google”	Free
OpenAI API	Suggests a label for each new task	About $5, prepaid (required)
Stripe	Subscription payments, in test mode (fake card numbers, no real money)	Free
Vercel	Puts the app online at the end	Free (Hobby plan)

The OpenAI charge is the only real cost. Step E shows you how to make sure you can never spend more than the $5 you put in.

Use Google Chrome, and expect the websites to look a little different

Use Google Chrome for every website in these steps. The steps were tested in Chrome (version 152, October 2026); other browsers usually work, but when something goes wrong, Chrome is one less thing to wonder about. To see your version, open Chrome’s menu ⋮ (top right), then Help > About Google Chrome. That page also installs any update; click Relaunch if it asks.

The websites change often. Supabase, Google, OpenAI, Stripe and Vercel rename buttons and move menus every few months, so a screen may not match the text or the screenshots here exactly. When that happens, look for the same words nearby, use your judgement, and if you’re stuck, take a screenshot and ask Claude what to click (When you’re stuck). Then tell your instructor, so the book can be fixed.

Download the setup worksheet

Keep both up to date as you go. The Excel worksheet is for a quick look: every value on one sheet, and the lines it builds for you to copy. The Word log keeps the original screenshots, so that when something goes wrong you (and your instructor) can see exactly what each screen said.

You will collect about 25 IDs, web addresses and keys from these websites. The worksheet keeps them in one place. It opens in Excel, Numbers or LibreOffice. It has three sheets:

Start Here explains the workbook and its safety rules.
My Info has one row per item. Fill in the yellow cells as you go through the steps below. The Example column shows what each value looks like (the examples are fake), Where to find it tells you where on the website to look, and Where you use it tells you where it goes next. Gray cells fill themselves in: for example, once you type your Supabase project ref, the worksheet builds your Supabase URL and your Google callback URL. Type Yes in the Done? column as you finish each row.
Commands builds, from your values, the exact lines you copy: the lines of your .env.local file, the terminal commands with your own keys in them, the SQL for one Supabase step, and the addresses you paste into Google, Stripe, Supabase and Vercel. Until a line’s values are filled in, it says “(fill in … on My Info first)”. Copy one cell at a time, then paste it where the Where column says (pasting into a terminal is explained in Where to type commands).

Step B1 below tells you where to keep the worksheet.

The worksheet holds secret keys

Anyone with your secret keys can use your accounts, and the OpenAI key can cost you money. Keep the worksheet in the full-stack-demo-app folder, next to the task-app code folder and not inside it (Step B1), so Git can never upload it to GitHub. Don’t email it, post it, or show it while sharing your screen. Account passwords don’t go in it; keep those in your browser’s password manager.

Keep a screenshot log (required)

Besides the worksheet, keep the Word log, taskApp-setupScreenshots-v001.docx (downloaded above), next to it. It has a place for each screenshot. Put in it a screenshot of every screen where you enter or copy a setting (each form before you click Create or Save, and each page that shows an ID, an address or a key), plus every error message, with a line above each saying which step it’s from. This is required: when something doesn’t work, the log shows which setting went wrong. You hand it in as it is: don’t cover anything, not even the keys. How to keep it, and how to take a screenshot of the whole screen or of one window on Mac, Windows and Linux: Keep a screenshot log and Taking screenshots.

Your workspace: VS Code and Claude Code

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

We’ll use VS Code, a free code editor. One window shows:

the project’s files on the left, so you can open .env.local and paste keys into it yourself;
a terminal at the bottom (Terminal > New Terminal), where you type every command, such as npm install (see the next section);
the Claude Code panel (from the Claude Code extension, Step A5), where you ask Claude for help when you’re stuck. Claude doesn’t do the steps for you.

If you prefer, you can ask Claude in a separate terminal window next to VS Code instead (type claude there). It is the same Claude Code, and both share your conversation history (Claude Code Beyond the Terminal).

Where to type commands: the terminal

A terminal is a window where you type commands instead of clicking. The program inside it that reads your commands is called a shell. In this course the shell is Bash: on Windows you get it with Git, as Git Bash. Macs use zsh by default, which works the same as Bash for every command on this page. (More in Getting Bash on Your Computer (Mac and Windows).)

How to read this page:

A gray box with a copy button in its top right corner is a command, for example:
```
node --version
```
Click into a terminal, type the command (or copy and paste it), and press Enter. Then wait until the prompt (the line ending in % or $) comes back before you type the next command.
The boxes under When you’re stuck: ask Claude are not commands. You paste them into Claude’s chat box.
Lines that start with /, such as /model sonnet, are Claude Code commands. Type them in Claude’s chat box too, not in the terminal.
Ctrl+C in a terminal stops the command that is running (for example the app’s server). It’s Ctrl+C on every computer, including Macs.
A terminal where Claude is running is busy with Claude. Type your commands in a different terminal (a new window or tab).
Commands for the app itself (from Step B5 on) must run in the app’s folder, task-app. Before you type one, go into that folder:
```
cd ~/projects/full-stack-demo-app/task-app
```
cd means “change directory”: go into a folder. After cd, the following commands run in that folder. It’s harmless if you’re already there, so when in doubt, type it again. To check where you are, type pwd (“print working directory”): it prints the folder’s full path, which should end in /task-app. Don’t go by the prompt: it looks different on every computer (The prompt explains why, and how to make yours the same as everyone’s).

You can use two kinds of terminal: your computer’s terminal app, and the terminal built into VS Code (described after these tabs). Until VS Code is installed (Step A5), use the terminal app.

The Terminal app: press Cmd+Space, type Terminal, and press Enter. The prompt ends in %, which means zsh.
VS Code’s terminal: Terminal > New Terminal. It also runs zsh.
Paste into either one with Cmd+V.

The Git Bash app: open the Start menu, type Git Bash, and press Enter. The prompt ends in $.
VS Code’s terminal: Terminal > New Terminal, after Step A5 makes Git Bash its default. The label at the right side of the terminal panel should say bash. If it says powershell, redo the last part of Step A5.
Paste: in VS Code’s terminal, Ctrl+V. In the Git Bash app, Ctrl+V does not paste: use Shift+Insert, or right-click and choose Paste.
Don’t use PowerShell or Command Prompt for this page. Their prompts look like PS C:\Users\sam> or C:\Users\sam>, and the commands here are written for Bash. (The one exception is installing Claude Code, in Step A3.)

The Terminal app: press Ctrl+Alt+T (on Ubuntu and many other versions of Linux), or search your apps for Terminal. It runs Bash.
VS Code’s terminal: Terminal > New Terminal. It also runs Bash.
Paste into either one with Ctrl+Shift+V. (Plain Ctrl+V doesn’t paste in a Linux terminal.)

Reading a command

Don’t just copy commands: on this page each one is explained piece by piece, so you know what you’re asking your computer to do. Every command has the same parts. Take this one, from Step 0:

mkdir -p ~/projects/full-stack-demo-app

The first word is the command, the program to run. mkdir is short for “make directory” (a directory is a folder).
Words that start with - or -- are options: they change how the command works. -p tells mkdir to also make any missing folders on the way (here, projects), and not to complain if the folder already exists.
The rest are arguments: what the command works on. Here, the folder to make.
Spaces separate the pieces. That’s why our folder and file names have no spaces in them.
~ means your home folder: /Users/maria on Maria’s Mac, /c/Users/sam in Sam’s Git Bash on Windows, and /home/ followed by your user name on Linux.
/ separates folder names. ~/projects/full-stack-demo-app means the folder full-stack-demo-app, inside projects, inside your home folder. That is a path: directions to a folder or file.
Capital letters matter. task-app and Task-App are different names.

Tip: type the first few letters of a folder or file name and press Tab. The shell finishes the name for you, with no typos.

The terminal inside VS Code

VS Code has a terminal built in, at the bottom of its window, so you can type commands right next to your files and Claude. To open one, use any of these:

the menu Terminal > New Terminal;
the keys Ctrl+` (Ctrl and the backtick key, usually to the left of 1; it’s Ctrl on every computer, including Macs). The same keys hide and show the terminal panel;
the Command Palette: Terminal: Create New Terminal (see the next section).

It is not a different kind of terminal. It runs the same shell as your terminal app, and every command on this page works the same way in both:

VS Code’s terminal runs zsh, the same shell as the Terminal app. The prompt ends in %.

VS Code’s terminal runs Git Bash, the same as the Git Bash app, once you make Git Bash its default in Step A5. (Until then it runs PowerShell.) The label at the right side of the terminal panel says bash.

VS Code’s terminal runs Bash, the same shell as the Terminal app.

A few things to know:

A new terminal starts in the folder that is open in VS Code. For this project that’s full-stack-demo-app (Step B4), so type cd task-app before commands for the app.
The + button at the top right of the terminal panel opens another terminal, for example one for the app’s server and one for your own commands. The trash-can icon closes a terminal.
Paste with Cmd+V on a Mac, Ctrl+V on Windows, and Ctrl+Shift+V on Linux.

VS Code’s Command Palette

The Command Palette is a search box for every command in VS Code, so you don’t have to hunt through menus. Open it with the keys for your computer:

Press Cmd+Shift+P, or choose View > Command Palette.

Press Ctrl+Shift+P, or choose View > Command Palette.

A box opens at the top of the window. Type a few words of what you want (for example new terminal), use the arrow keys to pick the command, and press Enter. Press Esc to close it. Commands you can use on this page:

To do this	Type in the Command Palette
Open the `full-stack-demo-app` folder	`File: Open Folder`
Open a new terminal	`Terminal: Create New Terminal`
Choose which shell the terminal uses (Windows: Git Bash)	`Terminal: Select Default Profile`
Find and install extensions	`Extensions: Install Extensions`
See the Claude Code extension’s commands	`Claude`

Using Claude Code without running out of usage

As of Oct 13, 2026 · Official docs: Manage costs effectively · Model configuration · Claude Fable models on your plan

The Pro plan has a usage limit that resets every five hours, plus a weekly limit. This project takes many steps, so spend your usage wisely:

Use Sonnet. On Pro, Claude Code’s default model is Opus 5.5, which uses up your limit faster. Type /model sonnet at the start of each session. Sonnet 5.5 handles every step of this project.
Switch to Opus only when you’re stuck. If Sonnet fails to fix the same error twice, try /model opus for that problem, then switch back.
Haiku (/model haiku) is the cheapest. It’s fine for quick questions such as “what does this error mean?”
Never use Fable on the Pro plan. Fable isn’t included in Pro; it is billed separately as extra usage. Don’t turn on extra usage (usage credits).
Keep effort at medium (the default). Check it with /effort.
Check your usage with /usage. It shows how much of your five-hour and weekly limits you’ve used and when they reset.
Start fresh for a new problem. /clear empties the conversation, so Claude doesn’t re-read a long history with every message. Then paste the help prompt again (When you’re stuck).
Don’t paste huge error logs. Paste the command you typed and the last 20 or so lines of what it printed.
Put related requests in one prompt. Instead of five messages (“do A”, then “now B”, …), send one with a numbered list: “1. … 2. … 3. …”. Claude works out the order and often does several at once. It saves usage because every message makes Claude re-read the whole conversation so far, and every answer adds to it: one message with five requests means one re-read and one answer, instead of five of each. Keep the requests related, send separately anything that depends on what you decide after seeing an earlier result, and check at the end that each one was done.
One zoomed-out screenshot beats several. Claude reads small print well, so zoom the page out (Ctrl and -, on a Mac Cmd and -) until everything you want to show fits on the screen, and send one screenshot. To give Claude a picture, paste it into the prompt (Ctrl+V; on Windows Alt+V), drag the file in, or type its path (Work with images). If the text gets so small that Claude says it can’t read it, zoom back in on that part. Never rely on a screenshot for an exact value such as a key or an ID: one misread character (l or I, 0 or O) breaks it, so copy the text instead (and never show Claude a secret key at all).
You run the commands, not Claude. If Claude asks permission to run a command or change a file, answer No and ask it to tell you what to type (If Claude asks permission).

More details are in Context, Models, Effort, and Usage in Claude Code.

Before the steps: make the project folder

Everything for this project goes in one folder, full-stack-demo-app, inside the projects folder in your home folder. Make it now:

Open a terminal: the Terminal app on a Mac or Linux, Git Bash on Windows (see Where to type commands).
Type each command and press Enter:
```
mkdir -p ~/projects/full-stack-demo-app
```
```
cd ~/projects/full-stack-demo-app
```
What the pieces mean (more in Reading a command):
- mkdir -p ~/projects/full-stack-demo-app: mkdir (“make directory”) makes a folder. -p also makes the missing folder projects on the way, and doesn’t complain if the folders already exist. The last part is the path of the folder to make.
- cd ~/projects/full-stack-demo-app: cd (“change directory”) goes into that folder, so the next commands run there. (To check, type pwd: it prints a path that ends in full-stack-demo-app.)

Then start with Step (A).

When you’re stuck: ask Claude

You do every step yourself. When something doesn’t work, or you don’t understand a screen or a message, ask Claude. Claude explains what went wrong and tells you what to type or click; you do it.

Start a help session (once per sitting, or after /clear):

Open Claude Code in your project folder. In VS Code (with full-stack-demo-app open, Step B4), click the Claude icon to open the Claude Code panel. Or, in a terminal of its own:
```
cd ~/projects/full-stack-demo-app
```
```
claude --permission-mode manual
```
--permission-mode manual starts Claude in Manual mode: Claude must ask you before it runs a command or changes a file, so it can’t do a step for you by accident. The line under Claude’s chat box says manual mode on. In VS Code, check the mode indicator at the bottom of Claude’s prompt box; if it doesn’t say Manual, click it and choose Manual.
In Claude’s chat box, type /model sonnet and press Enter.
Paste the help prompt for your computer and press Enter. The Copy prompt button above it copies all of it:

I'm on a Mac.

I'm a business student with limited programming and technical background,
doing my course's
full-stack web app project by hand. I type every command and do every website
step myself, following my course notes, which start here:
https://y-rosenthal.github.io/aiasd-in-progress/f26-class10to12-00-startHere-v001.html
Their section "The steps" links to one page per step, (A) to (L).

The app is the "task app" from a tutorial video. My copy is a fork of
github.com/y-rosenthal/yr-2026-full-stack-demo, named task-app, in the folder
~/projects/full-stack-demo-app/task-app. It uses Next.js for the web pages;
Supabase for the database, login, file storage and Edge Functions; Google for
"Sign in with Google"; the OpenAI API for task labels; Stripe in test mode for
payments; and Vercel to put the app online.

I'll ask you when I'm stuck. I'll tell you which step I'm on, and paste the
command I typed and what it printed, or a screenshot.

How to help me:
- Don't run commands that change anything, and don't create or change files:
  I do every step myself. You may read the app's code, my course notes, and
  the files where I record my progress, in ~/projects/full-stack-demo-app: my
  worksheet (taskApp-setupWorksheet-v001.xlsx) and my screenshot log
  (taskApp-setupScreenshots-v001.docx). If you need a command just to read
  something, tell me what it does and ask first.
- First read the step I'm on in my course notes. Then explain in plain English
  what went wrong, and tell me exactly what to type or click to fix it, one
  thing at a time. If you need more information, tell me what to run or where
  to look, and I'll paste the result.
- Explain things for someone with my background: tell me how to do each
  thing, not just what to do (for example, how to take a screenshot, how to
  copy text from the terminal, or where to find a menu), and what each command
  does. If I say "explain more" or "I already know how to do that", give me
  more or less detail from then on.
- Don't change the app's code. If the code itself seems wrong, explain why, and
  I'll tell my instructor.

I'm on Windows, and I use Git Bash.

I'm a business student with limited programming and technical background,
doing my course's
full-stack web app project by hand. I type every command and do every website
step myself, following my course notes, which start here:
https://y-rosenthal.github.io/aiasd-in-progress/f26-class10to12-00-startHere-v001.html
Their section "The steps" links to one page per step, (A) to (L).

The app is the "task app" from a tutorial video. My copy is a fork of
github.com/y-rosenthal/yr-2026-full-stack-demo, named task-app, in the folder
~/projects/full-stack-demo-app/task-app. It uses Next.js for the web pages;
Supabase for the database, login, file storage and Edge Functions; Google for
"Sign in with Google"; the OpenAI API for task labels; Stripe in test mode for
payments; and Vercel to put the app online.

I'll ask you when I'm stuck. I'll tell you which step I'm on, and paste the
command I typed and what it printed, or a screenshot.

How to help me:
- Don't run commands that change anything, and don't create or change files:
  I do every step myself. You may read the app's code, my course notes, and
  the files where I record my progress, in ~/projects/full-stack-demo-app: my
  worksheet (taskApp-setupWorksheet-v001.xlsx) and my screenshot log
  (taskApp-setupScreenshots-v001.docx). If you need a command just to read
  something, tell me what it does and ask first.
- First read the step I'm on in my course notes. Then explain in plain English
  what went wrong, and tell me exactly what to type or click to fix it, one
  thing at a time. If you need more information, tell me what to run or where
  to look, and I'll paste the result.
- Explain things for someone with my background: tell me how to do each
  thing, not just what to do (for example, how to take a screenshot, how to
  copy text from the terminal, or where to find a menu), and what each command
  does. If I say "explain more" or "I already know how to do that", give me
  more or less detail from then on.
- Don't change the app's code. If the code itself seems wrong, explain why, and
  I'll tell my instructor.

I'm on Linux.

I'm a business student with limited programming and technical background,
doing my course's
full-stack web app project by hand. I type every command and do every website
step myself, following my course notes, which start here:
https://y-rosenthal.github.io/aiasd-in-progress/f26-class10to12-00-startHere-v001.html
Their section "The steps" links to one page per step, (A) to (L).

The app is the "task app" from a tutorial video. My copy is a fork of
github.com/y-rosenthal/yr-2026-full-stack-demo, named task-app, in the folder
~/projects/full-stack-demo-app/task-app. It uses Next.js for the web pages;
Supabase for the database, login, file storage and Edge Functions; Google for
"Sign in with Google"; the OpenAI API for task labels; Stripe in test mode for
payments; and Vercel to put the app online.

I'll ask you when I'm stuck. I'll tell you which step I'm on, and paste the
command I typed and what it printed, or a screenshot.

How to help me:
- Don't run commands that change anything, and don't create or change files:
  I do every step myself. You may read the app's code, my course notes, and
  the files where I record my progress, in ~/projects/full-stack-demo-app: my
  worksheet (taskApp-setupWorksheet-v001.xlsx) and my screenshot log
  (taskApp-setupScreenshots-v001.docx). If you need a command just to read
  something, tell me what it does and ask first.
- First read the step I'm on in my course notes. Then explain in plain English
  what went wrong, and tell me exactly what to type or click to fix it, one
  thing at a time. If you need more information, tell me what to run or where
  to look, and I'll paste the result.
- Explain things for someone with my background: tell me how to do each
  thing, not just what to do (for example, how to take a screenshot, how to
  copy text from the terminal, or where to find a menu), and what each command
  does. If I say "explain more" or "I already know how to do that", give me
  more or less detail from then on.
- Don't change the app's code. If the code itself seems wrong, explain why, and
  I'll tell my instructor.

Ask your question. Each time, give Claude what it needs to see what you see:

Which step you’re on, for example “I’m on step G”.
For a terminal command: the command you typed and everything it printed, as text. Select it in the terminal with the mouse, copy it, and paste it into Claude’s chat box. Text is better than a screenshot: Claude reads every character exactly. (In VS Code’s Claude panel, you can instead type @terminal: and choose the terminal, and Claude reads its output.)
For a website: a screenshot. Paste it into Claude’s chat box with Ctrl+V (on Windows Alt+V), or drag the image file in.
What you expected and what happened instead.

Claude can also look at your worksheet and your screenshot log, to see which steps you’ve done and what you entered. Say, for example, “Look at my screenshot log for step D.”

Tell Claude how much to explain. If an answer goes too fast, say “explain more” or “one step at a time, please”. If it explains something you already know, say “I already know how to do that”. Claude adjusts for the rest of the conversation.

Keys in Claude’s chat

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).

If Claude asks permission

In Manual mode, Claude stops and asks “Do you want to proceed?” before it runs a command or changes a file. Read what Claude says the command is for, then choose with the arrow keys and press Enter:

Yes, if the command only looks at something: for example, it reads your worksheet or screenshot log, or lists the files in a folder.
No, if it would do one of your steps for you or change anything (install something, change a file, or run a command from a step). Then type: “Please tell me what to type instead.”

If you’re not sure which it is, choose No and ask Claude what the command does. Claude reads the app’s code and your course notes without asking.

Don’t press Shift+Tab in Claude’s chat box. It switches to the next mode (Manual, then accept edits, then plan, then auto). If the line under the chat box no longer says manual mode on, press Shift+Tab until it does.
More about permissions and the modes: Permissions, Modes, and Safety.

The steps

Work through these steps in order, after making the project folder. Type every command yourself (or copy it from the page or the worksheet), and read what it means before you press Enter. The notes also tell you where the older tutorial chapters are wrong.

(A) Install the tools (10–20 min)
(B) Get the code onto your computer (5–10 min)
(C) Supabase project and the front end (15–25 min)
(D) Sign in with Google (15–25 min)
(E) OpenAI API key, with a $5 limit (10–15 min)
(F) Stripe, in test mode (10–20 min)
(G) Create the database (5 min)
(H) Deploy the Edge Functions and the Stripe webhook (10–15 min)
(I) Try the app (10–15 min)
(J) Save your work to GitHub (5 min)
(K) Put the app online with Vercel (10–20 min)
(L) Optional: automated tests, and Docker (tests 5–10 min, Docker 20–40 min)

All together, steps A to K take about 2 to 3 hours, spread over Classes 10–12. The times include taking the screenshots for your log, but not reading the optional “Why?” boxes or fixing problems.

If you don’t finish today

That’s expected. Continue at home, or in our next class if I say so, with the next step you haven’t done: the Done? column of your worksheet and your screenshot log show how far you got. If you run out of Claude usage, /usage shows when your limit resets.

When the course’s code changes

When I fix or improve the course’s copy of the app, I’ll announce it and ask you to bring the changes into your own copy: Get the course’s latest changes.