Issue: #110 Create a Visualizer For Difference Array

algos/range_queries/DifferenceArray/my-app-pradip-maity/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

algos/range_queries/DifferenceArray/my-app-pradip-maity/README.md

@@ -0,0 +1,138 @@
+# 🎯 Difference Array Visualizer
+
+An interactive, modern web application for visualizing and understanding the Difference Array algorithm. Built with Next.js, TypeScript, and Tailwind CSS.
+
+![Difference Array Visualizer](https://img.shields.io/badge/Next.js-14.0+-black?style=for-the-badge&logo=next.js)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue?style=for-the-badge&logo=typescript)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.0+-38B2AC?style=for-the-badge&logo=tailwind-css)
+
+## ✨ Features
+
+- **Interactive Visualization**: Step-by-step visualization of difference array operations
+- **Real-time Updates**: Watch how range updates affect the difference and final arrays
+- **Modern UI**: Beautiful glassmorphism design with smooth animations
+- **Dark Mode**: Automatic dark/light theme support
+- **Responsive Design**: Works seamlessly on desktop and mobile devices
+- **Educational**: Perfect for learning and understanding difference arrays
+
+## 🚀 Live Demo
+
+Experience the visualizer at [your-deployment-url](https://your-deployment-url.com)
+
+## 🛠️ Tech Stack
+
+- **Framework**: Next.js 14 with App Router
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS with custom animations
+- **Icons**: Modern CSS-based icons
+- **Fonts**: Geist font family for optimal readability
+
+## 📋 Prerequisites
+
+- Node.js 18.0 or later
+- npm, yarn, pnpm, or bun
+
+## 🏃‍♂️ Getting Started
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/your-username/difference-array-visualizer.git
+   cd difference-array-visualizer
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   # or
+   yarn install
+   # or
+   pnpm install
+   ```
+
+3. **Run the development server**
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   # or
+   pnpm dev
+   ```
+
+4. **Open your browser**
+
+   Navigate to [http://localhost:3000](http://localhost:3000) to see the application.
+
+## 🎮 How to Use
+
+1. **Set Array Size**: Adjust the array size (3-15 elements) using the input field
+2. **Add Range Updates**: Use the form to add range updates with start index (L), end index (R), and value (X)
+3. **Navigate Steps**: Use the step navigation controls to see how each update affects the arrays:
+   - **Initial Array**: Shows the starting state (all zeros)
+   - **Difference Array**: Displays the difference array after each update
+   - **Final Array**: Shows the computed result after all updates
+4. **Clear Updates**: Use the "Clear All Updates" button to reset and start over
+
+## 🧮 Algorithm Explanation
+
+The Difference Array is an efficient data structure for handling range updates and point queries. It uses the concept of storing differences between consecutive elements to allow O(1) range updates and O(n) prefix sum computation.
+
+### How it works:
+1. **Initialization**: Create an array of size n, initialized to zeros
+2. **Range Update [L, R] += X**:
+   - Add X to difference[L]
+   - Subtract X from difference[R+1] (if R+1 < n)
+3. **Compute Final Array**: Perform prefix sum on the difference array
+
+## 🎨 Design Features
+
+- **Glassmorphism Effects**: Modern frosted glass appearance
+- **Smooth Animations**: CSS transitions with cubic-bezier easing
+- **Gradient Backgrounds**: Dynamic color schemes for different array types
+- **Interactive Highlights**: Animated highlighting of affected ranges
+- **Responsive Layout**: Adapts beautifully to all screen sizes
+
+## 📁 Project Structure
+
+```
+difference-array-visualizer/
+├── app/
+│   ├── components/
+│   │   ├── ArrayDisplay.tsx      # Array visualization component
+│   │   ├── UpdateControls.tsx    # Update input form
+│   │   └── lib/
+│   │       └── utils.ts          # Utility functions
+│   ├── globals.css               # Global styles and animations
+│   ├── layout.tsx                # Root layout
+│   └── page.tsx                  # Main application page
+├── public/                       # Static assets
+├── package.json                  # Dependencies and scripts
+└── README.md                     # This file
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- Built with [Next.js](https://nextjs.org)
+- Styled with [Tailwind CSS](https://tailwindcss.com)
+- Inspired by algorithm visualization tools
+
+## 📞 Contact
+
+For questions or suggestions, please open an issue on GitHub.
+
+---
+
+**Made with ❤️ for algorithm enthusiasts**

algos/range_queries/DifferenceArray/my-app-pradip-maity/app/components/ArrayDisplay.tsx

@@ -0,0 +1,52 @@
+import { cn } from "./lib/utils";  // Relative path (same folder level)
+
+interface ArrayDisplayProps {
+  title: string;
+  subtitle?: string;
+  array: number[];
+  highlights?: number[];
+  colorScheme?: "gray" | "blue" | "green";
+}
+
+export default function ArrayDisplay({
+  title,
+  subtitle,
+  array,
+  highlights = [],
+  colorScheme = "blue",
+}: ArrayDisplayProps) {
+
+  const colorMap = {
+    gray: "border-slate-300/50 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 text-slate-600 dark:text-slate-300",
+    blue: "border-blue-400/50 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-blue-700 dark:text-blue-300",
+    green: "border-emerald-400/50 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 text-emerald-700 dark:text-emerald-300",
+  };
+
+  return (
+    <div className={cn("card p-6 fade-in", colorMap[colorScheme])}>
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-1">
+          {title}
+        </h3>
+        {subtitle && (
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            {subtitle}
+          </p>
+        )}
+      </div>
+      <div className="flex flex-wrap gap-3">
+        {array.map((value, index) => (
+          <div
+            key={index}
+            className={`array-element ${highlights.includes(index) ? 'highlight' : ''}`}
+          >
+            <span className="text-xs text-slate-400 dark:text-slate-500 mb-1">
+              [{index}]
+            </span>
+            <span className="text-lg font-bold">{value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

algos/range_queries/DifferenceArray/my-app-pradip-maity/app/components/UpdateControls.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+
+interface Update {
+  L: number;
+  R: number;
+  X: number;
+}
+
+interface Props {
+  onAddUpdate: (update: Update) => void;
+  updates: Update[];
+}
+
+export default function UpdateControls({ onAddUpdate, updates }: Props) {
+  const [L, setL] = useState("");
+  const [R, setR] = useState("");
+  const [X, setX] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const l = parseInt(L);
+    const r = parseInt(R);
+    const x = parseInt(X);
+    if (!isNaN(l) && !isNaN(r) && !isNaN(x) && l <= r) {
+      onAddUpdate({ L: l, R: r, X: x });
+      setL("");
+      setR("");
+      setX("");
+    }
+  };
+
+  return (
+    <div className="card p-6 fade-in">
+      <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-6">
+        Add Range Update
+      </h3>
+      <form onSubmit={handleSubmit} className="space-y-4 mb-6">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+              Start (L)
+            </label>
+            <input
+              type="number"
+              placeholder="0"
+              value={L}
+              onChange={(e) => setL(e.target.value)}
+              className="input"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+              End (R)
+            </label>
+            <input
+              type="number"
+              placeholder="2"
+              value={R}
+              onChange={(e) => setR(e.target.value)}
+              className="input"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+              Value (X)
+            </label>
+            <input
+              type="number"
+              placeholder="5"
+              value={X}
+              onChange={(e) => setX(e.target.value)}
+              className="input"
+              required
+            />
+          </div>
+        </div>
+        <button
+          type="submit"
+          className="btn btn-primary w-full"
+        >
+          Add Update
+        </button>
+      </form>
+
+      <div>
+        <h4 className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">
+          Applied Updates ({updates.length})
+        </h4>
+        {updates.length > 0 ? (
+          <ul className="space-y-2">
+            {updates.map((u, i) => (
+              <li key={i} className="flex items-center justify-between bg-slate-50 dark:bg-slate-800 rounded-lg p-3">
+                <span className="text-sm text-slate-600 dark:text-slate-400">
+                  Add <strong>{u.X}</strong> to range <strong>[{u.L}, {u.R}]</strong>
+                </span>
+                <span className="text-xs text-slate-400 dark:text-slate-500">
+                  #{i + 1}
+                </span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-sm text-slate-500 dark:text-slate-400 italic">
+            No updates added yet
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

algos/range_queries/DifferenceArray/my-app-pradip-maity/app/components/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}