Add Sorting Visualizer component and sorting steps logic; integrate into App

[tomadowley]

• Introduces a new Sorting Visualizer UI component that visualizes sorting algorithms in real-time. It renders alongside the existing Prime Checker in App.tsx.
• Adds sorting step generation utilities in src/sortSteps.ts:
  • Defines AlgoName ('bubble' | 'selection' | 'insertion') and Frame (array snapshot).
  • Implements bubbleSortSteps, selectionSortSteps, insertionSortSteps, and getSteps to produce frames for each algorithm.
• New UI in src/components/SortingVisualizer.tsx:
  • Allows choosing algorithm, array size, and animation speed.
  • Provides Generate, Play/Pause, Step, and Reset controls.
  • Visualizes frames as a bar chart with responsive layout and gradients.
• How it works:
  • Generates a random array of the selected size, computes the frames using getSteps, and animates through frames when Play is active.
  • Bars component renders the current frame, scaling heights based on max value.
• This feature adds a playful, educational visualization to the repo and demonstrates integration of new components with existing UI.

---

This pull request was co-created with Cosine Genie

Original Task: sorbox/y4kw6mgkrg6r
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:29pm