Build with Claude Code - K9IO Tutorials

1. Brief Overview

What is this technology/tool?

Claude Code is an AI-powered coding assistant developed by Anthropic. It operates directly within your terminal or Integrated Development Environment (IDE), acting as an "agentic" partner that can understand your codebase, execute commands, and perform a wide range of software development tasks. Unlike traditional code completion tools that suggest single lines of code, Claude Code can engage in complex, multi-step workflows, from generating entire applications from a natural language prompt to debugging intricate, multi-file bugs. It's designed to be a collaborative tool that streamlines the entire development lifecycle.

Why does it matter?

In today's fast-paced development environment, speed and efficiency are paramount. Claude Code matters because it significantly accelerates the development process, enabling developers to build, test, and deploy software faster than ever before. By automating repetitive tasks like writing boilerplate code, generating documentation, and refactoring complex logic, it frees up developers to focus on higher-level problem-solving and innovation. Its ability to understand and interact with the entire codebase makes it a powerful tool for both learning new technologies and maintaining existing projects. For teams, it can help enforce coding standards and facilitate knowledge sharing.

Who should use it?

Claude Code is a versatile tool that can benefit a wide range of developers. Junior developers can use it as a learning aid to understand complex codebases and get instant feedback on their work. Senior developers can leverage it to offload tedious tasks and prototype new ideas rapidly. DevOps engineers can use it to automate scripting and infrastructure management. Essentially, any developer who wants to boost their productivity, reduce cognitive load, and build high-quality software more efficiently will find Claude Code to be an invaluable addition to their toolkit.

2. Key Concepts

Agentic Coding Tool: This is the core concept that sets Claude Code apart. It's not just a passive code generator; it's an active participant in your development process. It can read files, understand dependencies, execute shell commands (like running tests or linters), and even interact with your version control system. This "agentic" nature allows it to perform complex tasks that require context and interaction with the development environment.
Natural Language Prompts: All interactions with Claude Code are through natural language. You "talk" to it in plain English, describing what you want to achieve. The quality of your prompts directly influences the quality of the output. A well-crafted prompt with clear context and specific instructions will yield far better results than a vague one.
Core Capabilities: Claude Code is a multi-faceted tool with a wide range of capabilities:
- Code Generation: Create anything from a single function to a full-stack application.
- Code Refactoring: Improve code structure, readability, and performance.
- Debugging: Analyze error messages, identify root causes, and suggest fixes.
- Documentation: Generate docstrings, comments, and project-wide summaries.
- Code Understanding: Answer questions about your codebase's architecture and logic.
- Automated Testing & Linting: Run tests, fix failing tests, and enforce code style.
- Git Integration: Manage commits, create pull requests, and resolve merge conflicts.
CLAUDE.md: This is a special file that you can create in the root of your project. Claude Code automatically reads this file and uses its contents as context for all its interactions. This is the perfect place to provide project-specific information, such as:
- Commonly used commands (npm start, pytest).
- Core file paths and their purposes.
- Code style guidelines.
- Testing instructions.
- Architectural overview.
Interactive and Non-interactive Modes: You can use Claude Code in two ways:
- Interactive Mode: Start the claude command in your terminal to enter an interactive session where you can have a conversation with the AI.
- Non-interactive Mode (Piping): You can pipe the output of other commands directly to Claude Code for processing. For example, cat src/app.js | claude "refactor this code".
VS Code Extension: For a more integrated experience, Claude Code offers a VS Code extension. This allows you to have multiple Claude instances running in parallel, each with its own context, which is incredibly useful for large, multi-faceted projects.
Permissions and Safety: Since Claude Code can execute commands on your system, it has a built-in permission system. Before running any command or modifying a file, it will ask for your confirmation. This is a crucial safety feature to prevent any unintended consequences. You can bypass this for a session if you're confident in its actions by using the --dangerously-skip-permissions flag.

3. Practical Code Examples

This section will guide you through building a complete full-stack TODO list application from scratch using Claude Code.

Step 1: Installation and Configuration

First, you need to install the Claude Code CLI tool and configure it with your Anthropic API key.

