Lesson 3.2 · 45 minCreate the project

What you will have

Your course repository contains a running Next.js project with TypeScript and Tailwind CSS. A placeholder headline shows at the local address, the production build succeeds, and CLAUDE.md lists the commands to run, build and check the project.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 3 — Scaffold with Claude

Purpose: turn this repository into a Next.js project so we can start building
the site described in docs/architecture.md.

Context: this folder already contains docs/, CLAUDE.md, a README and practice
files from earlier lessons. create-next-app will not run in a non-empty folder,
so scaffold into a temporary folder and move the result here.

Steps I expect:
1. Run: npx create-next-app@latest <temporary-folder> --ts --tailwind --eslint
   --app --use-npm --disable-git --yes
2. Move everything it generated into the root of this repository, including
   hidden files, then delete the temporary folder.
3. Keep our existing CLAUDE.md. The scaffold creates its own CLAUDE.md with one
   line, "@AGENTS.md" — add that line to ours instead of replacing ours. Keep
   the generated AGENTS.md as it is.
4. Keep our README; discard the generated one.
5. Merge the generated .gitignore with ours if we have one.
6. Move the practice files from sections 0 and 1 into a folder called archive/
   so they are kept but out of the way. Do not touch docs/.
7. Set the "name" in package.json to brightside-site.

Done when: npm run dev starts the site, npm run build succeeds and npm run
lint reports no errors.

Constraints: do not change the generated app code yet. Do not initialise a new
git repository; we already have one. Before reporting, run the build and the
lint yourself and show me the last lines of each, then list the files now in
the repository root.

Part 5 — Development server and live reload

Purpose: replace the Next.js starter page with our own placeholder so we can
deploy something that is clearly ours.

Context: app/page.tsx is the generated starter page. The business name and
one-line offer are in docs/brief.md.

Done when: the home page shows only the business name as an h1 heading and
the line "New website coming soon." below it, centred on the page. The
starter content and the sample SVG files in public/ are gone. The page title
in the browser tab is the business name.

Constraints: use Tailwind classes; no new libraries; do not build the real
design yet. Before reporting, run npm run build and npm run lint and confirm
both pass.

Part 6 — Commands into CLAUDE.md

Purpose: record how to run and check this project so every future session
knows.

Context: CLAUDE.md already describes the project and points at the four
documents in docs/. package.json now has dev, build, start and lint scripts.

Done when: CLAUDE.md has a "Commands" section listing npm run dev (local
development server, http://localhost:3000), npm run build (production build;
must pass before any commit) and npm run lint (code check; must pass before
any commit), and a "Stack" line naming the exact Next.js and Tailwind versions
from package.json.

Constraints: keep the @AGENTS.md line. Change nothing else in the file. Show
me the diff.

Do along

Work in your own repository and pause the video where told.

1. Start from lesson-2.4. Start Claude Code in the project folder.
2. Pause after Part 3. Give Claude the scaffold prompt from Part 3. Change the project name in step 7 if yours differs.
3. When Claude reports, read the build and lint output yourself.
4. Pause after Part 5. In a second terminal tab run npm run dev and open the local address.
5. Give Claude the placeholder prompt from Part 5. Use your own business name; it is read from your docs/brief.md.
6. Watch the page update, then change one word by asking Claude and watch it update again.
7. Pause after Part 6. Give Claude the CLAUDE.md prompt from Part 6 and review the diff.
8. Open a fresh Claude session and ask: "How do I run this project and what must pass before a commit?" It should answer from CLAUDE.md.
9. Save the checkpoint with the commands under "Recap and next".

Check your work

1. With npm run dev running, open http://localhost:3000. Expected: your business name as a heading and "New website coming soon."
2. Stop the dev server and run npm run build. Expected: it finishes without errors and prints a route table that includes /.
3. Run npm run lint. Expected: no errors.
4. Open CLAUDE.md. Expected: a Commands section, the @AGENTS.md line, and the pointers to your four documents all present.

Common problems

• "The directory … contains files that could conflict" → the scaffold was run directly in the repository → tell Claude: "scaffold into a temporary folder and move the files in, as in the brief."
• "Port 3000 is in use" → another program or an earlier dev server is running → use the address the server prints, or stop the other server with Control C.
• Our CLAUDE.md was replaced by a one-line file → the generated file overwrote it → git checkout CLAUDE.md restores yours; then add the @AGENTS.md line.
• Build fails after the move → hidden files such as .gitignore were left behind, or node_modules was moved incompletely → tell Claude: "delete node_modules and .next, run npm install, then build again and show me the output."

Homework

About 20 minutes, after the lesson. No later lesson depends on it.

1. Find it yourself. Without asking Claude, find in the editor the file that holds the home page's text, the file that holds the site-wide styles, and the file that lists the project's commands. Deliverable: three file names in your notes. Done when: Claude confirms all three when you ask it to check your answers.
2. One more brief. Write your own brief (purpose, context, done when, constraints, verify before reporting) that changes the "New website coming soon." line to wording that suits your business. Deliverable: one commit, no tag. Done when: the new line appears at the local address by live reload and Claude's report shows build and lint passing.
3. Cold start. Close the terminal, the editor and the browser. Start again from nothing until the placeholder shows at the local address, and write down each step. Deliverable: a short start-of-session checklist in your notes. Done when: following only your checklist, the page opens.

Save your work

git add -A
git commit -m "Lesson 3.2: Next.js project scaffolded with placeholder page"
git tag lesson-3.2
git push
git push --tags