ingredients and steps on recipe page

backend/backendServer.js

@@ -33,7 +33,7 @@ app.get("/recipe/:id", async (req, res) => {
     const [recipe, ingredients, steps] = await Promise.all([recipeQuery, ingredientsQuery, stepsQuery]);
 
     const result = {
-      recipe: recipe[0],
+      details: recipe[0],
       ingredients: ingredients.map(ingredient => ({
         name: ingredient.name,
         quantity: ingredient.quantity,

frontend/src/components/RecipeCard.tsx

@@ -1,11 +1,23 @@
-import { type Recipe } from "../types/Recipe"
+import { type Recipe, type Ingredient } from "../types/Recipe"
 
 function RecipeCard({ recipe }: { recipe: Recipe }) {
   return (
     <div className="recipe-card">
       <div className="recipe-info">
-        <h3>{recipe.name}</h3>
+        <h3>{recipe.details.name}</h3>
-        <p>{recipe.cuisine}</p>
+        <p>{recipe.details.cuisine}</p>
+        <h4>Ingredients:</h4>
+        <ul>
+          {recipe.ingredients.map((ingredient: Ingredient, index) => (
+            <li key={index}>{ingredient.name} {ingredient.quantity} {ingredient.unit}</li>
+          ))}
+        </ul>
+        <h4>Steps:</h4>
+        <ol>
+          {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
+            <li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
+          ))}
+        </ol>
       </div>
     </div>
   );

frontend/src/pages/RecipePage.tsx

@@ -5,7 +5,11 @@ import { getRecipeById } from "../services/frontendApi.js";
 import { type Recipe } from "../types/Recipe"
 
 function RecipePage() {
-  const [recipe, setRecipe] = useState<Recipe>({});
+  const [recipe, setRecipe] = useState<Recipe>({
+    details: {},
+    ingredients: [],
+    steps: {}
+  });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const { id } = useParams();
@@ -24,7 +28,7 @@ function RecipePage() {
       }
     };
     loadRecipe();
-  }, []);
+  }, [id]);
 
   return (
     <div className="recipe">
@@ -35,7 +39,7 @@ function RecipePage() {
         <div className="loading">Loading...</div>
       ) : (
         <div className="recipe-card">
-          <RecipeCard recipe={recipe} key={recipe.id} />
+          <RecipeCard recipe={recipe} key={recipe.details.id} />
         </div>
       )}
     </div>

frontend/src/types/Recipe.ts

@@ -1,7 +1,22 @@
+interface Step {
+  [key: string]: string;
+  // [index: number]: string;
+}
+
+interface Ingredient {
+  name: string;
+  quantity: number;
+  unit: string;
+}
 interface Recipe {
+  details: {
     id?: number;
     name?: string;
     cuisine?: string;
+  },
+  ingredients: Ingredient[],
+  steps?: Step;
 }
 
-export type { Recipe }
+
+export type { Recipe, Ingredient, Step }