From 6f4c34166e17bfb87146d9ff2ebea56decf5fc23 Mon Sep 17 00:00:00 2001
From: Aditi Verma <aditi.verma21@ssipmt.com>
Date: Fri, 25 Oct 2024 22:33:37 +0530
Subject: [PATCH 1/5] Create RecipeOfTheDay.jsx

---
 frontend/src/Components/RecipeOfTheDay.jsx | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 frontend/src/Components/RecipeOfTheDay.jsx

diff --git a/frontend/src/Components/RecipeOfTheDay.jsx b/frontend/src/Components/RecipeOfTheDay.jsx
new file mode 100644
index 00000000..aa7ad138
--- /dev/null
+++ b/frontend/src/Components/RecipeOfTheDay.jsx
@@ -0,0 +1,33 @@
+// src/components/RecipeOfTheDay.jsx
+import React, { useEffect, useState } from 'react';
+
+function RecipeOfTheDay() {
+  const [recipe, setRecipe] = useState(null);
+
+  useEffect(() => {
+    // Fetch a random recipe from the API
+    fetch('/api/recipes/random')
+      .then((response) => response.json())
+      .then((data) => setRecipe(data))
+      .catch((error) => console.error('Error fetching recipe:', error));
+  }, []);
+
+  if (!recipe) return <p>Loading Recipe of the Day...</p>;
+
+  return (
+    <section className="recipe-of-the-day p-6 bg-gray-100 rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-4">Recipe of the Day</h2>
+      <div className="recipe-info">
+        <h3 className="text-xl font-semibold">{recipe.title}</h3>
+        <p>{recipe.description}</p>
+        <img
+          data-src={recipe.image}
+          alt={recipe.title}
+          className="lazyload w-full h-48 object-cover rounded-lg mt-4"
+        />
+      </div>
+    </section>
+  );
+}
+
+export default RecipeOfTheDay;

From e35ecabbdcfe37d67f3ced2519f471b129539bf2 Mon Sep 17 00:00:00 2001
From: Aditi Verma <aditi.verma21@ssipmt.com>
Date: Fri, 25 Oct 2024 22:40:27 +0530
Subject: [PATCH 2/5] Update App.jsx

---
 frontend/src/App.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3b664c2c..13f0ee18 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import React from "react";
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "./App.css";
 import Navbar from "./Components/Navbar.jsx";
@@ -20,6 +19,7 @@ import Contributors from "./Pages/Contributors.jsx"; // Import the Contributors
 import PrivacyPolicy from "./Components/PrivacyPolicy.jsx";
 import NotFound from "./Pages/NotFound.jsx";
 import RecipeSuggestions from "./Pages/RecipeSuggestions.jsx";
