checkpoint

frontend/src/pages/AddRecipe.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
+import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
+import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
@@ -47,6 +49,10 @@ function AddRecipe() {
           submit
         </button>
       </form>
+      <div>
+        <AddIngredientsForm />
+        <AddBulkIngredients />
+      </div>
     </div>
   )
 }

frontend/src/pages/Cookbook.tsx

@@ -46,7 +46,7 @@ function Cookbook() {
       ) : (
         <div className="recipes-grid">
           {recipes.map((recipe: Recipe) => (
-            <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+            <CookbookRecipeTile recipe={recipe} key={recipe.details.id} handleDelete={handleDelete} />
           ))}
         </div>
       )}