Recipe Helper

A recipe has two things: ingredients and steps. Displaying them cleanly in a scrollable view is a great exercise in structured data and List sections.

What you'll build

A recipe view with the dish name and a servings count at the top, followed by an ingredients section and a numbered steps section. Optionally, a list of recipes to tap into.

Key concepts

A rich struct — A recipe has several related pieces of data. Group them.

struct Recipe: Identifiable {
    let id = UUID()
    let name: String
    let servings: Int
    let ingredients: [String]
    let steps: [String]
}

List with Section — Group rows into labeled sections inside a single List.

List {
    Section("Ingredients") {
        ForEach(recipe.ingredients, id: \.self) { ingredient in
            Text(ingredient)
        }
    }
    Section("Steps") {
        ForEach(Array(recipe.steps.enumerated()), id: \.offset) { index, step in
            Label("\(index + 1). \(step)", systemImage: "\(index + 1).circle")
        }
    }
}

enumerated() — Turns an array into a sequence of (offset, element) pairs so you can use the index (for step numbers) while iterating.

Servings adjustment — Add a stepper to adjust the serving count. That's a small UX touch that makes it feel like a real app.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and follow the recipe.