DEV Community: Salman Sadik Siddiquee

I built a Sorting Visualizer you can actually step through (bars, pointers, pseudocode & confetti)

Salman Sadik Siddiquee — Sun, 28 Jun 2026 18:07:54 +0000

In the last post I shared the 2D Array Visualizer — paste a JSON matrix, color it by value, and see how a grid maps to rows and columns.

This time I added the thing people actually asked for: a Sorting Visualizer. Not a static diagram — something you can press play on, step through one comparison at a time, and watch the algorithm think.

👉 Live: visualizer-gold.vercel.app/algorithms/sorting
⭐ Code: github.com/salsadsid/visualizer

Why another sorting visualizer?

There are plenty out there, but most show you bars moving without connecting them to the code or the variables doing the work. When you're learning, the hard part isn't "the big bar moves right" — it's "wait, what is j right now, and why did min jump?"

So I built it around three goals:

Beginner-first — every step has a plain-English sentence explaining what just happened.
Show the variables — the loop counters (i, j, min) and flags (key, swapped) are drawn right on the board, not hidden in your head.
Make it joyful — gradient bars, pops on every swap, and a little confetti when it finishes. Learning should feel good.

A tour of the visualizer

Press play — or take it one step at a time

Pick Bubble, Selection, or Insertion sort, then drive it however you like: play/pause, step forward and back, scrub the timeline, or change the speed from 0.5× to 4×. (Keyboard works too: Space to play/pause, ← / → to step.)

On the right is the pseudocode, and the line that's currently executing is highlighted. That single detail is what makes the whole thing click — you see the code and its effect at the same instant.

Watch the swaps — and the variables behind them

Here's a mid-run snapshot of bubble sort. Two bars are rose-red because they're being swapped, the pseudocode is sitting on swap(a[j], a[j+1]), and below the bars you can see the live state:

a ▲ j pointer marking exactly which pair is being compared
the variable chips i = 0 and swapped = true
a running tally of comparisons / swaps / writes

No more guessing what the indices are — they're on screen, updating every step.

Three algorithms, three personalities

Switch to selection sort and the board grows two more pointers: i (the slot being filled), min (the smallest value found so far), and j (the scanner). Watching min hop to a new bar the moment it finds something smaller is the clearest way I know to get selection sort.

Notice the stats too: selection sort racks up comparisons but barely any swaps — that's its whole personality (fewest writes of the three).

…and a little celebration

When the array is fully sorted, the bars turn green and 🎉 confetti rains over the board. It's a tiny thing, but finishing a run feels like an accomplishment.

Bring your own data

Don't just watch the demo — feed it your own numbers. There are one-click presets (random, reversed, nearly-sorted, few-unique, already-sorted), a size slider, and a 🎲 Shuffle button.

Best of all, you can type or paste your own array right into the input — [5, 3, 8, 1, 9, 2], a bare 5 3 8 1, or even a multi-line list copied straight from your editor all work. Want to see how bubble sort behaves on an already-sorted list, or watch insertion sort fly through a nearly-sorted one? Paste it and hit play.

And because it's a learning tool, the validation is friendly: drop in a decimal or an out-of-range value and it nudges you with a playful, plain-English hint ("Whoa, 100 is off the charts! 📏 …") instead of a cryptic error.

Learn the algorithms (the short version)

Every visualizer also ships with a built-in learning panel right below the bars — a tabbed Concept · Use cases · Complexity breakdown, plus ready-to-copy implementations in C++, Python, JavaScript & TypeScript. So once a sort clicks visually, the theory and the real code are one scroll away. Here's the gist:

All three are comparison sorts (they only compare pairs), in-place (O(1) extra memory), and O(n²) on average — perfect for learning and for small or nearly-sorted data.

🫧 Bubble sort

Repeatedly walk the list and swap any adjacent pair that's out of order, so big values "bubble" to the right. If a whole pass makes no swaps, it stops early.

