Back to Projects

Visual Sorting

Experimental React app that visualises various sorting algorithms with animated step-by-step rendering

Visual Sorting

Visual Sorting

Overview

visual-sorting is an experimental React web application designed to visually demonstrate and explain how various sorting algorithms work. The project provides interactive visualizations for educational purposes, allowing users to select algorithms, adjust parameters, and observe step-by-step sorting processes.

Key Features

  • Sorting Algorithm Visualizations: Visually represents the steps of popular sorting algorithms such as Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, Quick Sort 3, Heap Sort, and Shell Sort.
  • Interactive Controls: Users can select different algorithms, adjust the size of the array, and randomize input data to see how algorithms perform under different conditions.
  • Step-by-Step Playback: Shows each comparison, swap, and sorted element during algorithm execution, highlighting the actions with colors.
  • Modular UI Components: Utilizes a structured component-based design (Atoms, Molecules, Organisms) for maintainability and scalability, including elements like navigation bar, chart/bar visualizations, and menu controls.

Technical Stack

  • Frontend: React (function components, hooks), scaffolded with Create React App.
  • Styling: CSS.
  • Backend: No backend; all sorting logic and visualization run entirely client-side in the browser.
  • Data: Generated and managed in-memory (JavaScript arrays).
  • Deployment: Can be deployed as a static site (e.g., GitHub Pages, Vercel, Netlify).

Architecture

The project follows a modular React architecture, separating UI into atomic components (Bar, Chart), molecules (NavigationBar, Menu), and organisms to enhance reusability and maintainability. Sorting algorithms are implemented as pure JavaScript functions that return a “step history” capturing every action for visualization. State management is handled via React hooks (useState, useEffect), and UI updates are triggered by user interactions with controls. Visualization logic highlights comparisons, swaps, and sorted elements using color-coded bars.

Challenges & Solutions

  • Real-Time Visualization: Challenge—accurately capturing and animating each step of sorting algorithms for smooth user experience. Solution—Implemented “step history” arrays and color group tracking to reflect algorithm actions visually.
  • Algorithm Modularity: Challenge—Supporting multiple algorithms with reusable visualization logic. Solution—Created a flexible architecture where algorithms export description/metadata and actions, so the UI can adapt to each.
  • User Interactivity: Challenge—Allowing dynamic changes (algorithm, array size, randomization) without breaking visualization. Solution—Careful use of React hooks and controlled state updates to ensure seamless transitions and resets.

Impact & Results

  • Educational Value: Provides an intuitive way for students and developers to understand sorting algorithms beyond code, promoting deeper algorithmic thinking.
  • Positive Feedback: Users have found the interface helpful for learning and teaching, especially the clear step-by-step breakdown and color-coded highlights.
  • Performance: Efficient client-side rendering for arrays of reasonable size; instantaneous updates with minimal lag for sorting animations.