feat: implemented sudoku solver by recursion and backtracking

src/algorithms/Recursion/sudokuSolver.js

@@ -0,0 +1,44 @@
+function isSafe(board, r, c, num) {
+  for (let x = 0; x < 9; x++) {
+    if (board[r][x] === num || board[x][c] === num) return false;
+  }
+
+  const startRow = r - (r % 3);
+  const startCol = c - (c % 3);
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      if (board[startRow + i][startCol + j] === num) return false;
+    }
+  }
+
+  return true;
+}
+
+export async function solveSudoku(board, visualizeStep, r = 0, c = 0) {
+  if (r === 9) return true;
+  if (c === 9) return await solveSudoku(board, visualizeStep, r + 1, 0);
+  if (board[r][c] !== 0) return await solveSudoku(board, visualizeStep, r, c + 1);
+
+  for (let num = 1; num <= 9; num++) {
+    if (isSafe(board, r, c, num)) {
+      board[r][c] = num;
+      visualizeStep(r, c, num, "filled");
+      await sleep(50);
+
+      if (await solveSudoku(board, visualizeStep, r, c + 1)) return true;
+
+
+      board[r][c] = 0;
+      visualizeStep(r, c, 0, "backtrack");
+      await sleep(50);
+    } else {
+      visualizeStep(r, c, num, "trying");
+      await sleep(20);
+    }
+  }
+  return false;
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

src/components/Recursion/sudokuSolver.jsx

@@ -0,0 +1,84 @@
+// src/components/Recursion/SudokuVisualizer.jsx
+import React, { useState } from "react";
+import { solveSudoku } from "../../algorithms/Recursion/sudokuSolver";
+
+export default function SudokuVisualizer() {
+  const initialBoard = [
+    [5, 3, 0, 0, 7, 0, 0, 0, 0],
+    [6, 0, 0, 1, 9, 5, 0, 0, 0],
+    [0, 9, 8, 0, 0, 0, 0, 6, 0],
+    [8, 0, 0, 0, 6, 0, 0, 0, 3],
+    [4, 0, 0, 8, 0, 3, 0, 0, 1],
+    [7, 0, 0, 0, 2, 0, 0, 0, 6],
+    [0, 6, 0, 0, 0, 0, 2, 8, 0],
+    [0, 0, 0, 4, 1, 9, 0, 0, 5],
+    [0, 0, 0, 0, 8, 0, 0, 7, 9],
+  ];
+
+  const [grid, setGrid] = useState(initialBoard);
+  const [cellStatus, setCellStatus] = useState({});
+  const [solving, setSolving] = useState(false);
+
+  const visualizeStep = (r, c, val, status) => {
+    setGrid((prev) => {
+      const copy = prev.map((row) => row.slice());
+      copy[r][c] = val;
+      return copy;
+    });
+
+    setCellStatus((prev) => ({
+      ...prev,
+      [`${r}-${c}`]: status,
+    }));
+  };
+
+  const handleSolve = async () => {
+    setSolving(true);
+    const copy = grid.map((row) => row.slice());
+    await solveSudoku(copy, visualizeStep);
+    setSolving(false);
+  };
+
+  return (
+    <div className="flex flex-col items-center p-4">
+      <h2 className="text-xl font-bold mb-4 text-white">Sudoku Solver Visualizer </h2>
+
+      <div
+        className="grid"
+        style={{
+          gridTemplateColumns: "repeat(9, 40px)",
+          gridTemplateRows: "repeat(9, 40px)",
+          gap: "2px",
+        }}
+      >
+        {grid.map((row, r) =>
+          row.map((val, c) => {
+            const status = cellStatus[`${r}-${c}`];
+            let bg = "bg-gray-800";
+
+            if (status === "filled") bg = "bg-green-500";
+            else if (status === "trying") bg = "bg-yellow-400";
+            else if (status === "backtrack") bg = "bg-red-500";
+
+            return (
+              <div
+                key={`${r}-${c}`}
+                className={`w-10 h-10 flex justify-center items-center text-white text-lg font-medium border border-gray-600 ${bg}`}
+              >
+                {val !== 0 ? val : ""}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      <button
+        onClick={handleSolve}
+        disabled={solving}
+        className="mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium disabled:opacity-50"
+      >
+        {solving ? "Solving..." : "Start Visualization"}
+      </button>
+    </div>
+  );
+}

src/pages/Recursion/RecursionPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { X, Menu } from "lucide-react";
 import MazeSolver from "./MazeSolver";
 import NQueens from "./NQueens";
+import Sudoku from "./sudokuSolver";
 export default function RecursionPage() {
   const [selectedAlgo, setSelectedAlgo] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -20,6 +21,13 @@ export default function RecursionPage() {
             <NQueens />
           </div>
         );
+      case "SudokuSolver":
+        return(
+          <div className="w-full p-4 overflow-auto">
+            <Sudoku />
+          </div>
+        );
+
       default:
         return (
           <div className="flex flex-col items-center justify-center text-center p-6 min-h-screen bg-gray-900 text-gray-300">
@@ -62,6 +70,7 @@ export default function RecursionPage() {
           <option value="">Select Algorithm</option>
           <option value="MazeSolver">Maze Solver</option>
           <option value="NQueens">NQueens</option>
+          <option value="SudokuSolver">Sudoku Solver</option>
         </select>
 
         <button

src/pages/Recursion/sudokuSolver.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import SudokuVisualizer from "../../components/Recursion/sudokuSolver";
+
+export default function Sudoku(){
+    return <SudokuVisualizer />
+}