Projects /Algorithm Visualizer Backend

Algorithm Visualizer Backend

A high-performance C++ engine runs sorting and graph algorithms and streams each step to this Next.js UI in real time. Built for teaching, benchmarking, and showing how native code can drive a modern web front end.

Toggle "Stream from backend" to get steps from the API (Node today; swap in a C++ worker when you run the optional native binary). Uncheck to run the same algorithms in the browser for instant demo.

Sorting demo

What this project does

  • C++ (or Node) engine runs sorting and graph algorithms and emits step-by-step state.
  • Steps are streamed as NDJSON so the UI stays responsive and can show progress live.
  • This Next.js app consumes the stream and renders bars; same contract works with a C++ CLI.
  • Extensible to more algorithms (Dijkstra, A*, graph traversal) and benchmarking metrics.

Architecture

Front end calls POST /api/algorithms/sort with algorithm and initial array; the API streams newline-delimited JSON lines ({ bars: number[] }) until done. You can replace the in-process Node implementation with a C++ binary that reads the same JSON from stdin and writes steps to stdout—see the backend/algorithm-visualizer folder.

Tech stack

C++Next.jsReactTypeScriptAlgorithmsStreaming