# Algo Visualizer

> Interactive web app that shows sorting and searching algorithms step by step on custom input arrays, on desktop and mobile.

Canonical page: https://www.abdullahkaleem.live/products/algo-visualizer · Last updated: 19 October 2025

Type: Open source
Open the tool: https://algo-visualizer-cyan.vercel.app

## Overview

An interactive educational web application built with React to visually demonstrate how standard sorting and searching algorithms operate step-by-step.

## The problem

Computer science concepts like sorting and searching algorithms are often abstract and difficult for students to grasp through static text and code alone.

## What I built

Built an interactive visualizer that allows users to input custom datasets and watch abstract algorithmic execution in real-time with step-by-step UI updates, significantly enhancing the learning experience.

## Results

- Successfully translated abstract Data Structures & Algorithms logic into visual, step-by-step DOM updates.
- Implemented an interactive UI enabling users to control the visualization flow using custom input arrays.
- Achieved full mobile and desktop compatibility through advanced responsive web techniques.

## Technical notes

### Architecture

A client-side React application focused heavily on complex state management to track, pause, and render the execution context of traditional computer science algorithms loop-by-loop.

### Technical decisions

- **Chose React to build the user interface and manage algorithmic state.** React's declarative nature makes it highly effective at smoothly re-rendering complex data visualizations (like arrays swapping elements) based on state changes triggered by algorithmic steps.

### Challenges and fixes

- **Complex visualization tools are often unusable on smaller screens, alienating mobile users.** Engineered a highly responsive, mobile-friendly design with dynamic navigation bars and scalable visual elements so algorithms can be studied clearly on any device.

## Built with

React, JavaScript, Data Structures, Algorithms