With the basic structure from the last chapter in place, it's time for the first real feature: recipes should be searchable by ingredient. This chapter shows how the prompting basics from chapter 5 play out in practice on a concrete feature.

The bad version

A too-vague prompt for this feature might look like this:

> Add a search.

That leaves almost everything open: search by title, by ingredients, or both? Should the search happen live as you type, or only after clicking a button? Does case matter? With a prompt like that, Claude Code will inevitably make its own assumptions, which won't necessarily match what you had in mind - leading to rework later.

The good version

A precise prompt for the same feature, based on the principles from chapter 5:

> Add ingredient search to the recipe planner:
> 1. Backend: a new query parameter "zutat" for GET /api/recipes that only returns recipes whose ingredient list contains the search term (case should not matter).
> 2. Frontend: a search field above the recipe list that reloads and filters the list via fetch() on every keystroke.
> Show me a brief plan first, before you change any files.

This prompt answers the most important questions upfront: which file is affected, what's searched, how case should be handled, and when the search triggers. The last line also asks for a brief plan explanation before anything is changed - a simple but effective safety net.

The result

With a precise prompt like the one above, Claude Code typically extends the route in server.js and the search logic in the frontend:

app.get("/api/recipes", async (req, res) => {
  const { zutat } = req.query;
  const recipes = await loadRecipes();
  if (!zutat) {
    return res.json(recipes);
  }
  const searchTerm = zutat.toLowerCase();
  const filtered = recipes.filter((recipe) =>
    recipe.ingredients.some((ingredient) => ingredient.toLowerCase().includes(searchTerm))
  );
  res.json(filtered);
});

const searchField = document.querySelector("#suche");

searchField.addEventListener("input", async () => {
  const response = await fetch(`/api/recipes?zutat=${encodeURIComponent(searchField.value)}`);
  const recipes = await response.json();
  renderRecipeList(recipes);
});

Working in stages instead of all at once

Even with a well-written prompt, it's worth working in stages for larger features: finish and test the backend first ("Test the route with curl"), and only then connect the frontend. That way each step can be checked individually, and a backend bug doesn't go unnoticed until the whole frontend is already built on top of it.

curl "http://localhost:3000/api/recipes?zutat=tomato"