AlgorithmVisualizer
Next.js 14 interactive visualizer with 27 algorithms across 5 categories, featuring step-by-step playback and a neon dark theme.
Tech Stack
Overview
Algorithm visualization platform built with Next.js 14 App Router and static export that brings 27 algorithms to life through generator-based step-by-step animations. Covers 5 categories — Sorting (6), Pathfinding (5), Graph (5), Data Structures (6), and Machine Learning (5) — each with dedicated custom hooks. Features a neon dark theme, real-time complexity analysis, and interactive playback controls.
Problem
Learning algorithms from textbooks provides static examples without seeing how data structures evolve during execution.
Solution
Migrated to Next.js 14 with static export and built a generator-based step engine for step-by-step algorithm playback. Each algorithm family uses dedicated custom hooks, and the neon UI provides clear visual feedback across all visualization types.
Architecture
Next.js 14 App Router + static export; TypeScript strict mode; generator-based algorithm step engine; 10 custom React hooks; React Context for complexity state; Tailwind CSS with custom neon theme; category-based route groups.
Challenges
Generator-based step coordination across 5 different visualization types; building 10 custom hooks for diverse algorithm families; responsive layout with sidebar navigation; neon glow theme with accessible contrast.
Results
27 interactive visualizations across 5 categories; step-by-step playback with speed control; static export for fast CDN deployment; educational complexity metrics per algorithm.