Best	Average	Worst	Space	Stable
O(n)	O(n²)	O(n²)	O(1)	✅

🎯 Selection sort

Each pass finds the smallest remaining value and drops it into the next slot. Always O(n²), but does the fewest swaps (≤ n−1) — handy when writes are expensive.

Best	Average	Worst	Space	Stable
O(n²)	O(n²)	O(n²)	O(1)	❌

📥 Insertion sort

Grow a sorted prefix one element at a time, sliding each new key into place — exactly how you sort a hand of cards. The best real-world performer of the three on small or nearly-sorted data, and it powers the base case of hybrid sorts like Timsort and introsort.

Best	Average	Worst	Space	Stable
O(n)	O(n²)	O(n²)	O(1)	✅

How it works under the hood

The trick that keeps this maintainable: algorithms don't touch the DOM. Each sort is a plain function that records a list of snapshots — one per meaningful moment — and the UI just plays that list back.

A snapshot (a "step") looks like this:

Step = {
  array,        // the working array at this moment
  highlights,   // { [index]: "compare" | "swap" | "min" | "key" | "shift" | "sorted" }
  pointers,     // { i, j, min }      → drawn as ▲ markers under the bars
  vars,         // { key, swapped }   → shown as chips
  line,         // which pseudocode line is active
  message,      // the plain-English narration
  stats,        // { comparisons, swaps, writes }
}

So bubble sort is just a generator that pushes steps as it goes (simplified — the
recorder snapshots the array, stats, pointers and "sorted" indices on every push,
whose first argument is the pseudocode line to highlight):

function bubble(values) {
  const a = values.slice();
  const r = makeRecorder(a);

  for (let i = 0; i < a.length - 1; i++) {
    let swapped = false;
    r.vars.i = i;
    for (let j = 0; j < a.length - 1 - i; j++) {
      r.pointers.j = j;
      r.stats.comparisons++;
      // line 3 = "if a[j] > a[j+1]"
      r.push(3, `Compare ${a[j]} and ${a[j + 1]}`, {
        [j]: "compare",
        [j + 1]: "compare",
      });

      if (a[j] > a[j + 1]) {
        [a[j], a[j + 1]] = [a[j + 1], a[j]];
        swapped = true;
        r.vars.swapped = true;
        r.stats.swaps += 1;
        r.stats.writes += 2;
        // line 4 = "swap(a[j], a[j+1])"
        r.push(4, "Swapped!", { [j]: "swap", [j + 1]: "swap" });
      }
    }
    if (!swapped) break; // a clean pass → already sorted, stop early
  }
  return r.steps;
}

A small usePlayer hook owns the timeline (current index, play/pause, speed), and shared components render whatever the current step says:

const player = usePlayer(steps);
const step = player.step;

<BarChart array={step.array} highlights={step.highlights} pointers={step.pointers} />
<VarChips vars={step.vars} />
<Pseudocode lines={pseudocode} activeLine={step.line} />
<StatsRow stats={step.stats} message={step.message} />
<PlayerControls player={player} />

The payoff: adding a new algorithm is just writing a new step generator. The bars, pointers, pseudocode highlighting, scrubber, and stats all come for free. That's how counting sort, merge sort, and friends will land next.

The whole thing is built with Next.js 16, React 19, and Tailwind CSS 4, runs entirely in the browser (no backend), supports light/dark themes, and respects prefers-reduced-motion so all the motion turns off if you've asked your OS to reduce it.

What's next

On the roadmap: counting sort & frequency arrays, then merge/quick sort, binary search, and the core array techniques (prefix sums, two pointers, sliding window) — each as its own step-through visualizer.

