implemented both dynamic metadata on the recipe detail page so that each recipe has unique SEO information & SEO best practices.

.github/workflows/node.js.yml

@@ -0,0 +1,35 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+env:
+  MONGODB_URI: ${{ vars.MONGODB_URI }}
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    environment: build
+    env: 
+      MONGODB_URI: ${{ secrets.MONGODB_URI }}
+      NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm run build

app/api/recipe/[id]/route.js

@@ -0,0 +1,26 @@
+import connectToDatabase from "@/lib/connectMongoose";
+import Recipe from "@/models/Recipe";
+import { NextResponse } from "next/server";
+import mongoose from "mongoose";
+
+/**
+ *
+ * @param {*} req
+ * @param {id} param1 - This Will get the exact recipe id from database
+ * @returns - The recipe object by its Id
+ */
+
+export async function GET(req, { params }) {
+  try {
+    let { id } = params;
+    console.log(id)
+    // id = new mongoose.Types.ObjectId();
+    console.log(id)
+    await connectToDatabase();
+    const recipe = await Recipe.findOne({ _id: id });
+
+    return NextResponse.json({ recipe }, { status: 200 });
+  } catch (error) {
+    console.error(error);
+  }
+}

app/api/recipe/route.js

@@ -0,0 +1,32 @@
+import connectToDatabase from "@/lib/connectMongoose";
+import Recipe from "@/models/Recipe";
+import { NextResponse } from "next/server";
+
+export async function GET(req) {
+  try {
+    await connectToDatabase(); // Ensure the database is connected
+
+    const { search } = req.nextUrl.searchParams; // Get the 'search' query parameter
+    let query = {};
+
+    // Check if the search parameter is provided and build the query
+    if (search) {
+      query = {
+        $or: [
+          { name: { $regex: search, $options: "i" } }, // Assuming 'name' is a field in your Recipe model
+          { ingredients: { $regex: search, $options: "i" } } // Assuming 'ingredients' is another field
+        ]
+      };
+    }
+
+    // Fetch recipes based on the search query
+    const recipes = await Recipe.find(query).limit(50); // Limit to 50 results
+    return NextResponse.json({ success: true, recipes }); // Respond with recipes
+  } catch (error) {
+    console.error("Error searching recipes:", error);
+    return NextResponse.json(
+      { success: false, message: "Failed to search recipes." },
+      { status: 500 } // Return a 500 status code
+    );
+  }
+}

app/components/ClientNavWrapper.jsx

@@ -0,0 +1,23 @@
+// components/ClientNavWrapper.jsx
+'use client';
+import { useState, useEffect } from 'react';
+import React from 'react';
+
+export default function ClientNavWrapper({ children }) {
+  const [navbarPosition, setNavbarPosition] = useState(0);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'ArrowLeft') {
+        setNavbarPosition((prev) => Math.max(prev - 10, -100));
+      } else if (e.key === 'ArrowRight') {
+        setNavbarPosition((prev) => Math.min(prev + 10, 100));
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return React.cloneElement(children, { position: navbarPosition });
+}

app/components/Footer.jsx

@@ -0,0 +1,141 @@
+import { AiOutlineArrowRight } from 'react-icons/ai'; // Correct icon import for ArrowRight
+import { FaUtensils, FaEnvelope, FaPhone, FaMapPin, FaTwitter, FaYoutube, FaFacebook, FaInstagram } from 'react-icons/fa'; // Correct icon imports
+import Link from 'next/link'; // Corrected import for Link
+
+const Footer = () => {
+    const socialLinks = [
+      { 
+        icon: FaTwitter, 
+        href: 'https://twitter.com', 
+        color: 'hover:text-[#1DA1F2] transition-colors duration-300',
+        label: 'Twitter'
+      },
+      { 
+        icon: FaYoutube, 
+        href: 'https://youtube.com', 
+        color: 'hover:text-[#FF0000] transition-colors duration-300',
+        label: 'YouTube'
+      },
+      { 
+        icon: FaFacebook, 
+        href: 'https://facebook.com', 
+        color: 'hover:text-[#4267B2] transition-colors duration-300',
+        label: 'Facebook'
+      },
+      { 
+        icon: FaInstagram, 
+        href: 'https://instagram.com', 
+        color: 'hover:text-[#E1306C] transition-colors duration-300',
+        label: 'Instagram'
+      },
+    ];
+
+    const quickLinks = [
+      { name: 'About Us', href: '/about' },
+      { name: 'Contact', href: '/contact' },
+      { name: 'Recipe Index', href: '/recipes' },
+      { name: 'Privacy Policy', href: '/privacy' },
+      { name: 'Terms of Service', href: '/terms' },
+    ];
+
+    return (
+      <footer className="bg-gray-900 text-white mt-auto">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Main Footer Content */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 py-12">
+            {/* About Section */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold flex items-center">
+                <FaUtensils className="h-6 w-6 mr-2" />
+                RecipeApp
+              </h3>
+              <p className="text-gray-400">
+                Discover and share delicious recipes from around the world.
+              </p>
+            </div>
+
+            {/* Quick Links */}
+            <div>
+              <h3 className="text-xl font-semibold mb-4">Quick Links</h3>
+              <ul className="space-y-2">
+                {quickLinks.map((link) => (
+                  <li key={link.name}>
+                    <Link 
+                      href={link.href}
+                      className="text-gray-400 hover:text-white flex items-center group"
+                    >
+                      <AiOutlineArrowRight className="h-4 w-4 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                      {link.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Contact Info */}
+            <div>
+              <h3 className="text-xl font-semibold mb-4">Contact Us</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li className="flex items-center">
+                  <FaEnvelope className="h-4 w-4 mr-2" />
+                  [email protected]
+                </li>
+                <li className="flex items-center">
+                  <FaPhone className="h-4 w-4 mr-2" />
+                  +1 (555) 123-4567
+                </li>
+                <li className="flex items-center">
+                  <FaMapPin className="h-4 w-4 mr-2" />
+                  123 Recipe Street, Foodville
+                </li>
+              </ul>
+            </div>
+
+            {/* Newsletter */}
+            <div>
+              <h3 className="text-xl font-semibold mb-4">Newsletter</h3>
+              <p className="text-gray-400 mb-4">
+                Subscribe for new recipes and cooking tips.
+              </p>
+              <form className="space-y-2">
+                <input
+                  type="email"
+                  placeholder="Your email"
+                  className="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+                <button className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md transition duration-300">
+                  Subscribe
+                </button>
+              </form>
+            </div>
+          </div>
+
+          {/* Social Links */}
+          <div className="border-t border-gray-800 py-8">
+            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+              <div className="flex space-x-6">
+                {socialLinks.map((social) => (
+                  <a
+                    key={social.label}
+                    href={social.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`text-gray-400 ${social.color}`}
+                    aria-label={social.label}
+                  >
+                    <social.icon className="h-6 w-6" />
+                  </a>
+                ))}
+              </div>
+              <p className="text-gray-400">
+                &copy; {new Date().getFullYear()} RecipeApp. All rights reserved.
+              </p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    );
+};
+
+export default Footer;
+