Algorithm & Logistics Visualizer - Story
Project Story

Challenge

CS fundamentals like pointer manipulation, async state, and Big-O complexity are usually taught with static diagrams and hand-waving. Make them click instead of just make sense.

Approach

Build four focused React visualizers where Framer Motion drives every state transition: pointer labels physically move node to node, arrows rotate 180°, tree subtrees dim to prove elimination, array slots cascade. The animation *is* the explanation.

Engineering

Traversal steps use manual "Next Step" controls, not autoplay, so a learner can pause on a single comparison. The async/await demo runs a real handler with actual delays to mirror true event-loop timing, not a faked CSS animation.

Outcome

Shipped as its own static site on AWS: S3 + CloudFront, reusing the portfolio's existing wildcard ACM cert, fully Terraform-managed alongside the rest of the account's infrastructure.

Interaction Flow
1. Pick a Visualizer
Animated sidebar nav switches between Linked List Reversal, Async/Await State, Binary Search Tree, and Array Logistics.
2. Step Through State
"Next Step" advances a precomputed step timeline; pointer, tree, and array positions update via Framer Motion springs.
3. Read Code in Sync
The adjacent code panel highlights the exact line executing at that step, so the animation and the code stay locked together.
4. Reset & Repeat
State resets to the initial step, ready to run again with a different search value or insertion.