Merge branch 'main' into tree

Author: indrasuthar07

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+.gitignore
+README.md

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:22-alpine
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev"]

README.md

@@ -44,6 +44,31 @@ Understand searching logic through dynamic comparisons.
 
 ---
 
+#### 🔹 Sliding Window Algorithms
+Demonstrate how the sliding window technique optimizes time complexity in problems involving subarrays and substrings.
+
+**Algorithms Included:**
+- Maximum Sum of Subarray of Size K  
+
+**Interactive Options:**
+- Adjust window size  
+- Control animation speed  
+- Real-time window movement visualization  
+- Dynamic highlighting of elements within the window  
+- Step-by-step explanation of window expansion and contraction  
+
+**Algorithm Overview:**
+The Sliding Window technique maintains a subset of elements using two pointers (start, end) that "slide" over the array or string to efficiently compute results without redundant recalculations.
+
+**General Approach:**
+1. Initialize start and end pointers
+2. Expand the window by moving end
+3. Process or evaluate current window state
+4. Shrink the window from start when constraints are violated
+5. Update the result as needed during traversal
+
+---
+
 #### 🔹 Pathfinding Algorithms (Graph / 2D Grid)
 Visualize how algorithms explore and find paths across a grid.
 
@@ -162,7 +187,17 @@ Step through **state transitions** and **table updates** interactively to unders
 git clone https://github.com/<your-username>/Algo-Visualizer.git
 cd Algo-Visualizer
 ```
+## 🐳 Run with Docker
+
+Make sure **Docker** is installed and running on your system.  
+You don’t need to install **Node.js** or any dependencies manually — Docker handles everything.
 
+To start the development server, run:
+
+```bash
+docker compose up
+```
+Then open http://localhost:5173 in your browser to view the app.
 ### 2️⃣ Install Dependencies
 ```bash
 npm install
@@ -186,12 +221,19 @@ Algo-Visualizer/
 │   ├── algorithms/
 │   │   ├── sorting/
 │   │   ├── searching/
+│   │   ├── sliding-window/
 │   │   ├── pathfinding/
 │   │   ├── graph/
 │   ├── components/
+│   │   ├── sorting/
+│   │   ├── searching/
+│   │   ├── sliding-window/
+│   │   ├── pathfinding/
+│   │   ├── graph/
 │   ├── pages/
 │   │   ├── sorting/
 │   │   ├── searching/
+│   │   ├── sliding-window/
 │   │   ├── pathfinding/
 │   │   ├── graph/
 │   ├── utils/

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  algo-visualizer:
+    build: .
+    container_name: algo-visualizer-dev
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: ["npm", "run", "dev", "--", "--host"]

public/Sliding-Window.png

@@ -9,6 +9,7 @@ import DynamicProgrammingPage from "./pages/dynamic-programming/DyanmicProgrammi
 import Searchingpage from "./pages/searching/searchingPage";
 import RecursionPage from "./pages/Recursion/RecursionPage";
 import Treepage from "./pages/Tree/Treepage";