If you want to see how a sort actually works (or send it to someone who's learning), give it a spin:

🔀 Sorting Visualizer: visualizer-gold.vercel.app/algorithms/sorting
⭐ Repo (MIT): github.com/salsadsid/visualizer

I'd love feedback — which algorithm should I visualize next? Drop a comment 👇

Zustand: A Lightweight State Management Library (No Boilerplate Needed)

Salman Sadik Siddiquee — Fri, 28 Nov 2025 16:16:23 +0000

Zustand is a simple and powerful state management library for React applications.
Unlike Redux, it has no heavy boilerplate, no reducers, no actions, and no complicated setup.
You just create a store using the create function and start using it immediately.

Here’s a basic todo store:

import { create } from 'zustand';

const useTodoStore = create(

    (set) => ({
        todos: [
            {
                id: crypto.randomUUID(),
                text: 'Learn React',
                completed: false,
            },
            {
                id: crypto.randomUUID(),
                text: 'Learn Zustand',
                completed: false,
            },

        ],
    })

);

export default useTodoStore;

Consuming the Store in a Component

 const todos = useTodoStore((state) => state.todos);

Need to add a new todo ?

To insert a new todo item into the store, you create an addTodo function inside your Zustand store. This function receives the new todo text and then updates the state using Zustand’s set function.

Zustand encourages immutable updates, meaning you should never directly mutate the previous state. You can also use immer for immutable updates easily. Instead, you create a new array by spreading the existing todos and adding the new one at the end.

import { create } from 'zustand';

const useTodoStore = create(

    (set) => ({
        todos: [],
        addTodo: (text) =>
            set((state) => ({
                todos: [
                    ...state.todos,
                    { id: crypto.randomUUID(), text, completed: false },
                ],
            })),
    })

);

export default useTodoStore;

Use the addTodo function in a component

   const addTodo = useTodoStore((state) => state.addTodo);

    const handleSubmit = (e) => {
        e.preventDefault();
        if (text.trim()) {
            addTodo(text.trim());
            setText('');
        }
    };

Persistance

You can persist the data in the local storage using the persist middleware that comes from zustand/middleware, like this

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useTodoStore = create(

    persist(
        (set) => ({
            todos: [],
            addTodo: (text) =>
                set((state) => ({
                    todos: [
                        ...state.todos,
                        { id: crypto.randomUUID(), text, completed: false },
                    ],
                })),
        })
    )
);

export default useTodoStore;

By default, the persist middleware does not assign a storage key.
To customize it, you can pass a second configuration object to persist and set a name property, which becomes the key used in localStorage.


import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useTodoStore = create(

    persist(
        (set) => ({
            todos: [],
            addTodo: (text) =>
                set((state) => ({
                    todos: [
                        ...state.todos,
                        { id: crypto.randomUUID(), text, completed: false },
                    ],
                })),
        }),
        {
            name: 'todo-storage',
        }
    )
);

export default useTodoStore;

Devtools

Zustand also supports Redux DevTools using the devtools middleware.
This lets you inspect state changes, time travel, and debug more easily.

The set function can accept three arguments:

A function that returns the updated state
A boolean indicating whether to replace the entire state
A string that names the action (useful for DevTools)

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

const useTodoStore = create(
    devtools(
        persist(
            (set) => ({
                todos: [],
                filter: 'all',
                addTodo: (text) =>
                    set(
                        (state) => ({
                            todos: [
                                ...state.todos,
                                { id: crypto.randomUUID(), text, completed: false },
                            ],
                        }),
                        false,           // replace state?
                        "addTodo"        // action name for DevTools
                    ),
            }),
            { name: 'todo-storage' }
        ),
        { name: "TodoStore" }
    )
);

export default useTodoStore;

Now you can debug with the Redux devtool.

Summary

Zustand is a minimal state manager without boilerplate.
You create a store using create.
State consumption is simple: useStore((state) => state.value).
You can add actions like addTodo that modify state safely.
Persist middleware stores your data in localStorage.
- DevTools middleware integrates with Redux DevTools for debugging.

Zustand is perfect for React developers who want clean, predictable, and easy-to-maintain global state with minimal setup.

GitHub Repository & Live Demo

GitHub Repo:
👉 todo-app-zustand

Live Demo:
👉 Live Link

Building a 2D Array Visualizer with React: A Step-by-Step Guide

Salman Sadik Siddiquee — Thu, 19 Sep 2024 17:41:14 +0000

When working with multi-dimensional data, visualization can be a powerful tool for understanding and exploring complex structures. That’s why I built a 2D Array Visualizer using React. This project allows users to input a 2D array and view its representation as an interactive grid. Along the way, I added features like customizable colors for cells and error handling for invalid input.

In this post, I'll walk you through the journey of building this project and share some of the core features and challenges I encountered. Let's dive in!

1. Project Overview

The 2D Array Visualizer is a simple yet powerful React project that takes user input in the form of a 2D array and displays it visually as a grid. The grid can be customized to give each unique value its own color, and users can modify the text and border colors of the entire grid as well.

Key Features:

Users can input a 2D array to visualize it.
The app ensures the input is a valid 2D array; otherwise, it displays an error message.
Each unique value in the array can have a custom cell color.
The grid's border color and text color are fully customizable.

Tech Stack:

React for the frontend.
Tailwind for the grid styling and customizations.

This project is perfect for those looking to build a dynamic and interactive UI while learning about data validation, state management, and custom styling in React.

2. Input Validation and Error Handling

The foundation of this project lies in ensuring that users provide a valid 2D array. If the input isn't a properly formatted 2D array, the app won’t run and will display an error message instead.

Here’s how I handled input validation:

// Check if input is a 2D array
const is2DArray = Array.isArray(arr) && arr.every((row) => Array.isArray(row));

// Check if input is a square array
const isSquareArray = 
  arr.every(
   (row) =>
     row.length === len &&
     row.every((col) => typeof col === "number" || typeof col === "string")
);

This simple function checks whether the input is an array and whether each row within it is also an array. If the input passes this check, we proceed to render the grid. Otherwise, an error message appears. This way, the app remains user-friendly and ensures that errors are handled gracefully.

3. Grid Visualization

Once a valid 2D array is input, it's time to display it visually. I used simple HTML and CSS grid techniques to represent the array as a grid.

Here’s a simplified version of the grid rendering logic:

{/* 2D Array visualization */}
{ar.length > 0 &&
   ar.map((row, i) =>
       row.map((col, j) => (
           <div key={i * len + j>
                {col}
            </div>
         ))
 )}

The grid layout adjusts automatically based on the number of rows and columns in the input array.

4. Customization Features

One of the most exciting parts of this project is the ability to customize the grid’s appearance. The visualizer allows users to change the color of each unique value in the array, along with the border and text colors of the entire grid.

Custom Cell Colors:

For this, I implemented a color picker that maps each unique value in the array to a specific color. Users can choose different colors for cells, making it easier to visually distinguish different values.

Border and Text Color Customization:

Similarly, users can customize the border and text color for the entire grid using another set of color pickers. This allows for further personalization of the visualized array.

This flexibility in styling makes the visualizer not just functional but visually appealing and engaging for users.

5. Final Thoughts

Building the 2D Array Visualizer was both a fun and challenging experience. It taught me the importance of data validation, dynamic rendering, and UI customization in React applications. The project is a great tool for learning and visualizing 2D arrays, whether for educational purposes or general curiosity.

If you'd like to explore the project further, you can find the full code on my GitHub Repository. Feel free to try it out and customize it as you see fit! Check out live view.

Next Steps:

Add support for larger datasets or arrays with more complex structures.
Implement hover effects for enhanced interactivity.
Add downloadable or shareable grid images for users to save their visualized arrays.

Thank you for reading, and I hope this post inspires you to build your own visualizers or similar projects!

Feel free to adjust this blog post as needed or add more technical details. Would you like help setting up the GitHub repository or another platform to share it?