Lab: Hello, app
Install the toolkit, create the project, run it locally, make your first AI-assisted change, and put the whole thing under version control.
Setup day — the least glamorous lab and the one that defeats the most people, so we do it together, slowly, with the assistant on call for every hiccup. Ninety minutes from a blank laptop to a running app you've modified. (A note on time, once, for the whole course: the minute counts on lessons are reading time. Labs are doing time — plan an evening for this one, and two or three for the big builds in Modules 4 and 5. That's normal, not falling behind.)
- 1Install the three tools: Node.js (the engine that runs JavaScript outside browsers — download the LTS version), VS Code (the editor), and Git (the time machine). First, open a terminal — on a Mac: press Cmd-Space, type Terminal, hit enter; on Windows: Start menu → type Terminal. Then verify: type
node --versionandgit --version, enter after each — both should answer with a version number. Ifgit --versionpops up an install offer on a Mac, accept it (fresh Macs ship without git); on Windows, install Git from git-scm.com. Terminal-phobia note: you'll use maybe eight commands all course, all provided, all explainable by the assistant. - 2Create the project: run
npx create-next-app@latest replyablefrom your home folder — it creates areplyablefolder there. Accept the defaults (TypeScript yes — that's JavaScript with labels on the data that catch mistakes; App Router yes; the assistant can explain any prompt). Thencd replyable(cd= move into that folder) andnpm run dev, openhttp://localhost:3000, and meet your app. That address means 'this machine, door 3000' — the app exists only on your laptop until Module 8. - 3Make the first change, assistant-style: open the project in VS Code, find
app/page.tsx, and ask your AI assistant: 'Here's my Next.js page file: [paste]. Replace the boilerplate with a centered page that says Replyable, a one-line tagline, and a placeholder button. Keep it simple, explain what each part does.' Paste the result in, save, watch the browser update itself (that's hot reload — your fastest feedback loop). Read the explanation; ask one follow-up question about any line that's opaque. That loop — describe, receive, read, ask — is the whole course's engine. - 4Break it on purpose: delete a closing brace somewhere, save, and read the error screen. Then paste the error to the assistant and apply the fix. You've now practiced recovery before your first real crisis, which is exactly when to practice it.
- 5Commit the moment:
git add -Athengit commit -m "hello replyable". From now on, commit after every working step — the time machine only saves the moments you tell it to. (Create a free GitHub account this week — Module 8's deploy requires it, and its lab walks your first push step by step.)
Five setup-adjacent exercises: identify frontend/backend/database for eight everyday app behaviors, read a small component with the assistant and annotate it in your own words, deliberately cause and fix two more error types, and write the one-paragraph 'what I'm building and for whom' statement for YOUR Replyable variant (Module 2 shapes it). Plus the classic: explain to a friend what localhost means. If you can, it stuck.