About The Sketchbook

lightbulbWhy I Built This

I've always felt that traditional computer science resources get it backwards. They bury you in dry theory, mathematical proofs, and dense textbook paragraphs before you ever get to see the algorithm actually run.

Learning algorithms shouldn't feel like deciphering an ancient manuscript. It should feel like playing with Lego blocks. You should be able to poke at it, change the speed, swap the data, and watch the mechanics unfold right in front of your eyes.

I built The Algorithm Sketchbook to be the tool I wish I had when I was first learning Data Structures and Algorithms. I wanted a messy, hands-on, highly visual playground where you can literally see an $O(n^2)$ algorithm struggle, or watch Dijkstra's algorithm organically explore a maze.

No corporate fluff. No rigid grids. Just raw logic, visual intuition, and a chalkboard aesthetic to make it feel like you're sketching out ideas in a notebook.

The Tech Stack

Next.js & React: The core framework powering the UI and state logic.
TypeScript: Ensuring type-safety across all algorithm implementations.
Tailwind CSS: For the raw, custom styling and chalkboard aesthetics.
Vercel: For fast, reliable deployment.

Open Source

This entire project is open source. Feel free to explore the code, report issues, or contribute new algorithms!

View on GitHub

Building Log: Mistakes & Discoveries

Day 1:Attempted to build Quick Sort using React State. Instantly hit maximum update depth exceeded. Turns out `setArray` inside a recursive loop is a remarkably efficient way to crash Chrome.

Day 4:Trying to animate CSS bars swapping. Discovered that React state batching and `setTimeout` are mortal enemies. Refactored the entire sorting engine to use a generator-like `Step` queue. Finally, it looks like sorting and not just a flickering glitch-fest.

Day 12:Accidentally animated 5,000 DOM updates per frame on a 100x100 pathfinding grid. My laptop fan sounded like a jet engine. Re-learned that $O(n^2)$ isn't just theory—it actually burns CPU cycles in the real world.

Day 18:Dijkstra's algorithm kept exploring the entire grid even when the target was right next to it. Realized my priority queue was a standard array and I was doing `arr.sort()` on every single insertion. Big O strikes again.