Back to course overview
Module 1Foundations & toolkit 18 min

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

  1. 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 --version and git --version, enter after each — both should answer with a version number. If git --version pops 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.
  2. 2Create the project: run npx create-next-app@latest replyable from your home folder — it creates a replyable folder 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). Then cd replyable (cd = move into that folder) and npm run dev, open http://localhost:3000, and meet your app. That address means 'this machine, door 3000' — the app exists only on your laptop until Module 8.
  3. 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.
  4. 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.
  5. 5Commit the moment: git add -A then git 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.)
Lab 1 problem set

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.