+import SlidingWindowPage from "./pages/sliding-window/SlidingWindowPage";
 function App() {
   return (
     <Router>
@@ -22,6 +23,7 @@ function App() {
         <Route path="/dynamic-programming" element={<DynamicProgrammingPage />} />
         <Route path="/recursion" element={<RecursionPage/>}/>
         <Route path="/tree" element={<Treepage />} />
+        <Route path="/sliding-window" element={<SlidingWindowPage/>}/>
       </Routes>
     </Router>
   );

src/App.jsx

@@ -0,0 +1,88 @@
+export function* maxSumSubarray(array, k) {
+    if (array.length === 0) {
+        yield {
+            type: "error",
+            message: "Array cannot be empty",
+            windowStart: -1, windowEnd: -1, currentSum: 0, maxSum: 0
+        };
+        return;
+    }
+    if (k > array.length) {
+        yield {
+            type: "error",
+            message: `Window size ${k} cannot be greater than array length ${array.length}`,
+            windowStart: -1, windowEnd: -1, currentSum: 0, maxSum: 0
+        };
+        return;
+    }
+    if (k <= 0) {
+        yield {
+            type: "error",
+            message: "Window size must be greater than 0",
+ windowStart: -1, windowEnd: -1, currentSum: 0, maxSum: 0
+        };
+        return;
+    }
+    let windowStart = 0;
+    let windowEnd = 0;
+    let currentSum = 0;
+    let maxSum = Number.NEGATIVE_INFINITY;
+    yield {
+        type: "initialize",
+        message: `Initializing: Calculating sum of first window [0, ${k - 1}]`,
+        windowStart: 0,windowEnd: k - 1,currentSum: 0,maxSum: 0
+    };
+    for (let i = 0; i < k; i++) {
+        currentSum += array[i];
+        yield {
+            type: "expand",
+            message: `Adding element at index ${i}: ${array[i]}. Current sum: ${currentSum}`,
+            windowStart: 0,windowEnd: i,currentSum: currentSum,maxSum: maxSum
+        };
+    }
+    maxSum = currentSum;
+    windowEnd = k - 1;
+
+    yield {
+        type: "window_ready",
+        message: `First window sum: ${currentSum}. This is our initial maximum.`,
+        windowStart: 0, windowEnd: k - 1, currentSum: currentSum, maxSum: maxSum
+    };
+    for (let i = k; i < array.length; i++) {
+        const removedElement = array[i - k];
+        const addedElement = array[i];
+        yield {
+            type: "slide_start",
+            message: `Sliding window: Removing element at index ${i - k} (${removedElement}), adding element at index ${i} (${addedElement})`,
+            windowStart: i - k, windowEnd: i - 1, currentSum: currentSum, maxSum: maxSum, removedIndex: i - k, addedIndex: i
+        };
+        currentSum = currentSum - removedElement + addedElement;
+        windowStart = i - k + 1;
+        windowEnd = i;
+        yield {
+            type: "slide_update",
+            message: `Window moved: New sum = ${currentSum} (previous: ${currentSum + removedElement - addedElement}, removed: ${removedElement}, added: ${addedElement})`,
+            windowStart: windowStart, windowEnd: windowEnd, currentSum: currentSum, maxSum: maxSum, removedIndex: i - k, addedIndex: i
+        };
+        if (currentSum > maxSum) {
+            maxSum = currentSum;
+            yield {
+                type: "new_max",
+                message: `New maximum found! Sum: ${maxSum} at window [${windowStart}, ${windowEnd}]`,
+                windowStart: windowStart,  windowEnd: windowEnd,  currentSum: currentSum,  maxSum: maxSum
+            };
+        } else {
+            yield {
+                type: "window_ready",
+                message: `Current sum: ${currentSum} (not greater than max: ${maxSum})`,
+                windowStart: windowStart,  windowEnd: windowEnd,  currentSum: currentSum,  maxSum: maxSum
+            };
+        }
+    }
+    yield {
+        type: "done",
+        message: `Algorithm completed! Maximum sum of subarray of size ${k} is ${maxSum}`,
+        windowStart: windowStart, windowEnd: windowEnd, currentSum: currentSum, maxSum: maxSum
+    };
+}
+

src/algorithms/sliding-window/maxSumSubarray.js

@@ -0,0 +1,69 @@
+import React from "react";
+
+export default function MaxSumSubarrayVisualizer({array, windowStart, windowEnd, currentSum, maxSum, type, removedIndex, addedIndex}) {
+    if (!array || array.length === 0) {
+        return (
+            <div className="flex items-center justify-center p-8 text-gray-400 text-lg">
+                No array data to visualize
+            </div>
+        );
+    }
+    const maxValue = Math.max(...array, 1);
+    const containerHeight = 320;
+
+    const getColor = (idx) => {
+        if (windowStart < 0 || windowEnd < 0) return "bg-gray-600";
+        if (type === "slide_start" && idx === removedIndex) return "bg-red-500";
+        if ((type === "slide_start" || type === "slide_update") && idx === addedIndex)
+            return "bg-yellow-400";
+        if (type === "new_max" && idx >= windowStart && idx <= windowEnd)
+            return "bg-purple-500 animate-pulse";
+        if (idx === windowStart || idx === windowEnd) return "bg-green-500";
+        if (idx >= windowStart && idx <= windowEnd) return "bg-blue-500";
+        return "bg-gray-500";
+    };
+
+    return (
+        <div className="flex flex-col items-center">
+            <div className="flex items-end justify-center space-x-4 transition-all duration-500">
+                {array.map((value, idx) => {
+                    const color = getColor(idx);
+                    const height = Math.max((value / maxValue) * containerHeight, 40);
+                    return (
+                        <div key={idx} className="flex flex-col items-center">
+                            <div
+                                className={`${color} w-16 sm:w-12 rounded-t-md transition-all duration-300 shadow-lg`}
+                                style={{ height: `${height}px` }}
+                            ></div>
+                            <span className="text-sm text-gray-200 mt-2 font-medium">
+                                {value}
+                            </span>
+                        </div>
+                    );
+                })}
+            </div>
+            {windowStart >= 0 && windowEnd >= 0 && (
+                <div className="flex justify-center gap-10 text-base text-gray-200 bg-gray-900/70 border border-gray-700 px-8 py-4 rounded-xl shadow-md">
+                    <div>
+                        <span className="text-gray-400">Window:</span>{" "}
+                        <span className="text-indigo-400 font-semibold text-lg">
+                            [{windowStart}, {windowEnd}]
+                        </span>
+                    </div>
+                    <div>
+                        <span className="text-gray-400">Sum:</span>{" "}
+                        <span className="text-yellow-400 font-semibold text-lg">
+                            {currentSum}
+                        </span>
+                    </div>
+                    <div>
+                        <span className="text-gray-400">Max:</span>{" "}
+                        <span className="text-purple-400 font-semibold text-lg">
+                            {maxSum !== Number.NEGATIVE_INFINITY ? maxSum : "N/A"}
+                        </span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/sliding-window/MaxSumSubarrayVisualizer.jsx

@@ -23,6 +23,15 @@ const sections = [
     link: "/searching",
     flag: false
   },
+  {
+    title: "Sliding Window Algorithms",
+    description:
+      "Visualize how the sliding window technique efficiently processes subarrays and substrings with dynamic window movement.",
+    phase: "Phase 1 (MVP)",
+    img: "/Sliding-Window.png",
+    link: "/sliding-window",
+    flag: false
+  },
   {
     title: "Pathfinding Algorithms",
     description: