Pages and layout

The frontend is the part of your app people actually see and click. It's the best place to start building, because you can check every step with your own eyes.

What is the frontend?

Think of a shop. The frontend is the shop window and the shelves. It's everything a visitor sees before they log in or pay.

AI coding tools often build web frontends with two tools:

• Next.js — a framework for websites with many pages. A framework is a ready-made structure, like the frame of a house.
• Tailwind CSS — a styling tool. It styles things with short class names like text-lg or rounded.

You won't write these by hand. Your coding agent sets them up and writes the pages for you.

Pages, components, and routes

Three words come up all the time. Here they are in plain English:

• Page — one full screen, like the home page or a booking form
• Component — a reusable piece of a page, like a header, a button, or a recipe card. Build it once, use it everywhere. Like a LEGO brick.
• Route — the web address that opens a page, like /recipes. The router is the signpost that sends each address to the right page.

In Next.js, each folder inside app/ becomes a route. You'll see this in the files your agent creates.

Scaffolding the project

Scaffolding means creating the starting files and folders for a project, like putting up the frame of a building. Start your agent in your project folder, switch to plan mode, and ask:

Set up a Next.js app with Tailwind CSS and TypeScript in this existing folder.
Use the App Router. Keep docs/, CLAUDE.md, and .gitignore as they are.
Show me your plan and the commands you will run before you start.

Approve the plan and the commands. Installing packages can take a minute or two.

Running it locally

When setup finishes, start the app on your own computer:

npm run dev

Open http://localhost:3000 in your browser. localhost means "this computer". The site only runs on your machine for now, which is perfect for building and testing.

Start with sample data

Sample data is fake content that lets you build pages before the database exists. It's like a furniture showroom with cardboard TVs. Everything looks real enough to judge the layout.

For example, imagine a booking page for a yoga studio:

Create a file with 6 sample yoga classes.
Each class has: id, title, slug, teacher, day, start_time, spots_left, description.
Later we will replace this with a real database.

A slug is a short, URL-friendly name, like morning-flow. It becomes part of the page's web address.

Build one page per prompt

Ask for one page at a time. Check each one in the browser before moving on.

Build the class list page at /classes.
Show all sample classes as cards: title, teacher, day, time, and spots left.
Add buttons to filter by day.
Each card links to /classes/[slug].
Put the card in its own reusable component.

Then the detail page:

Build the class detail page at /classes/[slug].
Show the title, teacher, time, description, and spots left.
Add a "Book this class" button. It doesn't need to work yet.
Show a friendly "Class not found" message for unknown slugs.

my-app/
├── app/
│   ├── page.tsx                ← home page (/)
│   ├── layout.tsx              ← header and footer on every page
│   └── classes/
│       ├── page.tsx            ← class list (/classes)
│       └── [slug]/page.tsx     ← class detail (/classes/...)
├── components/                 ← reusable pieces (cards, header)
├── lib/sample-classes.ts       ← temporary sample data
├── CLAUDE.md
└── package.json

Make it responsive

Responsive means the layout adapts to the screen size. A phone needs one column. A laptop has room for three or four.

To test it, open your browser's developer tools (right-click the page, choose Inspect) and click the phone icon. Then pick a phone size.

Check every page on a phone-sized screen (about 375px wide).
Card grids should be 1 column on phones, 2 on tablets, 3 on laptops.
The header links should collapse into a menu button on phones.
Tell me which files you changed.

When the pages look right, ask your agent to commit and push.

Common mistakes

Building every page in one prompt

// Wrong
Build the whole app with all pages, login, and payments.

// Right
Build the class list page at /classes using the sample classes.

Describing the problem vaguely

// Wrong
The page looks bad.

// Right
On my phone, the cards overlap the footer. Add space below the grid.

Closing the terminal running npm run dev

If the browser says it can't connect to localhost, the dev server stopped. Run npm run dev again.

What's next?

Your pages look real, but the data is fake. Next, let's give your app a memory with a Supabase database.