Added Searching Algorithms

Author: Skg58

public/searching.png

@@ -6,14 +6,15 @@ import GraphPage from "./pages/graph/GraphPage";
 import Homepage from "./pages/Homepage.jsx";
 import DSPage from "./pages/dataStructure/datastructurePage.jsx"
 import DynamicProgrammingPage from "./pages/dynamic-programming/DyanmicProgrammingPage.jsx";
-
+import Searchingpage from "./pages/searching/searchingPage";
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Homepage />} />
         {/* <Route path="/graph/union-find" element={<UnionFindPage />} /> */}
         <Route path="/sorting" element={<SortingPage />} />
+        <Route path="/searching" element={<Searchingpage />} />
         <Route path="/data-structures" element={<DSPage/>}/>
         <Route path="/graph" element={<GraphPage />} />
         <Route path="/dynamic-programming" element={<DynamicProgrammingPage />} />

src/App.jsx

@@ -0,0 +1,64 @@
+/**
+ * A generator function that performs Binary Search and yields visualization steps.
+ * @param {number[]} array - The array to search through (must be sorted).
+ * @param {number} target - The value to find.
+ * @yields {{lowIndex: number, highIndex: number, midIndex: number | null, foundIndex: number | null, message?: string}}
+ */
+export function* binarySearch(array, target) {
+    const targetNumber = parseInt(target);
+    let low = 0;
+    let high = array.length - 1;
+    let foundIndex = null;
+
+    // Initial state: show the full search range
+    yield { lowIndex: low, highIndex: high, midIndex: null, foundIndex: null };
+
+    while (low <= high) {
+        let mid = Math.floor((low + high) / 2);
+        
+        // Step 1: Highlight the middle element being compared (yellow)
+        yield { 
+            lowIndex: low, 
+            highIndex: high, 
+            midIndex: mid,
+            foundIndex: null
+        };
+
+        // Step 2: Check for the target
+        if (array[mid] === targetNumber) {
+            foundIndex = mid;
+            // Target found, yield the final state (green) and stop
+            yield { 
+                lowIndex: low, 
+                highIndex: high, 
+                midIndex: mid, 
+                foundIndex: foundIndex, 
+                message: `Success! Found target ${targetNumber} at index ${mid}` 
+            };
+            return; // Exit the generator
+        } else if (array[mid] < targetNumber) {
+            // Target is greater, search the right half. Discard the lower half by moving low.
+            low = mid + 1;
+        } else {
+            // Target is smaller, search the left half. Discard the upper half by moving high.
+            high = mid - 1;
+        }
+        
+        // Step 3: Yield the updated boundaries for visualization before the next comparison
+        yield { 
+            lowIndex: low, 
+            highIndex: high, 
+            midIndex: null, // Clear the mid highlight
+            foundIndex: null 
+        };
+    }
+
+    // If the loop finishes without finding the target
+    yield { 
+        lowIndex: low, 
+        highIndex: high, 
+        midIndex: null,
+        foundIndex: null,
+        message: `Target ${targetNumber} was not found in the array.` 
+    };
+}

src/algorithms/searching/BinarySearch.js

@@ -0,0 +1,38 @@
+/**
+ * A generator function that performs Linear Search and yields visualization steps.
+ * @param {number[]} array - The array to search through.
+ * @param {number} target - The value to find.
+ * @yields {{highlightIndex: number | null, foundIndex: number | null, message?: string}}
+ */
+export function* linearSearch(array, target) {
+    const targetNumber = parseInt(target); // Ensure target is a number
+    let foundIndex = null;
+
+    // Iterate through the array
+    for (let i = 0; i < array.length; i++) {
+        // 1. Yield the current index being compared (yellow highlight)
+        yield { 
+            highlightIndex: i, 
+            foundIndex: foundIndex 
+        };
+
+        // 2. Check for the target
+        if (array[i] === targetNumber) {
+            foundIndex = i;
+            // Target found, yield the final state (green) and return
+            yield { 
+                highlightIndex: i, 
+                foundIndex: foundIndex, 
+                message: `Success! Found target ${targetNumber} at index ${i}` 
+            };
+            return; // Stop the generator
+        }
+    }
+
+    // If the loop finishes without finding the target
+    yield { 
+        highlightIndex: null, // Clear highlight
+        foundIndex: null,     // Not found
+        message: `Target ${targetNumber} was not found in the array.`
+    };
+}

