# Meet Claude Code: Your AI Coding Partner

This is the lesson where things get exciting. You're about to meet the tool that makes vibe coding possible — Claude Code.

## What is Claude Code?

Claude Code is Anthropic's terminal-native AI coding assistant. Unlike chatting with Claude in a browser window, Claude Code runs **directly on your computer**. It can read your project files, understand your codebase, and write real code to your file system.

<div class="concept-box">
<h4>Concept</h4>
Think of Claude Code as a senior developer sitting next to you — one who never gets annoyed at basic questions, works as fast as you can type, and has read the documentation for every popular framework. You describe what you want; it builds it.
</div>

The key difference from browser-based AI chat:
- It **sees your project** — it knows what files you have, what code is written, what tools are installed
- It **writes real files** — not code in a chat window that you need to copy-paste, but actual files on your computer
- It **runs commands** — it can install packages, start servers, run tests
- It **asks for permission** — you always review and approve changes before they're made

## Installing Claude Code

**Step 1: Install via your terminal**

Open your terminal and run:

```
npm install -g @anthropic-ai/claude-code
```

This installs Claude Code globally on your machine.

**Step 2: Authenticate**

Navigate to your project folder and run:
```
cd waitlist-wizard
claude
```

The first time you run it, Claude Code will open your browser to authenticate with your Claude Pro account. Log in and authorize the connection.

**Step 3: Verify**

After authentication, you should see the Claude Code prompt in your terminal. Type a message to test it:

```
What's in this folder?
```

Claude should respond by listing the files in your `waitlist-wizard` directory (just the README.md from last lesson).

<div class="try-it">
<h4>Try It</h4>
Run <code>claude</code> in your terminal, then type: <strong>"Create a file called index.html with a simple hello world page"</strong>. Watch Claude create the file, then open it in VS Code — it's really there!
</div>

## Understanding the Permission System

Claude Code operates on a **review and approve** workflow. When it wants to create or modify a file, it will:

1. Show you exactly what it plans to do
2. Wait for your approval before making changes
3. Only proceed when you say yes

This means **you are always in control**. Claude won't change your files without your explicit permission.

For simple tasks where you trust what's happening, you can choose "Accept all" mode — but as a beginner, it's good practice to review each change so you learn what's being built.

## The CLAUDE.md File

Every project can have a `CLAUDE.md` file — a kind of "project memory" that tells Claude about your preferences, your tech stack, and how you want it to work.

<div class="try-it">
<h4>Try It</h4>
In your Claude Code session, type: <strong>/init</strong>
<br><br>
This creates a CLAUDE.md file. Then edit it (in VS Code or via Claude) to include:
<br><br>
<code>This is a beginner project. Explain changes simply. Use Next.js with TypeScript and Tailwind CSS.</code>
</div>

Claude will read this file at the start of every conversation, so it always knows the context of your project.

## Plan Mode: Think Before You Build

One of Claude Code's most powerful features is **Plan Mode**. Instead of jumping straight into code, Plan Mode asks Claude to analyze the problem and outline steps first.

When to use Plan Mode:
- Complex features that touch multiple files
- Anything you're unsure about
- When you want to understand the approach before committing to it

When to skip it:
- Simple one-file changes
- Quick fixes and small tweaks

To enter Plan Mode, type `/plan` followed by your request:

```
/plan Add an email signup form to the landing page that validates the email and shows a success message
```

Claude will respond with a step-by-step plan. You can discuss, modify, or approve the plan before any code is written.

## Essential Commands Cheat Sheet

| Command | What it does |
|---------|-------------|
| `/help` | See all available commands |
| `/clear` | Start a fresh conversation |
| `/compact` | Summarize the conversation to save context |
| `/plan` | Enter plan mode — think before building |
| `/model` | Switch between Sonnet (fast) and Opus (thorough) |

<div class="pro-tip">
<h4>Pro Tip</h4>
Use <strong>Sonnet</strong> for quick tasks like fixing a typo or adding a simple element. Use <strong>Opus</strong> for complex features, debugging tricky issues, or when Sonnet's output isn't quite right. Sonnet is faster and cheaper; Opus is smarter and more thorough.
</div>

## Your First Real Interaction

Let's do something real. In your Claude Code session, try this prompt:

```
Delete the index.html file and replace it with a proper Next.js project. 
We'll set that up in the next lesson, so for now, just clean up.
```

Claude will remove the test file and leave your project ready for the next step.

<div class="honest-note">
<h4>Honest Note</h4>
Claude Code is your co-pilot, not your autopilot. The better you communicate what you want, the better the results. Vague prompts get vague code. Specific, descriptive prompts get exactly what you need. We'll practice this skill throughout the course.
</div>

## Key Takeaway

Claude Code is installed, authenticated, and ready to go. You've had your first conversation, created your first file, and learned the essential commands. From here on, Claude is your partner in building Waitlist Wizard.

<div class="checkpoint">
<h4>Checkpoint</h4>
Claude Code is installed and working. You've created and deleted a test file, set up CLAUDE.md, and learned the essential commands. Next: choosing the right tech stack for your project.
</div>