🎉

Congratulations!

Your Next.js Website development environment is ready

Installed Tools

GitVS CodeClaude CodeNode.js

Project structure created on your computer

📁 ~/my-first-app/
├── 📂 src/
│   ├── 📂 domain/          ← Business logic
│   │   ├── models/
│   │   └── services/
│   ├── 📂 ports/            ← Interface definitions
│   ├── 📂 adapters/         ← External integrations
│   │   ├── api/
│   │   └── ui/
│   └── 📂 app/              ← Pages (Next.js)
├── 📄 CLAUDE.md              ← AI architecture rules
└── 📄 package.json

Your First Message to Claude Code

It doesn't have to be perfect. You can keep the conversation going and refine as you go.

Fill in the blanks

I want to build a ___ website.

What it does:
___

Who it's for:
___

3 must-have features to start with:
1. ___
2. ___
3. ___

Where should I start?

Here's what it could look like

I want to build a group event scheduling website.

What it does:
It's a pain when someone asks "when are you free?" in a group chat.
I want a site where you share a link and everyone votes on which dates work for them.

Who it's for:
Young professionals in their 20s–30s. No sign-up required — just open the link and vote.

3 must-have features to start with:
1. Create an event with multiple date options and let participants check the ones that work
2. No sign-up — just enter a name and vote right away
3. A clear view of voting results at a glance

Where should I start?

What to Say Next

After your first prompt, the AI will generate code. From there, just chat naturally with short requests.

“Can you run this for me?”

“Make the text bigger”

“Change the background to blue”

“I want to add a login feature”

“I'm getting an error, can you help? (paste the error message)”

“Explain what we've built so far”

Don't worry about saying the wrong thing. You can always say "Undo that and try again."

Stuck on the Design?

v0.dev Use v0.dev to create a UI with AI first, then bring it into your project.

1Go to v0.dev and describe the screen you want, like "Create a login page"
2If you like it, click Download ZIP to download it
3Extract the ZIP and place the files in the ~/my-first-app/ folder
4Tell Claude Code: "Apply this code to my project"

Next Step

Ready to put your site on the real internet?

Push your code to GitHub and deploy with Vercel — you'll get a real URL you can share with friends. We'll walk you through it step by step.

Project structure created on your computer

📁 ~/my-first-app/ ├── 📂 src/ │ ├── 📂 domain/ ← Business logic │ │ ├── models/ │ │ └── services/ │ ├── 📂 ports/ ← Interface definitions │ ├── 📂 adapters/ ← External integrations │ │ ├── api/ │ │ └── ui/ │ └── 📂 app/ ← Pages (Next.js) ├── 📄 CLAUDE.md ← AI architecture rules └── 📄 package.json

Your First Message to Claude Code

It doesn't have to be perfect. You can keep the conversation going and refine as you go.

Fill in the blanks

I want to build a ___ website.

What it does:
___

Who it's for:
___

3 must-have features to start with:
1. ___
2. ___
3. ___

Where should I start?

Here's what it could look like

I want to build a group event scheduling website.

What it does:
It's a pain when someone asks "when are you free?" in a group chat.
I want a site where you share a link and everyone votes on which dates work for them.

Who it's for:
Young professionals in their 20s–30s. No sign-up required — just open the link and vote.

3 must-have features to start with:
1. Create an event with multiple date options and let participants check the ones that work
2. No sign-up — just enter a name and vote right away
3. A clear view of voting results at a glance

Where should I start?

What to Say Next

After your first prompt, the AI will generate code. From there, just chat naturally with short requests.

“Can you run this for me?”

“Make the text bigger”

“Change the background to blue”

“I want to add a login feature”

“I'm getting an error, can you help? (paste the error message)”

“Explain what we've built so far”

Don't worry about saying the wrong thing. You can always say "Undo that and try again."

Stuck on the Design?

v0.dev Use v0.dev to create a UI with AI first, then bring it into your project.

1Go to v0.dev and describe the screen you want, like "Create a login page"

2If you like it, click Download ZIP to download it

3Extract the ZIP and place the files in the ~/my-first-app/ folder

4Tell Claude Code: "Apply this code to my project"