Add Sorting Visualizer with interactive algorithms (Bubble, Selection, Insertion)

[tomadowley]

Introduce a new SortingVisualizer component and render it in App.

What changed:

• Added src/components/SortingVisualizer.tsx implementing a reusable, inline-styled sorting visualizer with three algorithms: bubble, selection, and insertion.
• Implemented deterministic random data generation via a seed for reproducible arrays, adjustable by size and seed controls.
• Built step-by-step visualization: generates per-step snapshots with optional highlight for compared/swapped indices.
• Added playback controls: Play/Pause, Step, Reset, and Randomize, plus sliders for Size and Speed.
• Integrated SortingVisualizer into src/App.tsx by importing and rendering it alongside PrimeChecker.

How it works:

• The component computes a data array from seed/size, generates algorithm steps, and animates through them at a configurable speed.
• Each bar represents an array element; highlighted bars indicate current comparison or swap.

Why this is helpful:

• Provides an engaging, educational way to explore how common sorting algorithms operate.
• Demonstrates modular, pure-step generation for each algorithm and a clean UI for interaction.

No breaking changes were introduced to existing features; this adds a new visual tool to the app.

---

This pull request was co-created with Cosine Genie

Original Task: sorbox/ympa6wlvdg40
Author: Tom Dowley

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sorbox	Ready	Preview	Comment	Dec 4, 2025 4:43pm