+import RecipeOfTheDay from "./Components/RecipeOfTheDay.jsx"; // Import RecipeOfTheDay component
 
 function App() {
   const [showScroll, setShowScroll] = useState(false);
@@ -82,10 +82,12 @@ function App() {
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/recipe-suggestions" element={<RecipeSuggestions />} />
           <Route path="*" element={<NotFound />} />
-          {/* Add Contributors route */}
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
-          {/* Added Privacy-policy route */}
         </Routes>
+
+        {/* Add Recipe of the Day section on the homepage */}
+        <Route path="/" element={<RecipeOfTheDay />} />
+
         <Footer />
       </BrowserRouter>
 

From efb08b25ea1a99af688780cc11b7f711edc3ec27 Mon Sep 17 00:00:00 2001
From: Aditi Verma <aditi.verma21@ssipmt.com>
Date: Fri, 25 Oct 2024 22:41:42 +0530
Subject: [PATCH 3/5] Create recipes.js

---
 backend/routes/recipes.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 backend/routes/recipes.js

diff --git a/backend/routes/recipes.js b/backend/routes/recipes.js
new file mode 100644
index 00000000..e7c02a4f
--- /dev/null
+++ b/backend/routes/recipes.js
@@ -0,0 +1,18 @@
+// backend/routes/recipes.js
+const express = require('express');
+const router = express.Router();
+const Recipe = require('../models/Recipe');
+
+// Endpoint to fetch a random recipe
+router.get('/random', async (req, res) => {
+  try {
+    const count = await Recipe.countDocuments();
+    const randomIndex = Math.floor(Math.random() * count);
+    const randomRecipe = await Recipe.findOne().skip(randomIndex);
+    res.json(randomRecipe);
+  } catch (error) {
+    res.status(500).json({ message: 'Error fetching random recipe' });
+  }
+});
+
+module.exports = router;

From 044f6133f021640faa3e6295add2e2583f6f95fb Mon Sep 17 00:00:00 2001
From: Aditi Verma <aditi.verma21@ssipmt.com>
Date: Fri, 25 Oct 2024 22:44:46 +0530
Subject: [PATCH 4/5] Update App.css

---
 frontend/src/App.css | 110 ++++++++++++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 42 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 8419445a..293ecf99 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,4 @@
+/* General Font and Layout */
 * {
   font-family: 'Roboto', sans-serif;
 }
@@ -15,82 +16,123 @@
   background-size: cover;
 }
 
-.error{
+.error {
   margin-top: 0 !important;
 }
 
 /* Animations */
 .animated-text {
-  animation: scaleText .7s ease-in-out 1 alternate; /* Animation properties */
+  animation: scaleText .7s ease-in-out 1 alternate;
   transition: all smooth;
 }
 
 @keyframes scaleText {
   from {
-    font-size: 8rem; /* Initial font size */
+    font-size: 8rem;
   }
   to {
-    font-size: 4rem; /* Final font size */
+    font-size: 4rem;
   }
 }
 
+/* Recipe of the Day Section */
+.recipe-of-the-day {
+  background-color: #fff8f8; /* Light background for contrast */
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
+  padding: 24px;
+  margin: 20px auto;
+  max-width: 800px;
+  text-align: center;
+}
 
+.recipe-of-the-day h2 {
+  font-size: 2.5rem;
+  color: #B91C1C;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
 
-::-webkit-scrollbar {
-  width: 7px;
+.recipe-of-the-day .recipe-info h3 {
+  font-size: 2rem;
+  color: #333;
+  margin-top: 10px;
 }
 
-/* Track */
-::-webkit-scrollbar-track {
-  background: #fafafc; 
+.recipe-of-the-day img {
+  width: 100%;
+  max-height: 250px;
+  object-fit: cover;
+  border-radius: 10px;
+  margin-top: 12px;
+  transition: transform 0.3s ease;
 }
 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background:  #B91C1C !important;
-  border-radius: 12px !important;
+.recipe-of-the-day img:hover {
+  transform: scale(1.05); /* Slight zoom on hover */
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background:  #B91C1C!important;
-  border-radius: 12px !important;
+.recipe-of-the-day p {
+  font-size: 1.1rem;
+  color: #666;
+  margin-top: 12px;
+  line-height: 1.6;
 }
 
+/* Clamped Text for Description */
+.clamped-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4; /* Limit description to 4 lines */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Scrollbar */
 ::-webkit-scrollbar {
   width: 7px;
 }
 
-/* Track */
 ::-webkit-scrollbar-track {
   background: #fafafc; 
 }
 
-/* Handle */
 ::-webkit-scrollbar-thumb {
-  background:  #B91C1C !important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background:  #B91C1C!important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
+/* Responsive Recipe of the Day */
 @media (max-width: 600px) {
-  ::-webkit-scrollbar {
-    width: 7px;
+  .recipe-of-the-day h2 {
+    font-size: 2rem;
+  }
+  
+  .recipe-of-the-day .recipe-info h3 {
+    font-size: 1.5rem;
+  }
+
+  .recipe-of-the-day p {
+    font-size: 1rem;
   }
 
-  ::-webkit-scrollbar-thumb {
-    background: #B91C1C;
+  ::-webkit-scrollbar {
+    width: 5px;
   }
 }
 
-.navbar{
+/* Navbar */
+.navbar {
   background-color: #fed4d4;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+/* Utility classes */
 .text-\[4rem\] {
   font-size: 4.2rem !important;
 }
@@ -102,19 +144,3 @@
 .leading-relaxed {
   text-align: justify;
 }
-
-/* ADD THE CLASS OF CLAMPED-TEXT  */
-.clamped-text {
-  display: -webkit-box; 
-  -webkit-box-orient: vertical; /* Define the orientation as vertical */
-  -webkit-line-clamp: 4; /* Limit the number of lines to 4 */
-  overflow: hidden; /* Hide any overflowed content */
-  text-overflow: ellipsis; /* Add ellipsis (...) for overflow */
-}
-
-
-
-
-
-
-

From fd200e3bce7b6e91548d0ac6ce2c7ce80f45e75e Mon Sep 17 00:00:00 2001
From: Aditi Verma <aditi.verma21@ssipmt.com>
Date: Mon, 28 Oct 2024 23:08:49 +0530
Subject: [PATCH 5/5] Delete backend/routes/recipes.js

---
 backend/routes/recipes.js | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 backend/routes/recipes.js

diff --git a/backend/routes/recipes.js b/backend/routes/recipes.js
deleted file mode 100644
index e7c02a4f..00000000
--- a/backend/routes/recipes.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// backend/routes/recipes.js
-const express = require('express');
-const router = express.Router();
-const Recipe = require('../models/Recipe');
-
-// Endpoint to fetch a random recipe
-router.get('/random', async (req, res) => {
-  try {
-    const count = await Recipe.countDocuments();
-    const randomIndex = Math.floor(Math.random() * count);
-    const randomRecipe = await Recipe.findOne().skip(randomIndex);
-    res.json(randomRecipe);
-  } catch (error) {
-    res.status(500).json({ message: 'Error fetching random recipe' });
-  }
-});
-
-module.exports = router;