Creating a Recipe App with SwiftUI

Creating a recipe app is a fantastic project for learning and practicing SwiftUI, Apple’s declarative UI framework. In this comprehensive guide, we’ll walk through the process of building a basic recipe app, covering UI design, data management, and more. By the end of this tutorial, you’ll have a solid understanding of how to build dynamic and engaging applications with SwiftUI.

Project Overview

Our recipe app will feature:

• A main screen displaying a list of recipes.
• Each recipe will show a title, an image, and a brief description.
• A detailed view for each recipe, including ingredients and instructions.

Prerequisites

• Xcode installed (version 12 or later).
• Basic knowledge of Swift and SwiftUI.

Step 1: Setting Up the Project

1. Open Xcode and create a new project.
2. Select “App” under the iOS tab.
3. Name your project (e.g., “RecipeApp”) and make sure the Interface is set to “SwiftUI”.
4. Choose a location to save your project and click “Create”.

Step 2: Defining the Recipe Data Model

First, let’s define a Recipe struct that represents our recipe data. Create a new Swift file named Recipe.swift and add the following code:

import SwiftUI

struct Recipe: Identifiable {
    let id = UUID()
    var name: String
    var image: String
    var description: String
    var ingredients: [String]
    var instructions: [String]
}

This struct conforms to Identifiable, allowing SwiftUI to uniquely identify each recipe in a list. It contains properties for the recipe’s name, image, description, ingredients, and instructions.

Step 3: Creating Sample Recipe Data

Next, create an array of sample recipes to populate our app. In Recipe.swift, add the following code:

let sampleRecipes = [
    Recipe(
        name: "Spaghetti Bolognese",
        image: "spaghetti",
        description: "Classic Italian pasta dish with a rich meat sauce.",
        ingredients: [
            "1 lb ground beef",
            "1 onion, chopped",
            "2 cloves garlic, minced",
            "1 (28 oz) can crushed tomatoes",
            "1 tsp dried oregano",
            "Salt and pepper to taste",
            "1 lb spaghetti"
        ],
        instructions: [
            "Cook spaghetti according to package instructions.",
            "In a large skillet, brown ground beef over medium heat. Drain excess fat.",
            "Add onion and garlic to the skillet and cook until softened.",
            "Stir in crushed tomatoes, oregano, salt, and pepper.",
            "Simmer for 15-20 minutes, stirring occasionally.",
            "Serve the sauce over spaghetti."
        ]
    ),
    Recipe(
        name: "Chicken Stir-Fry",
        image: "chickenstirfry",
        description: "Quick and easy stir-fry with tender chicken and vibrant vegetables.",
        ingredients: [
            "1 lb boneless, skinless chicken breast, cut into bite-sized pieces",
            "1 bell pepper, sliced",
            "1 onion, sliced",
            "1 cup broccoli florets",
            "2 tbsp soy sauce",
            "1 tbsp cornstarch",
            "1 tbsp sesame oil"
        ],
        instructions: [
            "In a bowl, mix soy sauce and cornstarch. Add chicken and toss to coat.",
            "Heat sesame oil in a large skillet or wok over medium-high heat.",
            "Add chicken and stir-fry until cooked through.",
            "Add bell pepper, onion, and broccoli. Stir-fry until vegetables are tender-crisp.",
            "Serve over rice or noodles."
        ]
    ),
    Recipe(
           name: "Chocolate Chip Cookies",
           image: "chocolatechipcookies",
           description: "Classic homemade chocolate chip cookies. Crispy edges, soft center.",
           ingredients: [
               "1 cup (2 sticks) unsalted butter, softened",
               "3/4 cup granulated sugar",
               "3/4 cup packed brown sugar",
               "1 tsp vanilla extract",
               "2 large eggs",
               "2 1/4 cups all-purpose flour",
               "1 tsp baking soda",
               "1 tsp salt",
               "2 cups chocolate chips"
           ],
           instructions: [
               "Preheat oven to 375°F (190°C).",
               "In a large bowl, cream together the butter, granulated sugar, and brown sugar until smooth.",
               "Beat in the vanilla extract and eggs until well combined.",
               "In a separate bowl, whisk together the flour, baking soda, and salt.",
               "Gradually add the dry ingredients to the wet ingredients, mixing until just combined.",
               "Stir in the chocolate chips.",
               "Drop by rounded tablespoons onto ungreased baking sheets.",
               "Bake for 9-11 minutes, or until edges are golden brown.",
               "Let cool on baking sheets for a few minutes before transferring to a wire rack to cool completely."
           ]
       )
]

