Implemented Selection Sort Visualizer

package.json

@@ -19,9 +19,11 @@
     "@tailwindcss/vite": "^4.1.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.545.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hot-toast": "^2.6.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.9.4",
     "socket.io-client": "^4.8.1",
@@ -43,4 +45,4 @@
     "tw-animate-css": "^1.4.0",
     "vite": "^7.1.7"
   }
-}
+}

src/App.jsx

@@ -1,8 +1,17 @@
 import React from "react";
-import Homepage from "../src/pages/Homepage.jsx";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Homepage from "./pages/Homepage";
+import SortingPage from "./pages/sorting/SortingPage";
 
 function App() {
-  return <Homepage />;
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Homepage />} />
+        <Route path="/sorting" element={<SortingPage />} />
+      </Routes>
+    </Router>
+  );
 }
 
 export default App;

src/algorithms/sorting/selectionSort.js

@@ -0,0 +1,26 @@
+// src/algorithms/sorting/selectionSort.js
+export function* selectionSort(array) {
+  const arr = [...array];
+  const n = arr.length;
+
+  for (let i = 0; i < n - 1; i++) {
+    let minIndex = i;
+    yield { type: "compare", indices: [i] };
+
+    for (let j = i + 1; j < n; j++) {
+      yield { type: "compare", indices: [minIndex, j] };
+
+      if (arr[j] < arr[minIndex]) {
+        minIndex = j;
+        yield { type: "min", index: minIndex };
+      }
+    }
+
+    if (minIndex !== i) {
+      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
+      yield { type: "swap", indices: [i, minIndex], array: [...arr] };
+    }
+  }
+
+  yield { type: "done", array: arr };
+}

src/components/sorting/SelectionSortVisualizer.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const COLORS = {
+  default: "bg-blue-500 shadow-[0_0_10px_#3b82f6]",
+  comparing: "bg-yellow-400 shadow-[0_0_12px_#facc15]",
+  min: "bg-green-500 shadow-[0_0_12px_#22c55e]",
+  swap: "bg-red-500 shadow-[0_0_12px_#ef4444]",
+};
+
+export default function SelectionSortVisualizer({ array, highlight }) {
+  const maxValue = Math.max(...array, 1); // Avoid division by zero
+  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;
+        if (highlight?.type === "compare" && highlight.indices?.includes(idx))
+          color = COLORS.comparing;
+        if (highlight?.type === "min" && highlight.index === idx)
+          color = COLORS.min;
+        if (highlight?.type === "swap" && highlight.indices?.includes(idx))
+          color = COLORS.swap;
+
+        // Normalize height relative to the maximum value
+        const height = Math.max((value / maxValue) * containerHeight, 15); // minimum 15px for visibility
+
+        return (
+          <div
+            key={idx}
+            className={`${color} w-6 transition-all duration-300 rounded-t-md`}
+            style={{ height: `${height}px` }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}

src/pages/Homepage.jsx

@@ -1,61 +1,79 @@
 import React from "react";
 import { ArrowRight, Github } from "lucide-react";
 import sort from "../assets/sorting.png"
+import { useNavigate } from "react-router-dom";
+
 
 const sections = [
   {
     title: "Sorting Algorithms",
     description:
       "Visualize step-by-step how sorting algorithms organize data efficiently.",
     phase: "Phase 1 (MVP)",
-    img: {sort},
+    img: "https://tamimehsan.github.io/AlgorithmVisualizer/images/sort.png?height=200&width=300",
+     link: "/sorting",
+     flag: false
   },
   {
     title: "Searching Algorithms",
     description:
       "Understand linear and binary search methods through live visualization.",
     phase: "Phase 1 (MVP)",
     img: "",
+    link: "/searching",
+    flag: true
   },
   {
     title: "Pathfinding Algorithms",
     description:
       "Watch how A*, Dijkstra and BFS explore grids to find the optimal path.",
     phase: "Phase 1 (MVP)",
     img: "",
+    link: "/pathfinding",
+    flag: true
   },
   {
     title: "Graph Algorithms",
     description:
       "Explore BFS, DFS, Kruskal’s, Prim’s, and more — all brought to life interactively.",
     phase: "Phase 2",
     img: "",
+    link: "/graphs",
+    flag: true
   },
   {
     title: "Recursion & Backtracking",
     description:
       "Visualize recursive calls and backtracking patterns like N-Queens or Sudoku.",
     phase: "Phase 2",
     img: "",
+    link: "/recursion",
+    flag: true
   },
   {
     title: "Data Structures Visualization",
     description:
       "Interactively understand stacks, queues, linked lists, trees, and heaps.",
     phase: "Phase 2",
     img: "",
+    link: "/data-structures",
+    flag: true
   },
   {
     title: "Dynamic Programming",
     description:
       "Step through state transitions and table updates to grasp DP intuitively.",
     phase: "Phase 3",
     img: "",
+    link: "/dynamic-programming",
+    flag: true
   },
 ];
 
 
 const Homepage = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="min-h-screen w-full text-white flex flex-col items-center overflow-x-hidden relative">
       {/* Full-Page Animated Gradient Background */}
@@ -93,6 +111,7 @@ const Homepage = () => {
         {sections.map((section, index) => (
           <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"
           >
             {/* Image */}
@@ -119,9 +138,11 @@ const Homepage = () => {
             </div>
 
             {/* SaaS-style “Coming Soon” Overlay */}
-            <div className="absolute inset-0 flex items-center justify-center text-white text-lg font-semibold bg-gradient-to-br from-indigo-700/70 to-purple-900/70 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-              Coming Soon 🚀
-            </div>
+        {section.flag && (
+  <div className="absolute inset-0 flex items-center justify-center text-white text-lg font-semibold bg-gradient-to-br from-indigo-700/70 to-purple-900/70 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+    Coming Soon 🚀
+  </div>
+)}
           </div>
         ))}
       </section>