Install Node.js: If you don't have Node.js installed, download and install it from the official website: https://nodejs.org/

Install Claude Code: Open your terminal and run the following command to install the CLI tool globally:

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

Expected Output:

...
+ @anthropic-ai/claude-code@<version>
added <number> packages from <number> contributors in <time>s

Get Your API Key:
- Go to the Anthropic Console.
- Sign in or create a new account.
- Navigate to the "API Keys" section and generate a new API key.
Configure Claude Code: Run the claude command for the first time. It will prompt you to enter your API key.
```
claude
```
Expected Output:
```
Welcome to Claude Code!
Please enter your Anthropic API key:
```
Paste your API key and press Enter. Claude Code is now ready to use.

Step 2: Scaffolding the Project

Now, let's create a project directory and use Claude Code to generate the basic structure for our full-stack application.

Create a new directory for your project and navigate into it:
```
mkdir fullstack-todo-app
cd fullstack-todo-app
```
Start Claude Code in interactive mode:
```
claude
```
Now, let's ask Claude to create the project structure.
Prompt:

"Create a new full-stack project. The backend should be a Node.js and Express server, and the frontend should be a React application. Create a backend directory for the server and a frontend directory for the React app."

Claude will ask for permission to create the directories. Type y and press Enter.

Expected Output:
```
I will create the following directories:
- backend
- frontend
Is this okay? (y/n)
```

Step 3: Building the Backend

Let's start by building the backend API.

Prompt:
"In the backend directory, initialize a new Node.js project and install Express and cors."

Claude will execute npm init -y, npm install express cors in the backend directory.

Prompt:

"Now, create a file named server.js in the backend directory. This file should create a simple Express server that listens on port 5000. It should have a single in-memory array to store the TODO items. The server should have the following endpoints:
- GET /todos: Returns all TODO items.
- POST /todos: Adds a new TODO item. The request body should be a JSON object with a text property.
- DELETE /todos/:id: Deletes a TODO item by its index."

Claude will generate the code for server.js.

backend/server.js:

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

let todos = [
    { id: 1, text: 'Learn about Claude Code' },
    { id: 2, text: 'Build a TODO app' }
];
let nextId = 3;

app.get('/todos', (req, res) => {
    res.json(todos);
});

app.post('/todos', (req, res) => {
    const newTodo = {
        id: nextId++,
        text: req.body.text
    };
    todos.push(newTodo);
    res.status(201).json(newTodo);
});

app.delete('/todos/:id', (req, res) => {
    const id = parseInt(req.params.id);
    todos = todos.filter(todo => todo.id !== id);
    res.status(204).send();
});

const PORT = 5000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Start the backend server:
You can ask Claude to start the server, or you can do it yourself in a new terminal window.
```
node backend/server.js
```
Expected Output:
```
Server is running on http://localhost:5000
```

Step 4: Building the Frontend

Now, let's build the React frontend.

Prompt:
"In the frontend directory, create a new React application using Create React App."

Claude will execute npx create-react-app . in the frontend directory. This might take a few minutes.

Prompt:

"Now, replace the content of frontend/src/App.js with a React component that fetches the TODO items from the backend and displays them. The component should also have a form to add new TODO items and a button to delete existing ones."

Claude will generate the code for App.js.

