Recipe Finder App

Ingredient-based search is different from a normal keyword search. Users may type ingredients with commas, spaces, uppercase letters, duplicates, or small mistakes: Tomato, tomato, Cheese. A common mistake is sending this raw input directly to the API. The result is inconsistent search behavior, duplicated parameters, and confusing no-result states.

Problematic approach:

          const ingredients = ref("");

          async function searchRecipes() {
            const response = await fetch(
              `/api/recipes?ingredients=${ingredients.value}`
            );

            recipes.value = await response.json();
          }

This code does not normalize the input. The API receives exactly what the user typed, including duplicate ingredients, unnecessary spaces, and inconsistent casing.

Better approach:

          const ingredientInput = ref("");

          const normalizedIngredients = computed(() => {
            return ingredientInput.value
              .split(",")
              .map((ingredient) => ingredient.trim().toLowerCase())
              .filter(Boolean)
              .filter((ingredient, index, list) => {
                return list.indexOf(ingredient) === index;
              });
          });

          async function searchRecipes() {
            if (!normalizedIngredients.value.length) {
              error.value = "Add at least one ingredient.";
              return;
            }

            const query = normalizedIngredients.value.join(",");

            const response = await fetch(
              `/api/recipes?ingredients=${encodeURIComponent(query)}`
            );

            recipes.value = await response.json();
          }

Template example:

          <input
            v-model="ingredientInput"
            type="text"
            class="form-control"
            placeholder="tomato, cheese, pasta"
          />

          <div class="mt-2">
            <span
              v-for="ingredient in normalizedIngredients"
              :key="ingredient"
              class="badge bg-secondary me-2"
            >
              {{ ingredient }}
            </span>
          </div>

Pay attention to: Convert ingredient input into a clean list before searching. Normalize casing, remove empty values, prevent duplicates, and show users exactly which ingredients will be used in the request.

Dietary filters such as vegetarian, vegan, gluten-free, dairy-free, or low-carb should refine the visible results without destroying the original API response. A frequent mistake is replacing the main recipes array every time a filter changes. After two or three filter changes, the original result set is gone, and clearing filters no longer restores the full list.

Problematic code:

          const recipes = ref([]);

          function applyVegetarianFilter() {
            recipes.value = recipes.value.filter((recipe) => {
              return recipe.diets.includes("vegetarian");
            });
          }

          function applyGlutenFreeFilter() {
            recipes.value = recipes.value.filter((recipe) => {
              return recipe.diets.includes("gluten-free");
            });
          }

This approach permanently changes recipes. If the user disables the filter, the app cannot recover the removed recipes without making another API call.

Better approach:

          const recipes = ref([]);
          const activeDietFilters = ref([]);

          const visibleRecipes = computed(() => {
            if (!activeDietFilters.value.length) {
              return recipes.value;
            }

            return recipes.value.filter((recipe) => {
              const recipeDiets = recipe.diets || [];

              return activeDietFilters.value.every((diet) => {
                return recipeDiets.includes(diet);
              });
            });
          });

          function toggleDietFilter(diet) {
            if (activeDietFilters.value.includes(diet)) {
              activeDietFilters.value = activeDietFilters.value.filter((item) => {
                return item !== diet;
              });

              return;
            }

            activeDietFilters.value = [...activeDietFilters.value, diet];
          }

Template usage:

          <button
            v-for="diet in dietOptions"
            :key="diet.value"
            type="button"
            class="btn me-2"
            :class="activeDietFilters.includes(diet.value) ? 'btn-success' : 'btn-outline-success'"
            @click="toggleDietFilter(diet.value)"
          >
            {{ diet.label }}
          </button>

          <RecipeCard
            v-for="recipe in visibleRecipes"
            :key="recipe.id"
            :recipe="recipe"
          />

Pay attention to: Keep raw API results unchanged. Use computed properties for filtered views so users can turn filters on and off without losing the original search results.

Recipe APIs often return incomplete or inconsistent data. Some recipes may not have images, cooking time, dietary tags, full instructions, ingredient amounts, or source links. If your components assume every field exists, the UI may show broken images, empty cards, or JavaScript errors when users open a recipe detail view.

Problematic component:

          <template>
            <div class="card">
              <img :src="recipe.image" class="card-img-top" :alt="recipe.title" />

              <div class="card-body">
                <h3>{{ recipe.title }}</h3>
                <p>Ready in {{ recipe.readyInMinutes }} minutes</p>
                <p>{{ recipe.instructions.slice(0, 160) }}...</p>
              </div>
            </div>
          </template>

This can break if recipe.image, readyInMinutes, or instructions is missing. A good recipe app should degrade gracefully.

Better approach:

          const FALLBACK_IMAGE = "/images/recipe-placeholder.jpg";

          function getRecipeImage(recipe) {
            return recipe.image || FALLBACK_IMAGE;
          }

          function getCookingTime(recipe) {
            if (!recipe.readyInMinutes) {
              return "Time not specified";
            }

            return `${recipe.readyInMinutes} minutes`;
          }

          function getShortInstructions(recipe) {
            if (!recipe.instructions) {
              return "Open the recipe details to see available preparation information.";
            }

            return `${recipe.instructions.slice(0, 160)}...`;
          }

