Architecture Visual

How the Algorithm & Logistics Visualizer is put together, from the React component tree through the animation engine to static hosting on AWS.

App Shell & Navigation

ReactApp.jsxOwns active-visualizer state, cross-fades sections
→
Framer MotionSidebar NavFramer Motion layoutId drives the sliding active indicator

Visualizer Components

Linked List Reversal3-pointer traversal, arrow rotation
Async/Await StateReal async handler drives isLoading
Binary Search TreeO(log N) subtree elimination
Array LogisticsO(1) read vs O(N) cascading shift

State & Animation Engine

Step TimelineEach algorithm precomputed into an array of discrete steps
→
ReactReact StateuseState/useMemo track current step index
→
Framer MotionFramer MotionSprings, layout animation, AnimatePresence render each step

Static Hosting (AWS)

ViteVite BuildStatic HTML/CSS/JS bundle
→
Amazon S3S3 (private, OAC)algo-visualizer-joesparkman bucket
→
Amazon CloudFrontCloudFrontReuses the account's existing wildcard ACM cert

Infrastructure as Code

TerraformTerraformProvisions the S3 bucket, OAC, and CloudFront distribution from HCL config
→
Amazon S3S3 Remote Statejoesparkman-terraform-state bucket, shared across projects

No backend, no API: every visualization runs entirely client-side. The only moving infrastructure pieces are the static bundle, the bucket it lives in, and the CDN in front of it.

Rendering: Each visualizer is a self-contained component; switching tabs cross-fades via AnimatePresence.
Step model: Algorithms (list reversal, BST search) are pre-computed into a step array up front, not animated live, which is what makes "Next Step" reliable and reversible.
Animation: Framer Motion springs animate position/rotation/opacity; layout animation is used for the sidebar's active-tab indicator.
Hosting: CloudFront + private S3 (Origin Access Control, no public bucket policy) serve the built assets.
TLS: Attached to the account's existing *.joesparkman.com wildcard ACM certificate; no new certificate issued.
IaC: Bucket, OAC, distribution, and bucket policy are all defined in Terraform, state stored in the shared joesparkman-terraform-state bucket.
Back to App Back to Portfolio