frontend/src/App.js:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [todos, setTodos] = useState([]);
    const [text, setText] = useState('');

    useEffect(() => {
        fetch('http://localhost:5000/todos')
            .then(res => res.json())
            .then(data => setTodos(data));
    }, []);

    const addTodo = (e) => {
        e.preventDefault();
        if (!text) return;
        fetch('http://localhost:5000/todos', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text })
        })
        .then(res => res.json())
        .then(newTodo => {
            setTodos([...todos, newTodo]);
            setText('');
        });
    };

    const deleteTodo = (id) => {
        fetch(`http://localhost:5000/todos/${id}`, {
            method: 'DELETE'
        })
        .then(() => {
            setTodos(todos.filter(todo => todo.id !== id));
        });
    };

    return (
        <div className="App">
            <h1>TODO List</h1>
            <form onSubmit={addTodo}>
                <input
                    type="text"
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    placeholder="Add a new todo"
                />
                <button type="submit">Add</button>
            </form>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

Start the frontend application:
In a new terminal window, navigate to the frontend directory and run:
```
npm start
```
This will open a new browser tab with the React application running at http://localhost:3000.

Expected Output:

You should see a simple TODO list application in your browser, pre-populated with the two initial TODO items from the backend. You can add new items and delete existing ones.

4. Best Practices

Be Specific and Provide Context: The more specific your prompts, the better the results. Instead of "write a function", say "write a Python function named calculate_sum that takes a list of numbers and returns their sum". Provide context by telling Claude which files to read or what the overall goal is.

Use CLAUDE.md for Project-Level Instructions: Don't repeat yourself. Create a CLAUDE.md file in your project's root directory to store common commands, architectural details, and style guides. Claude will automatically use this as context.

Example CLAUDE.md:

# Project Overview
This is a full-stack TODO list application.
- Backend: Node.js/Express in the `backend` directory.
- Frontend: React in the `frontend` directory.

# Common Commands
- Start backend: `node backend/server.js`
- Start frontend: `cd frontend && npm start`

Iterate and Refine: Don't expect a perfect solution on the first try. Use Claude as a collaborative partner. Generate a first draft, then ask for refinements. For example: "That's a good start, but can you add error handling to the backend?"
Let Claude Plan First: For complex tasks, ask Claude to outline a plan before writing any code. This allows you to review the approach and make corrections early on. For example: "I want to add user authentication to the app. Can you outline the steps you would take?"
Use the VS Code Extension for Complex Projects: If you're working on a large project with multiple components, the VS Code extension is a must. It allows you to have separate conversations for the frontend, backend, and database, keeping the context clean and focused.
Verify and Test: Always verify the code that Claude generates. Run tests, check for edge cases, and make sure it meets your requirements. While Claude is a powerful tool, it's not infallible.
Manage Permissions Wisely: The permission prompts are there for your safety. Don't get into the habit of blindly approving every request. Take a moment to review the commands Claude wants to run and the files it wants to modify.

5. Common Pitfalls to Avoid

Vague Prompts:
- Mistake: "Fix my code."
- Error: Claude will likely ask for more information or provide a generic solution that doesn't solve the problem.
- Fix: Provide the code, the error message, and a description of what you're trying to achieve. "Here's my server.js code. I'm getting a TypeError: res.json is not a function error on line 20. I'm trying to return the list of todos as JSON. Can you fix it?"
Missing API Key:
- Mistake: Running claude without configuring the API key.
- Error Message: Error: Missing Anthropic API key. Please set the ANTHROPIC_API_KEY environment variable or run "claude --configure".
- Fix: Run claude --configure and paste your API key, or set the ANTHROPIC_API_KEY environment variable.
Incorrect Context:
- Mistake: Asking Claude to modify a file without telling it which file to modify.
- Error: Claude might modify the wrong file or not be able to find the code it needs to change.
- Fix: Always specify the file path in your prompt. "In frontend/src/App.js, can you add a loading spinner while the todos are being fetched?"
Ignoring Permission Prompts:
- Mistake: Approving a command without understanding what it does.
- Error: This could lead to unintended consequences, such as deleting files or installing unwanted packages.
- Fix: Carefully read each permission prompt before approving it. If you're not sure what a command does, ask Claude to explain it first.
Terminal Interface Quirks:
- Mistake: Using Ctrl+C to stop Claude.
- Error: This will kill the entire process.
- Fix: Use Escape to interrupt Claude's current task. Similarly, use Ctrl+V to paste images, not Cmd+V.

6. Next Steps and Additional Resources

Official Documentation: For a comprehensive guide to all of Claude Code's features, refer to the official Anthropic documentation.
VS Code Extension: Install the Claude Code extension from the VS Code Marketplace for a more integrated development experience.
Follow-up Projects:
- Add a database to the TODO list application (e.g., MongoDB or PostgreSQL).
- Implement user authentication.
- Deploy the application to a cloud provider like Vercel or Heroku.
- Build a more complex application, such as a blog or an e-commerce site.