Hi Claude! I need your help getting set up to code for the very first time. I'm on a Mac and I have zero coding experience. I need you to be my patient, step-by-step guide through this entire process.

Here's what I need to set up:
1. Xcode Command Line Tools
2. Homebrew (the Mac package manager)
3. Node.js (using nvm)
4. Git
5. Cursor (the AI-powered code editor based on VS Code)
6. Claude Code (the CLI tool from Anthropic)

And then I need to:
7. Create my first project folder
8. Set up that project with the right configuration files
9. Learn how to use Claude Code to start building

IMPORTANT INSTRUCTIONS FOR YOU:
- Assume I know NOTHING about coding or terminals. Explain every single step.
- Tell me exactly what to click, what to type, and what I should see after each step.
- Only give me ONE step at a time. Wait for me to confirm I completed it before moving on.
- If I run into an error, help me troubleshoot it before continuing.
- Use simple, non-technical language whenever possible. If you use a technical term, briefly explain what it means.
- When you tell me to type a command, put it on its own line so it's easy to copy.
- After each step, ask me "What do you see?" or "Did that work?" so we stay in sync.

Let's start from the very beginning. What's the first thing I should do?

Option A: Create Folder Using Finder (Easier for Beginners)

1. Open Finder — Click the Finder icon (the smiling face) in your Dock
2. Go to your home folder — In the menu bar, click Go → Home (or press Command + Shift + H)
3. Create a Projects folder (if you don't have one):
   • Right-click in empty space
   • Select "New Folder"
   • Name it Projects and press Enter
4. Open the Projects folder — Double-click to open it
5. Create your project folder:
   • Right-click in empty space
   • Select "New Folder"
   • Name it my-first-project (use dashes, no spaces!) and press Enter

Your folder is now at: ~/Projects/my-first-project

Option B: Create Folder Using Terminal (Faster Once You Learn It)

1. Open Terminal — Press Command + Space, type "Terminal", press Enter
2. Create the Projects folder and your project folder in one command:

mkdir -p ~/Projects/my-first-project

This command does two things:

• mkdir = "make directory" (create a folder)
• -p = create parent folders too (so it creates both "Projects" and "my-first-project")
• ~ = your home folder

That's it! The folder now exists.

Method A: Drag and Drop (Easiest)

1. Open Terminal (if not already open)
2. Type cd (that's "cd" followed by a space) — don't press Enter yet!
3. Open Finder and find your my-first-project folder
4. Drag the folder from Finder and drop it into the Terminal window
5. You'll see the path appear after "cd "
6. Now press Enter

Method B: Type the Path (Once You Know It)

1. Open Terminal
2. Type this command and press Enter:

cd ~/Projects/my-first-project

cd means "change directory" — it tells Terminal to go to that folder.

1. Personal Portfolio Website

A simple website to showcase who you are and what you do.

Help me build a personal portfolio website using HTML, CSS, and JavaScript. I want a homepage with my name and a short bio, an About page with more details about me, a Projects page where I can list things I've worked on, and a Contact page with a simple form. Make it look clean and modern. Let's start with the homepage.

What you'll learn: HTML structure, CSS styling, basic web development

2. To-Do List App

A simple app to add, check off, and delete tasks.

Help me build a to-do list app using React. I want to be able to type a task and add it to a list, check tasks off when they're done, delete tasks I don't need, and have the list saved so it doesn't disappear when I refresh the page. Let's start with the basic layout.

What you'll learn: React basics, state management, local storage

4. Blog / Journal App

A place to write and publish blog posts or journal entries.

Help me build a blog app using Next.js. I want a homepage that lists all posts with title, date, and a preview. Each post should have its own page. I want an editor to write new posts with a title and body using markdown. Let's use a simple file-based approach to store posts for now. Start with the homepage layout.

What you'll learn: Next.js, routing, markdown, file handling

5. Weather Dashboard

An app that shows the current weather for any city.

Help me build a weather dashboard using React. I want a search bar where I type a city name, and it shows the current temperature, weather condition, humidity, and wind speed. Use a free weather API. Make it look nice with weather icons. Let's start with the layout and search bar.

What you'll learn: APIs, fetching data, displaying dynamic content

8. Real-Time Chat App

A messaging app where multiple people can chat.

Help me build a real-time chat application using Next.js and Supabase. I want user registration and login, the ability to create chat rooms, real-time messaging that updates without refreshing, and a list of online users. Let's start by setting up the project and database.

What you'll learn: Authentication, real-time data, databases

Project Basics

• What programming language(s) does the project use?
• What framework(s) does the project use?
• What version of Node.js / Python / etc. should I use?

Source Code

• Where is the source code hosted? (GitHub URL)
• What branch should I work from?
• Can you add me as a collaborator?

Environment Variables

• Does the project use a .env file?
• Can you send me a copy or list all required variables?

Database

• What database does the project use?
• How do I access it?
• Are there migrations I need to run?

Running the Project

• What are the exact commands to install dependencies and start the project?
• Are there any special setup steps?

Step 1: Get the Project Files onto Your Computer

Your developer will give you access one of two ways:

cd ~/Projects

git clone https://github.com/username/project-name.git

cd project-name

cd ~/Projects/project-name

Step 2: Add the .env File (Environment Variables)

The .env file contains secret settings like API keys and passwords. Your developer should send you this separately (never through GitHub — that would expose the secrets!).

1. Your developer will send you the contents (might look like this):

DATABASE_URL=postgres://user:password@host:5432/dbname
API_KEY=sk-abc123xyz
SECRET_KEY=some-long-random-string

2. In Terminal, make sure you're in the project folder, then create the file:

touch .env

3. Open the file in a text editor:

open -e .env

4. Paste the contents your developer sent you
5. Save the file (Command + S) and close the editor

Step 3: Install Dependencies

Most projects use code libraries written by other people (called "dependencies"). You need to download these before the project will work.

1. Make sure you're in the project folder in Terminal
2. Run this command:

npm install

3. Wait for it to finish — you'll see a lot of text scrolling by. This is normal!
4. When it's done, you'll see your command prompt again. You might see some "warnings" (yellow text) — these are usually fine to ignore.

Step 4: Start Claude Code and Create a CLAUDE.md File

This helps Claude understand the project so it can help you better.

1. Make sure you're still in the project folder in Terminal
2. Start Claude Code:

claude

3. Once Claude Code is running, paste this prompt:

Analyze this entire project and create a detailed CLAUDE.md file. Include what the project does, how the files are organized, what technologies it uses, how to run it, and any important patterns you notice.

4. Claude will read through the project and create a helpful reference file

Step 5: Try Running the Project

Now let's see if everything works! The command to run the project varies, but here are the most common ones:

1. Ask Claude Code: "How do I run this project locally?"
2. Or try these common commands (one at a time until one works):

npm run dev

npm start

npm run start

3. If it works, you'll see a message like "Server running on http://localhost:3000"
4. Open your web browser and go to http://localhost:3000 (or whatever port it shows)
5. You should see the project running!

.gitignore

Tells Git which files to NOT track (dependencies, secrets, build files)

# Dependencies
node_modules/

# Environment variables (secrets)
.env
.env.local
.env.production

# Build output
dist/
build/
.next/

# OS files
.DS_Store

CLAUDE.md

Instructions file that Claude Code reads automatically

# Project Name

## What This Project Does
[Describe your project in 2-3 sentences]

## Tech Stack
- Framework: [e.g., React, Next.js]
- Styling: [e.g., Tailwind CSS]
- Database: [e.g., Supabase]

## How to Run
npm install    # Install dependencies
npm run dev    # Start development server

## Rules and Preferences
- Keep code simple and well-commented
- Always ask before deleting existing code

package.json

Project configuration and scripts

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}