This creates an array called sampleRecipes containing three recipes with names, images (which you’ll need to add to your project), descriptions, ingredients, and instructions.

Step 4: Designing the Recipe List View

Now, let’s create the main view that displays a list of recipes. Open ContentView.swift and replace the default code with:

import SwiftUI

struct ContentView: View {
    let recipes = sampleRecipes
    
    var body: some View {
        NavigationView {
            List(recipes) { recipe in
                NavigationLink(destination: RecipeDetailView(recipe: recipe)) {
                    RecipeRow(recipe: recipe)
                }
            }
            .navigationTitle("Recipes")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct RecipeRow: View {
    let recipe: Recipe
    
    var body: some View {
        HStack {
            Image(recipe.image)
                .resizable()
                .scaledToFill()
                .frame(width: 50, height: 50)
                .clipShape(Circle())
            
            VStack(alignment: .leading) {
                Text(recipe.name)
                    .font(.headline)
                Text(recipe.description)
                    .font(.subheadline)
                    .foregroundColor(.gray)
            }
        }
        .padding(.vertical, 4)
    }
}

Explanation:

• The ContentView struct is the main view that displays a list of recipes.
• We initialize recipes with the sampleRecipes data.
• A NavigationView wraps the List, providing a navigation bar at the top.
• The List iterates through the recipes array, creating a NavigationLink for each recipe.
• Each NavigationLink leads to the RecipeDetailView for the selected recipe.
• RecipeRow is a subview that displays a single recipe’s image, name, and description in a horizontal stack.

Step 5: Designing the Recipe Detail View

Create a new SwiftUI View file named RecipeDetailView.swift. This view will display the detailed information for a selected recipe:

import SwiftUI

struct RecipeDetailView: View {
    let recipe: Recipe
    
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Image(recipe.image)
                    .resizable()
                    .scaledToFit()
                
                Text(recipe.name)
                    .font(.largeTitle)
                    .padding(.top)
                
                Text("Ingredients")
                    .font(.title2)
                    .padding(.top)
                
                ForEach(recipe.ingredients, id: .self) { ingredient in
                    Text("• (ingredient)")
                        .padding(.leading)
                }
                
                Text("Instructions")
                    .font(.title2)
                    .padding(.top)
                
                ForEach(recipe.instructions, id: .self) { instruction in
                    Text("(recipe.instructions.firstIndex(of: instruction)! + 1). (instruction)")
                        .padding(.leading)
                        .padding(.bottom, 4)
                }
            }
            .padding()
        }
        .navigationTitle(recipe.name)
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct RecipeDetailView_Previews: PreviewProvider {
    static var previews: some View {
        RecipeDetailView(recipe: sampleRecipes[0])
    }
}

Explanation:

• RecipeDetailView displays the detailed information for a given recipe.
• A ScrollView allows the user to scroll through the content if it exceeds the screen height.
• An Image displays the recipe’s image, resized to fit the screen width.
• The recipe’s name is displayed as a large title.
• ForEach loops through the ingredients and instructions arrays, displaying each item as a bullet point or numbered step.
• navigationTitle and navigationBarTitleDisplayMode(.inline) configure the navigation bar to show the recipe name.

Step 6: Adding Images to the Asset Catalog

For the app to display images, you’ll need to add the image files to the Asset Catalog. In the project navigator, open Assets.xcassets. Drag and drop your recipe images (e.g., spaghetti.jpg, chickenstirfry.jpg, and chocolatechipcookies.jpg) into the asset catalog.

Step 7: Running the App

Connect your iOS device or use the Xcode Simulator. Click the “Run” button (or press Cmd + R) to build and run the app. You should see the list of recipes, and tapping on each recipe will navigate you to the detail view.

Adding More Functionality

Here are some ideas to enhance your recipe app:

• Search Functionality: Implement a search bar to filter recipes by name or ingredients.
• Favorites: Allow users to mark recipes as favorites.
• Categories: Organize recipes into categories (e.g., “Breakfast”, “Lunch”, “Dinner”).
• Add New Recipes: Implement a feature that allows users to add their own recipes.
• Persistence: Save recipes to local storage (e.g., using Core Data or UserDefaults) so they persist between app launches.
• Networking: Fetch recipes from a remote API.

Conclusion

This tutorial provided a step-by-step guide to creating a basic recipe app with SwiftUI. You’ve learned how to define a data model, display a list of recipes, create detailed views, and add images. By building upon this foundation, you can create a feature-rich and visually appealing recipe app that helps users discover and enjoy new culinary creations. SwiftUI’s declarative syntax and live preview make it a joy to work with, enabling you to quickly iterate on your designs and build stunning user interfaces.