Starting with this chapter, this series gets a continuous example project: the Recipe Planner, a small web app for managing your own recipes. Every remaining chapter in this series builds on this exact project - new features, bug fixes, tests, git workflow, slash commands, subagents, MCP, and hooks are all shown directly on it, instead of as isolated one-off examples. That way you see not just individual tools, but how they work together in a real, growing project.

What the recipe planner should do

The recipe planner is deliberately kept simple, so the focus stays on working with Claude Code rather than complicated technology. The plan is a small web application that:

• stores recipes with a title, an ingredient list, and preparation steps,
• shows all saved recipes in a list,
• accepts new recipes through a simple form,
• can later be searched by ingredient (chapter 12),
• is protected against bugs by a small test suite (chapter 15).

Technically, the recipe planner runs on Node.js with the Express web framework in the background, and a simple web interface made of plain HTML, CSS, and JavaScript in the foreground. For storage, a single JSON file is enough for this tutorial - a real database would be unnecessary complexity for the purposes of this series.

Letting Claude Code set up the project structure

Instead of creating every file by hand, you describe the plan to Claude Code and let it build the basic structure. A sensible first prompt in a new, empty project folder might look like this:

> I want to set up a small Node.js project called "rezept-planer": an Express server with a JSON file as storage for recipes (title, ingredients, preparation steps), plus a very simple HTML/CSS/JavaScript web interface that lists all recipes and has a form for adding new ones. Set up the basic structure, including package.json, and briefly explain the layout to me.

Claude Code then typically creates a folder structure like this:

rezept-planer/
  package.json       Project metadata and npm scripts
  server.js          Express server and routes
  src/
    recipes.js       Read/write functions for recipes
  data/
    recipes.json     Stored recipes
  public/
    index.html       Web interface
    app.js           Frontend logic
    style.css        Simple styling
  tests/             (added in chapter 15)

{
  "name": "rezept-planer",
  "version": "1.0.0",
  "description": "Small recipe organizer, example project for the Claude Code tutorial",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "test": "node --test"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

import { readFile, writeFile } from "node:fs/promises";

const DATA_PATH = new URL("../data/recipes.json", import.meta.url);

/** Reads all recipes from the JSON storage file. */
export async function loadRecipes() {
  const raw = await readFile(DATA_PATH, "utf-8");
  return JSON.parse(raw);
}

/** Persists the given list of recipes back to the JSON storage file. */
export async function saveRecipes(recipes) {
  await writeFile(DATA_PATH, JSON.stringify(recipes, null, 2));
}

/** Adds a new recipe with a generated id and returns the updated list. */
export async function addRecipe(recipe) {
  const recipes = await loadRecipes();
  const newRecipe = { id: Date.now(), ...recipe };
  recipes.push(newRecipe);
  await saveRecipes(recipes);
  return newRecipe;
}

A project-specific CLAUDE.md

Right from the start, as learned in chapter 10, it's worth adding a fitting CLAUDE.md - that way the tech stack doesn't need re-explaining in every further chapter:

# Recipe Planner

## Tech Stack
- Node.js with Express (ES modules, `type: module`)
- Storage: `data/recipes.json`, no database
- Frontend: plain HTML/CSS/JavaScript in `public/`, no framework
- Tests: built-in Node test runner (`npm test`)

## Conventions
- Every function in `src/` gets a short JSDoc comment
- New routes are registered in `server.js`
- After every change to `src/`: run `npm test`

After this prompt you can start the server and check in your browser at the local address whether an empty recipe list is shown:

npm install
npm start