150 lines
5.8 KiB
Markdown
150 lines
5.8 KiB
Markdown
# Build Your First Project with Claude Code
|
|
|
|
A todo app in 15 minutes. No coding experience needed.
|
|
|
|
## What You Will Build
|
|
|
|
A fully working todo app that runs in your browser. Dark mode, saves your tasks between sessions, mark tasks as done, delete them. All from a single sentence typed into Claude Code.
|
|
|
|
Then you will iterate on it: add categories, search, due dates, and mobile layout. Each step is one prompt.
|
|
|
|
|
|
|
|
## What You Need
|
|
|
|
- A Claude subscription (Pro at $20/month is enough)
|
|
- A computer (Mac, Windows, or Linux)
|
|
- About 15-30 minutes
|
|
|
|
That is it. No programming language to install. No frameworks. No package managers. No git.
|
|
|
|
## Step 1: Install Claude Code
|
|
|
|
Open your terminal:
|
|
- **Mac:** Press `Cmd + Space`, type `Terminal`, press Enter
|
|
- **Windows:** Press the Windows key, type `Terminal`, press Enter
|
|
- **Linux:** Press `Ctrl + Alt + T`
|
|
|
|
Paste this and press Enter:
|
|
|
|
```bash
|
|
curl -fsSL https://claude.ai/install.sh | bash
|
|
```
|
|
|
|
**Windows alternative** (if curl does not work):
|
|
```powershell
|
|
winget install Anthropic.ClaudeCode
|
|
```
|
|
|
|
**Do not want to use a terminal?** Download the [Claude Code desktop app](https://claude.ai/download) or use [claude.ai/code](https://claude.ai/code) in your browser. Both work the same way.
|
|
|
|
A browser window opens to sign in. Complete the sign-in process and return to your terminal.
|
|
|
|
### Troubleshooting
|
|
|
|
If you see a "command not found" error after installing:
|
|
1. Close your terminal completely (not just the tab)
|
|
2. Open a new terminal window
|
|
3. Type `claude` and press Enter
|
|
|
|
This fixes it almost every time. The installer adds Claude Code to your PATH, but the current terminal session does not pick it up until restarted.
|
|
|
|
## Step 2: Create a Project Folder
|
|
|
|
```bash
|
|
mkdir my-todo-app
|
|
cd my-todo-app
|
|
claude
|
|
```
|
|
|
|
This starts Claude Code inside your new folder. You will see a prompt where you can type in plain English.
|
|
|
|
## Step 3: Build the Todo App (one prompt)
|
|
|
|
Copy and paste this prompt:
|
|
|
|
> Create a todo app as a single index.html file. Requirements: dark mode with a charcoal background, modern clean design, add/complete/delete tasks, tasks saved to localStorage so they survive page refresh. No external dependencies.
|
|
|
|
Claude Code will:
|
|
1. Read your (empty) folder
|
|
2. Plan the app structure
|
|
3. Write the HTML, CSS, and JavaScript
|
|
4. Create the file
|
|
|
|
It asks permission before creating the file. Type `y` to approve.
|
|
|
|
**Open the result:** Find `index.html` in your project folder and double-click it. It opens in your browser.
|
|
|
|
You now have a working todo app built from one sentence.
|
|
|
|
## Step 4: Add Categories (iteration)
|
|
|
|
This is where it gets interesting. Copy the prompt from [prompts/02-add-categories.md](prompts/02-add-categories.md), or simply type:
|
|
|
|
> Add color-coded categories to the todo app: Work (blue), Personal (green), Health (orange), Learning (purple). Each task gets a category dropdown. Filter buttons at the top to show only one category.
|
|
|
|
Claude Code reads the existing file, understands the current design, and adds categories while keeping everything else working. One prompt, one iteration.
|
|
|
|
## Step 5: Add Search
|
|
|
|
Copy the prompt from [prompts/03-add-search.md](prompts/03-add-search.md), or type:
|
|
|
|
> Add a search bar at the top that filters tasks in real time as you type. It should search both task text and category names.
|
|
|
|
Watch how Claude reads the now-larger file, finds the right place to add the search input, writes the filtering logic, and tests that it does not break anything.
|
|
|
|
## Keep Going
|
|
|
|
Each file in `prompts/` is another iteration:
|
|
|
|
| Prompt | What It Adds |
|
|
|--------|-------------|
|
|
| [01-create-todo.md](prompts/01-create-todo.md) | Base todo app (dark mode, localStorage) |
|
|
| [02-add-categories.md](prompts/02-add-categories.md) | Color-coded categories with filters |
|
|
| [03-add-search.md](prompts/03-add-search.md) | Real-time search bar |
|
|
| [04-add-due-dates.md](prompts/04-add-due-dates.md) | Due dates with overdue highlighting |
|
|
| [05-make-responsive.md](prompts/05-make-responsive.md) | Mobile-friendly layout |
|
|
|
|
After these five, try your own ideas:
|
|
- Drag-and-drop reordering
|
|
- Export tasks as a text file
|
|
- Dark/light mode toggle
|
|
- Task priority levels
|
|
- Daily task count chart
|
|
|
|
The point is not the todo app itself. The point is learning how Claude Code works: you describe what you want, it builds it, you iterate with another sentence.
|
|
|
|
## How Claude Code Works
|
|
|
|
When you give Claude Code a task, it does not just generate text. It runs a loop:
|
|
|
|
1. **Read** your files to understand the current state
|
|
2. **Think** about what needs to change
|
|
3. **Act** by editing files or running commands
|
|
4. **Check** the result
|
|
5. **Repeat** until the task is done
|
|
|
|
This is called the **agent loop**. It is what makes Claude Code fundamentally different from a chatbot. A chatbot gives advice. Claude Code takes action.
|
|
|
|
Read more: [Your First Hour with Claude Code](https://thedharmalab.com) (article on The Dharma Lab)
|
|
|
|
## Example Output
|
|
|
|
The `examples/` folder contains what Claude Code typically produces:
|
|
|
|
- [index.html](https://git.thedharmalab.com/ktg/claude-code-first-project/raw/branch/main/examples/index.html) - After prompt 01 (base todo app)
|
|
- [index-v2.html](https://git.thedharmalab.com/ktg/claude-code-first-project/raw/branch/main/examples/index-v2.html) - After prompts 02 + 03 (categories + search)
|
|
|
|
Your results will look different. Claude Code generates fresh code each time. The functionality will be the same, but the exact styling and structure will vary.
|
|
|
|
## What It Costs
|
|
|
|
See [costs.md](costs.md) for a full breakdown. Short version: Pro at $20/month is the lowest-risk way to start.
|
|
|
|
## Common Problems
|
|
|
|
See [troubleshooting.md](troubleshooting.md) for solutions to the most common issues people run into during their first session.
|
|
|
|
---
|
|
|
|
Part of [The Dharma Lab](https://thedharmalab.com) Claude Code article series.
|