README

Algorithm & Logistics Visualizer

An interactive teaching tool for four core CS concepts: linked list pointer reversal, React async/await state, binary search tree elimination, and array read/insert complexity. Every animation is driven by real algorithm state, not decoration.

React 18 Vite Tailwind CSS Framer Motion Terraform AWS S3 CloudFront

What's Inside

Linked List Reversal

Three floating pointer labels (prev/curr/next_node) spring to the correct node each step; arrows rotate 180° as links reverse. Synced to a highlighted code panel.

Async/Await State

A real async handler drives isLoading through a three-pane view: mock UI, try/catch/finally code, and a live state monitor.

Binary Search Tree

A glowing marker travels node to node while the eliminated half of the tree dims to ~15% opacity, a visual proof of O(log N) elimination.

Array Logistics

O(1) reads flash a slot instantly; O(N) inserts cascade every element one slot to the right before the new value drops in.

Design Principles

Step-driven, not time-driven: the list-reversal and BST algorithms are pre-computed into an array of discrete steps up front. "Next Step" just advances an index, which is deterministic and reversible.
Code stays in view: every step highlights the exact line of pseudocode executing, so the animation and the code never drift out of sync.
No backend: everything runs client-side. There's no API to call and nothing to keep warm.

Local Development

npm install
npm run dev

Build for production:

npm run build

Infrastructure

Hosted as a standalone static site, fully defined in terraform/:

Private S3 bucket (algo-visualizer-joesparkman), public access blocked, served only through CloudFront via Origin Access Control
CloudFront distribution aliased to algo.joesparkman.com, attached to the account's existing *.joesparkman.com wildcard ACM certificate; no new certificate issued
Terraform state stored remotely in the shared joesparkman-terraform-state S3 bucket

cd terraform
terraform init
terraform plan
terraform apply

Security & Repository Hygiene

No secrets, API keys, or credentials anywhere in this project, since there's no backend to hold them.
node_modules/, dist/, and Terraform local state files are gitignored.

Open App Story Visual Diagram Back to Portfolio