Remove axios and use fetch

frontend/src/api.js

@@ -1,31 +1,43 @@
-import axios from "axios";
-
 const API_BASE = "http://localhost:8000";
 
 export async function getRecipes() {
-  const res = await axios.get(`${API_BASE}/recipes`);
-  return res.data;
+  const res = await fetch(`${API_BASE}/recipes`);
+  if (!res.ok) {
+    throw new Error("Failed to fetch recipes");
+  }
+  return res.json();
 }
 
 export async function getRandomRecipe(filters) {
-  const params = {};
-  if (filters.mealType) params.meal_type = filters.mealType;
-  if (filters.maxTime) params.max_time = filters.maxTime;
+  const params = new URLSearchParams();
+  if (filters.mealType) params.append("meal_type", filters.mealType);
+  if (filters.maxTime) params.append("max_time", filters.maxTime);
 
   if (filters.ingredients && filters.ingredients.length > 0) {
     filters.ingredients.forEach((ing) => {
-      params.ingredients = params.ingredients || [];
-      params.ingredients.push(ing);
+      params.append("ingredients", ing);
     });
   }
 
-  const res = await axios.get(`${API_BASE}/recipes/random`, { params });
-  return res.data;
+  const queryString = params.toString();
+  const url = queryString ? `${API_BASE}/recipes/random?${queryString}` : `${API_BASE}/recipes/random`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error("Failed to fetch random recipe");
+  }
+  return res.json();
 }
 
 export async function createRecipe(recipe) {
-  const res = await axios.post(`${API_BASE}/recipes`, recipe);
-  return res.data;
+  const res = await fetch(`${API_BASE}/recipes`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(recipe),
+  });
+  if (!res.ok) {
+    throw new Error("Failed to create recipe");
+  }
+  return res.json();
 }
 
 export async function updateRecipe(id, payload) {