resolved the issue

Author: shivam7147

package-lock.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"
   }
-}
+}

package.json

@@ -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/App.jsx

@@ -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/algorithms/sorting/selectionSort.js

@@ -0,0 +1,34 @@
+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 }) {
+  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;
+
+        const height = Math.max(value * 5, 15); // Ensures visibility for small numbers
+
+        return (
+          <div
+            key={idx}
+            className={`${color} w-6 transition-all duration-300 rounded-t-md`}
+            style={{ height: `${height}px` }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}

src/components/sorting/SelectionSortVisualizer.jsx

@@ -1,61 +1,72 @@
 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",
   },
   {
     title: "Searching Algorithms",
     description:
       "Understand linear and binary search methods through live visualization.",
     phase: "Phase 1 (MVP)",
     img: "",
+    link: "/searching"
   },
   {
     title: "Pathfinding Algorithms",
     description:
       "Watch how A*, Dijkstra and BFS explore grids to find the optimal path.",
     phase: "Phase 1 (MVP)",
     img: "",
+    link: "/pathfinding"
   },
   {
     title: "Graph Algorithms",
     description:
       "Explore BFS, DFS, Kruskal’s, Prim’s, and more — all brought to life interactively.",
     phase: "Phase 2",
     img: "",
+    link: "/graphs"
   },
   {
     title: "Recursion & Backtracking",
     description:
       "Visualize recursive calls and backtracking patterns like N-Queens or Sudoku.",
     phase: "Phase 2",
     img: "",
+    link: "/recursion"
   },
   {
     title: "Data Structures Visualization",
     description:
       "Interactively understand stacks, queues, linked lists, trees, and heaps.",
     phase: "Phase 2",
     img: "",
+    link: "/data-structures"
   },
   {
     title: "Dynamic Programming",
     description:
       "Step through state transitions and table updates to grasp DP intuitively.",
     phase: "Phase 3",
     img: "",
+    link: "/dynamic-programming"
   },
 ];
 
 
 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 +104,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 */}

src/pages/Homepage.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { Toaster } from "react-hot-toast";
+import SelectionSortVisualizer from "../../components/sorting/SelectionSortVisualizer";
+import { selectionSort } from "../../algorithms/sorting/selectionSort";
+
+export default function SelectionSort() {
+  const [array, setArray] = useState([]);
+  const [input, setInput] = useState("");
+  const [highlight, setHighlight] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleStart = async () => {
+    if (isRunning || array.length === 0) return;
+    setIsRunning(true);
+
+    const gen = selectionSort(array);
+    for (let step of gen) {
+      setHighlight(step);
+      if (step.array) setArray([...step.array]);
+      await new Promise((r) => setTimeout(r, 500));
+    }
+
+    setHighlight({ type: "done" });
+    setIsRunning(false);
+  };
+
+  const handleReset = () => {
+    setArray([]);
+    setInput("");
+    setHighlight(null);
+  };
+
+  const handleInput = (e) => {
+    setInput(e.target.value);
+    const numbers = e.target.value
+      .split(",")
+      .map((n) => parseInt(n.trim()))
+      .filter((n) => !isNaN(n));
+    setArray(numbers);
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-gray-200 flex flex-col items-center p-6">
+      <Toaster position="top-center" />
+      <h1 className="text-4xl font-extrabold mb-8 text-indigo-400 drop-shadow-lg">
+        Selection Sort Visualizer
+      </h1>
+
+      <input
+        type="text"
+        value={input}
+        onChange={handleInput}
+        placeholder="Enter numbers separated by commas"
+        className="border-2 border-indigo-500 bg-gray-900 text-indigo-200 rounded-lg p-3 w-96 text-center shadow-lg focus:ring-2 focus:ring-indigo-400 outline-none"
+      />
+
+      <div className="space-x-4 mt-6">
+        <button
+          onClick={handleStart}
+          disabled={isRunning}
+          className={`${
+            isRunning
+              ? "bg-indigo-700 text-gray-300 cursor-not-allowed"
+              : "bg-indigo-600 hover:bg-indigo-500"
+          } px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-all duration-300`}
+        >
+          {isRunning ? "Sorting..." : "Start Visualization"}
+        </button>
+        <button
+          onClick={handleReset}
+          className="bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-all duration-300"
+        >
+          Reset
+        </button>
+      </div>
+
+      <div className="mt-15">
+        <SelectionSortVisualizer array={array} highlight={highlight} />
+      </div>
+
+    </div>
+  );
+}