Safer template:

          <div class="card h-100">
            <img
              :src="getRecipeImage(recipe)"
              class="card-img-top"
              :alt="recipe.title ? `${recipe.title} image` : 'Recipe image'"
            />

            <div class="card-body">
              <h3 class="h5">{{ recipe.title || "Untitled recipe" }}</h3>
              <p class="text-muted">{{ getCookingTime(recipe) }}</p>
              <p>{{ getShortInstructions(recipe) }}</p>
            </div>
          </div>

Pay attention to: Build recipe cards and detail pages for imperfect data. Add fallback images, safe text formatting, missing-time labels, and clear empty instructions instead of letting the layout break.

Favorites make the Recipe Finder App more useful, but they can also become messy if you save full API responses directly. API objects may contain large nested fields, inconsistent property names, or data you do not need. If the API response changes later, old favorites stored in localStorage may become difficult to render.

Problematic code:

          function saveFavorite(recipe) {
            const favorites = JSON.parse(localStorage.getItem("favorites")) || [];

            favorites.push(recipe);

            localStorage.setItem("favorites", JSON.stringify(favorites));
          }

This stores the entire recipe object exactly as it came from the API. It also allows duplicates and does not validate the saved data.

Better approach:

          function createFavoriteRecipe(recipe) {
            return {
              id: String(recipe.id),
              title: recipe.title || "Untitled recipe",
              image: recipe.image || "",
              readyInMinutes: recipe.readyInMinutes || null,
              diets: recipe.diets || [],
              sourceUrl: recipe.sourceUrl || "",
              savedAt: new Date().toISOString()
            };
          }

          function loadFavorites() {
            const saved = localStorage.getItem("favoriteRecipes");

            if (!saved) {
              return [];
            }

            try {
              const parsed = JSON.parse(saved);

              if (!Array.isArray(parsed)) {
                return [];
              }

              return parsed.filter((recipe) => {
                return recipe.id && recipe.title;
              });
            } catch {
              localStorage.removeItem("favoriteRecipes");
              return [];
            }
          }

          function saveFavorite(recipe) {
            const favorites = loadFavorites();
            const favoriteRecipe = createFavoriteRecipe(recipe);

            const alreadySaved = favorites.some((item) => {
              return item.id === favoriteRecipe.id;
            });

            if (alreadySaved) {
              return favorites;
            }

            const updatedFavorites = [...favorites, favoriteRecipe];

            localStorage.setItem("favoriteRecipes", JSON.stringify(updatedFavorites));

            return updatedFavorites;
          }

Pay attention to: Save a small, stable favorite object instead of the entire API response. Prevent duplicates, validate restored data, and keep the favorite structure easy to display later.

A recipe app can have several empty states: no ingredients entered, search in progress, no API results, filters hiding all results, failed request, or no saved favorites. If all of these situations show the same blank area or the same “No recipes found” message, users will not know what to do next.

Problematic template:

          <div v-if="!recipes.length">
            No recipes found.
          </div>

          <RecipeCard
            v-for="recipe in visibleRecipes"
            :key="recipe.id"
            :recipe="recipe"
          />

This does not distinguish between “you have not searched yet,” “the API failed,” and “your filters are too strict.”

Better approach:

          const hasSearched = ref(false);
          const loading = ref(false);
          const error = ref("");

          const emptyState = computed(() => {
            if (!hasSearched.value) {
              return {
                title: "Search by ingredients",
                text: "Add ingredients you have at home to find matching recipes."
              };
            }

            if (error.value) {
              return {
                title: "Recipes could not be loaded",
                text: "Check your connection and try the search again."
              };
            }

            if (recipes.value.length && !visibleRecipes.value.length) {
              return {
                title: "No recipes match these filters",
                text: "Try removing one dietary filter or changing your ingredients."
              };
            }

            if (!recipes.value.length) {
              return {
                title: "No recipes found",
                text: "Try broader ingredients such as chicken, rice, tomato, or pasta."
              };
            }

            return null;
          });

Template example:

          <div v-if="loading" class="alert alert-info">
            Searching recipes...
          </div>

          <div v-else-if="emptyState" class="alert alert-light border">
            <h3 class="h5">{{ emptyState.title }}</h3>
            <p class="mb-0">{{ emptyState.text }}</p>
          </div>

          <div v-else class="row g-4">
            <div
              v-for="recipe in visibleRecipes"
              :key="recipe.id"
              class="col-12 col-md-6 col-lg-4"
            >
              <RecipeCard :recipe="recipe" />
            </div>
          </div>

Pay attention to: Empty states should explain the situation and guide the next action. Separate initial, loading, error, no-result, filter-empty, and no-favorites states.