src/algorithms/searching/LinearSearch.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+const COLORS = {
+  default: "bg-blue-800",                                     // Bar outside the search range (eliminated)
+  activeRange: "bg-blue-500 shadow-[0_0_10px_#3b82f6]",      // Bar inside the current search range
+  comparing: "bg-yellow-400 shadow-[0_0_12px_#facc15]",      // Element currently being checked (mid)
+  found: "bg-green-500 shadow-[0_0_12px_#22c55e]",           // Target element found
+};
+
+export default function BinarySearchVisualizer({ 
+    array, 
+    lowIndex, 
+    highIndex, 
+    midIndex, 
+    foundIndex 
+}) {
+  const maxValue = Math.max(...array, 1);
+  const containerHeight = 288; // px (matches h-72)
+
+  return (
+    <div className="flex items-end justify-center space-x-2 h-72 mt-10 transition-all duration-500">
+      {array.map((value, idx) => {
+        let color = COLORS.default;
+
+        // 1. Check if the element is inside the current search range
+        if (idx >= lowIndex && idx <= highIndex) {
+            color = COLORS.activeRange;
+        }
+
+        // 2. Check if the element is currently being compared (mid)
+        if (idx === midIndex) {
+            color = COLORS.comparing;
+        }
+
+        // 3. Check if the element has been found (Highest priority)
+        if (idx === foundIndex) {
+          color = COLORS.found;
+        } 
+        
+        // Normalize height relative to the maximum value
+        const height = Math.max((value / maxValue) * containerHeight, 15);
+
+        return (
+          <div
+            key={idx}
+            className={`${color} w-6 transition-all duration-300 rounded-t-md`}
+            style={{ height: `${height}px` }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}

src/components/searching/BinarySearchVisualizer.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+// Updated colors for searching visualization
+const COLORS = {
+  default: "bg-blue-500 shadow-[0_0_10px_#3b82f6]",         // Default bar color
+  comparing: "bg-yellow-400 shadow-[0_0_12px_#facc15]",     // Element currently being checked
+  found: "bg-green-500 shadow-[0_0_12px_#22c55e]",           // Target element found
+  miss: "bg-red-500 shadow-[0_0_12px_#ef4444]",              // Optional: To highlight elements that were skipped (e.g., in Binary Search)
+};
+
+export default function LinearSearchVisualizer({ 
+    array, 
+    highlightIndex, 
+    foundIndex 
+}) {
+  const maxValue = Math.max(...array, 1);
+  const containerHeight = 288; // px (matches h-72)
+
+  return (
+    <div className="flex items-end justify-center space-x-2 h-72 mt-10 transition-all duration-500">
+      {array.map((value, idx) => {
+        let color = COLORS.default;
+
+        // 1. Check if the element has been found (Highest priority for the final result)
+        if (foundIndex === idx) {
+          color = COLORS.found;
+        } 
+        // 2. Check if the element is currently being compared
+        else if (highlightIndex === idx) {
+          color = COLORS.comparing;
+        }
+
+        // Normalize height relative to the maximum value
+        const height = Math.max((value / maxValue) * containerHeight, 15);
+
+        return (
+          <div
+            key={idx}
+            className={`${color} w-6 transition-all duration-300 rounded-t-md`}
+            style={{ height: `${height}px` }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}

src/components/searching/LinearSearchVisualizer.jsx

@@ -3,6 +3,7 @@ import { ArrowRight, Github } from "lucide-react";
 import sort from "../assets/sorting.png"
 import { useNavigate } from "react-router-dom";
 
+
 const sections = [
   {
     title: "Sorting Algorithms",
@@ -18,9 +19,9 @@ const sections = [
     description:
       "Understand linear and binary search methods through live visualization.",
     phase: "Phase 1 (MVP)",
-    img: "",
+    img: "/searching.png",
     link: "/searching",
-    flag: true
+    flag: false
   },
   {
     title: "Pathfinding Algorithms",
@@ -116,7 +117,7 @@ const Homepage = () => {
           <div
             key={index}
             onClick={() => section.link && navigate(section.link)}
-            className="relative group bg-white/10 border border-white/10 rounded-2xl overflow-hidden shadow-2xl hover:shadow-indigo-500/40 transition-all duration-300 backdrop-blur-md hover:-translate-y-2"
+            className="relative group bg-white/10 border border-white/10 rounded-2xl overflow-hidden shadow-2xl hover:shadow-indigo-500/40 cursor-pointer transition-all duration-300 backdrop-blur-md hover:-translate-y-2"
           >
             {/* Image */}
             <img
@@ -138,11 +139,11 @@ const Homepage = () => {
               {/* Explore Button */}
               <button
                 onClick={() =>
-                  section.route
-                    ? navigate(section.route)
+                  section.link
+                    ? navigate(section.link)
                     : alert("Coming soon 🚀")
                 }
-                className="mt-4 text-indigo-400 font-semibold flex items-center gap-1 hover:gap-2 transition-all"
+                className="mt-4 text-indigo-400 font-semibold flex items-center gap-1 hover:gap-2 cursor-pointer transition-all"
               >
                 Explore <ArrowRight size={16} />
               </button>