fix

app/api/recipes.js

@@ -0,0 +1,32 @@
+import clientPromise from "../../lib/mongodb";
+
+/**
+ * API route handler for fetching all recipes from the 'recipes' collection in MongoDB.
+ *
+ * @async
+ * @function
+ * @param {Object} _req - The request object (not used in this case).
+ * @param {Object} res - The response object used to send back the result.
+ * @returns {Promise<void>} Sends a JSON response containing the fetched recipes or an error message.
+ */
+ const fetchRecipes  = async (_req, res) => {
+  try {
+    // Await the MongoDB client connection
+    const client = await clientPromise;
+    const db = client.db('devdb'); // Connect to the 'devdb' database
+
+    // Fetch all documents from the 'recipes' collection and convert them to an array
+    const recipes = await db.collection('recipes').find({}).toArray();
+
+    // Send a 200 (OK) response with the fetched recipes in JSON format
+    res.status(200).json(recipes);
+  } catch (e) {
+    // Log the error to the console for debugging
+    console.error(e);
+
+    // Send a 500 (Internal Server Error) response with an error message
+    res.status(500).json({ error: 'Failed to fetch data' });
+  }
+};
+
+export default fetchRecipes;

app/globals.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

lib/mongodb.js

@@ -0,0 +1,37 @@
+import { MongoClient } from 'mongodb';
+
+const uri = "mongodb+srv://group-b:[email protected]/devdb?retryWrites=true&w=majority"; 
+let client;
+let clientPromise;
+
+/**
+ * Throws an error if the MongoDB URI is not present in environment variables.
+ * @throws Will throw an error if MONGODB_URI is not defined in the environment variables.
+ */
+if (!process.env.MONGODB_URI) {
+  throw new Error("Please add your MongoDB URI to the environment variables");
+}
+
+const options = {};
+
+/**
+ * In development mode, this ensures that the MongoClient instance is reused across hot reloads.
+ * This prevents creating new instances of MongoClient each time a change occurs.
+ */
+if (process.env.NODE_ENV === "development") {
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri, options);
+    global._mongoClientPromise = client.connect();
+  }
+  clientPromise = global._mongoClientPromise;
+} else {
+  // In production mode, create a new MongoClient and connect.
+  client = new MongoClient(uri, options);
+  clientPromise = client.connect();
+}
+
+/**
+ * Exports a promise that resolves to the MongoClient instance.
+ * @type {Promise<MongoClient>}
+ */
+export default clientPromise;