Episode 4 of 24Prepare30 min

Create the store project and see it running

Scaffold a Next.js, TypeScript and Tailwind project with clean folders, lint checks, an env example and a home page you can open in your browser.

You will have: A working project on your computer with a home page for your store at localhost, passing lint, typecheck and build, with its first commit.

Before you start

Finish Episodes 2 and 3: tools installed and your agent running in the project folder
The project folder holds PROJECT_PLAN.md and the rules files from Episode 3
Your store name and a one-line description of what you sell
A web browser, to look at the home page

Make it yours

Change the example (a fashion store) to your own. Your answers are saved in this browser and used in every episode.

Store nameYour brand name.Type of storeFor example: jewellery store, book shop, plant shop.What you sellYour main product groups.Main countryWhere most customers live. It decides tax and shipping notes.CurrencyThe currency you charge in.

Other series keywords (5)

Payment gatewayStripe, PayPal or another gateway available in your country.Domain nameUse the one you own, or a name you plan to buy.AI agentClaude Code or Codex.Code editorVS Code, Cursor, Windsurf or any editor you like.Your computermacOS, Windows or Linux.

Your prompt

Paste into: {{ai_agent}} running in your project folder (opened in your code editor), as set up in Episode 3.

You are my coding agent working inside this project folder. I am a non-programmer. Explain jargon briefly and tell me what is happening in plain language.

Context: I am building "Thread & Needle", a fashion e-commerce store that sells women's and men's clothing, shoes and accessories to customers in United States, charging in USD. Read PROJECT_PLAN.md and the rules file first and follow them.

Goal: create the project foundation and show me a working home page in my browser.

Plan first: before changing anything, check the official Next.js installation page for the current create command and the minimum Node.js version, then show me your plan and wait for my OK.

Tasks:
1. Create a Next.js project (App Router) with TypeScript, Tailwind CSS and ESLint, with code in the project root and NOT inside a src folder. Use the current official create command. If the tool refuses because this folder is not empty, create the project in a temporary subfolder and move the files up. Never overwrite or delete my existing rules files, PROJECT_PLAN.md or the settings folder. If the tool also generated its own agent notes file, merge its content into my existing rules file instead of replacing mine.
2. Make these folders with a short README line or placeholder in each: app (pages), components (reusable pieces), lib (shared helpers), db (database code, used in Episode 6).
3. Add npm scripts for lint and typecheck next to the dev, build and start scripts, and make sure each one passes.
4. Create .env.example listing only variable NAMES with empty values or safe examples, for example the site URL and the database URL. Do NOT create or open .env.local yourself, because my deny list blocks it on purpose. Instead, tell me step by step how to copy .env.example to .env.local myself and which values to fill in, and confirm with git check-ignore that it is ignored by git. Add a small helper in lib that reads environment variables and checks them with Zod, failing clearly if one is missing, without ever printing a value.
5. Replace the default home page with a clean, simple home page for "Thread & Needle": store name, a short line about women's and men's clothing, shoes and accessories, and a placeholder where featured products will go. Use Tailwind, make it readable on a phone, and set a proper page title and description.
6. Start the development server, open the home page, and tell me the address. Stop the server when you are done.

Security rules:
- Never print, log or commit real secrets. Only .env.local holds values, and it must stay git-ignored.
- Do not install any package that is not needed for this step. Tell me the name of every package you add and why.
- Do not run the project's dependency audit fixes with force options. Report vulnerabilities and ask me.

Verify (run these yourself and show me the results): lint, typecheck, build, and a request to the home page showing that it loads. Also run git status and show that .env.local is not listed as a file to commit.

Then commit to git with the message "Create Next.js project with TypeScript, Tailwind and folder structure". Do not push yet; GitHub comes in Episode 5.

Report back in this format:
1. Done: what was created
2. Check: what I should open or look at (the address, the folders)
3. My decisions: anything I need to choose, such as the logo, colors or tagline

Review the prompt, then copy it. Never paste real passwords or API keys into a chat.

How to check it worked

Opening the address the agent gave (usually localhost on port 3000) shows your store name on a home page
The page also looks fine when you shrink the browser window to phone width
The folder list in your editor shows app, components, lib and db
Lint, typecheck and build all passed in the agent's report
A .env.example file exists, and .env.local is NOT in the list of files git wants to commit
git log shows one commit with a clear message

Sample result

Fashion store example

Example result for the fashion store: the home page the agent builds, and its report.

If something goes wrong

The create command complains that the folder is not empty.: Let the agent create the project in a temporary subfolder and move the files up, as the prompt says. Check afterwards that AGENTS.md, CLAUDE.md, PROJECT_PLAN.md and the settings folder are still there.
The page does not open, or the browser says the site cannot be reached.: The development server only runs while the agent or terminal is running it. Ask the agent to start it again and give you the exact address. If another program uses the port, it will pick a different number; use the address it prints.
Build or lint fails with errors you do not understand.: Reply: "Explain the first error in plain words, fix it, and run all three checks again." Do not ask it to turn the checks off.
The agent says your Node.js version is too old.: Go back to Episode 2 and install the current LTS version of Node.js, then open a new terminal and ask the agent to retry.

More in Prepare

This is part of the series Build a secure, no-cost e-commerce website with AI agents. See all 24 episodes, the tools used and answers to common questions on the series page.