Skip to content

Latest commit

 

History

History
76 lines (52 loc) · 2.38 KB

README.md

File metadata and controls

76 lines (52 loc) · 2.38 KB

Algorithm Visualizer

A web app for learning algorithms through interactive visualizations. Built because I kept forgetting how AVL rotations work and figured others might have the same problem.

What's This About?

Ever tried to understand how merge sort actually splits and merges arrays? Or why AVL trees need all those rotations? This project visualizes algorithms step-by-step so you can see exactly what's happening under the hood.

Features

Tree Algorithms:

  • AVL Trees with rotation animations (finally makes sense!)
  • Red-Black trees with color changes
  • Basic BST operations

Sorting:

  • Merge sort with the divide-and-conquer tree
  • Quick sort showing partitions
  • All the classics: bubble, selection, insertion, shell, heap
  • Non-comparison sorts: counting, radix, bucket

Searching:

  • Binary search that picks good examples
  • Linear search (because sometimes you need the basics)
  • Interpolation search

Controls:

  • Play/pause animations
  • Step through manually
  • Adjust speed
  • See operation counts

Running Locally

npm install
npm run dev

Open http://localhost:3000 and start exploring.

Tech Stack

  • Next.js 15 (React 19)
  • TypeScript
  • D3.js for the tree visualizations
  • Tailwind CSS
  • Zustand for state management

Structure

  • /src/algorithms/ - Original basic implementations
  • /src/lib/algorithms/ - Enhanced versions with visualization steps
  • /src/components/ - All the React components
  • /src/types/ - TypeScript definitions
  • /src/data/syllabus.json - Algorithm metadata

Adding New Algorithms

  1. Create the step-by-step implementation in /src/lib/algorithms/
  2. Add it to the switch statement in AlgorithmVisualizer.tsx
  3. Update the syllabus if needed

The visualization system is pretty flexible - you can use array bars, trees, buckets, or search spaces depending on what makes sense for your algorithm.

Why I Built This

Started as a way to finally understand AVL tree rotations. Kept adding more algorithms because the visualization approach actually helped me learn them better. Turns out seeing the step-by-step process makes a huge difference compared to just reading about it.

Contributing

PRs welcome! The codebase is pretty straightforward - each algorithm generates an array of visualization steps that get rendered by the appropriate component.

License

MIT - do whatever you want with it.