Ab diesem Kapitel bekommt diese Serie ein durchgehendes Beispielprojekt: den Rezept-Planer, eine kleine Web-App zum Verwalten eigener Rezepte. Jedes weitere Kapitel dieser Serie baut auf genau diesem Projekt auf - neue Features, Bugfixes, Tests, Git-Workflow, Slash-Commands, Subagents, MCP und Hooks werden alle direkt daran gezeigt, statt an isolierten Einzelbeispielen. So siehst du nicht nur einzelne Werkzeuge, sondern wie sie in einem echten, wachsenden Projekt zusammenspielen.

Was der Rezept-Planer können soll

Der Rezept-Planer ist bewusst einfach gehalten, damit der Fokus auf dem Umgang mit Claude Code liegt, nicht auf komplizierter Technik. Geplant ist eine kleine Webanwendung, die:

• Rezepte mit Titel, Zutatenliste und Zubereitungsschritten speichert,
• alle gespeicherten Rezepte in einer Liste anzeigt,
• neue Rezepte über ein einfaches Formular entgegennimmt,
• später nach Zutaten durchsucht werden kann (Kapitel 12),
• über eine kleine Test-Suite gegen Fehler abgesichert ist (Kapitel 15).

Technisch setzt der Rezept-Planer auf Node.js mit dem Webframework Express im Hintergrund und eine einfache Weboberfläche aus reinem HTML, CSS und JavaScript im Vordergrund. Als Speicher genügt für dieses Tutorial eine einzelne JSON-Datei - eine echte Datenbank wäre für die Zwecke dieser Serie unnötige Komplexität.

Die Projektstruktur von Claude Code aufsetzen lassen

Statt jede Datei von Hand anzulegen, beschreibst du Claude Code das Vorhaben und lässt es die Grundstruktur aufbauen. Ein sinnvoller erster Prompt in einem neuen, leeren Projektordner könnte so aussehen:

> Ich möchte ein kleines Node.js-Projekt namens "rezept-planer" aufsetzen: ein Express-Server mit einer JSON-Datei als Speicher für Rezepte (Titel, Zutaten, Zubereitung), dazu eine ganz einfache Weboberfläche aus HTML/CSS/JavaScript, die alle Rezepte auflistet und ein Formular zum Hinzufügen neuer Rezepte hat. Leg die Grundstruktur an, inklusive package.json, und erklär mir kurz den Aufbau.

Claude Code legt daraufhin typischerweise eine Ordnerstruktur wie diese an:

rezept-planer/
  package.json       Projekt-Metadaten und npm-Skripte
  server.js          Express-Server und Routen
  src/
    recipes.js       Lese-/Schreibfunktionen für die Rezepte
  data/
    recipes.json     Gespeicherte Rezepte
  public/
    index.html       Weboberfläche
    app.js           Frontend-Logik
    style.css        Einfaches Styling
  tests/             (kommt in Kapitel 15 hinzu)

{
  "name": "rezept-planer",
  "version": "1.0.0",
  "description": "Kleiner Rezepte-Organizer, Beispielprojekt für das 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;
}

Eine eigene CLAUDE.md für das Projekt

Direkt zu Beginn lohnt sich, wie in Kapitel 10 gelernt, eine passende CLAUDE.md - so muss der Tech-Stack nicht in jedem weiteren Kapitel neu erklärt werden:

# Rezept-Planer

## Tech-Stack
- Node.js mit Express (ES-Module, `type: module`)
- Speicher: `data/recipes.json`, keine Datenbank
- Frontend: reines HTML/CSS/JavaScript in `public/`, kein Framework
- Tests: eingebauter Node-Testrunner (`npm test`)

## Konventionen
- Jede Funktion in `src/` bekommt einen kurzen JSDoc-Kommentar
- Neue Routen werden in `server.js` registriert
- Nach jeder Änderung an `src/`: `npm test` ausführen

Nach diesem Prompt kannst du den Server starten und im Browser unter der lokalen Adresse prüfen, ob eine leere Rezeptliste angezeigt wird:

npm install
npm start