Algorithm Visualizer Playground — Next.js Final Year Project with Source Code (Sorting, Pathfinding, Graph)

What This Project Actually Does

You pick an algorithm. You pick some data. You hit play, and the screen shows you exactly what the algorithm is doing — which two bars are being compared right now, which grid cell A* just expanded, which edge Kruskal's just added to the tree. Line by line, with the pseudocode highlighting along.

That's it. That's the whole product.

But the interesting part is how it does that. Every single algorithm in this project is written as a JavaScript generator function that yields tiny step objects — { type: "compare", indices: [i, j], line: 3 }. Nothing is hand-animated. A shared engine (lib/engine/stepEngine.js) runs the generator once, collects every step, counts the stats, and hands the stream to a reducer that turns each step into a renderable frame. So the bar chart, the grid, the node-link diagram, the stats panel, the GIF export, the quiz — all of them are reading from the same step stream.

Which means when your external examiner asks "beta, ye animation kaise bana hai, hardcoded to nahi hai?", you have an actual architectural answer instead of sweating.

Modules inside

• Sorting — Bubble, Selection, Insertion, Shell, Merge, Quicksort with both Lomuto and Hoare partitioning, Heap, Counting, Radix, Cocktail Shaker, Gnome. Array size, distribution (random, nearly sorted, reversed, few-unique), and custom input are all adjustable.
• Pathfinding — BFS, DFS, Dijkstra, A*, Greedy Best-First, Bidirectional BFS, Jump Point Search. On a paintable weighted grid, with recursive-backtracker maze generation and mazes you can save and reload.
• Graph — BFS, DFS, both topological sort variants (Kahn's and DFS-based), Dijkstra, Bellman-Ford, Floyd-Warshall, Prim's, Kruskal's, Tarjan's SCC, cycle detection. Plus generators for random G(n,p), grid, complete, bipartite, tree, and DAG graphs.
• Compare / Race mode — run 2 to 4 sorts side by side on the identical input, synced either by step count or by wall clock. There's a headless benchmark tab too that runs algorithms in a Web Worker and plots measured operation counts against the theoretical Big-O curve.
• Learn mode — plain-English narration of what just happened, plus an inline quiz generated from the actual run you just watched.

Key Features

• Scrub backwards through a 40,000-step Quicksort run and the timeline stays responsive — the replayer snapshots state every 500 steps, so seeking anywhere replays at most 500 steps from the nearest keyframe instead of re-running from zero.
• Every run encodes its algorithm, dataset, and settings into the URL. Send that link to your guide over WhatsApp and they open the exact same run on their laptop.
• Download the current run as an animated GIF, or grab a single frame as PNG — straight into your project report, no screen recorder needed.
• Full keyboard transport: play, pause, single-step forward and back, scrub, reset. You can demo the entire thing without touching the trackpad.
• The step engine caps runs at 200,000 steps (MAX_STEPS) and throws a readable error instead of freezing the tab when someone tries Bubble Sort on 5,000 elements.
• Last-used settings, quiz high scores, and named custom mazes and graphs persist to localStorage between sessions.
• Adding a twelfth sort takes one new file and one import line. Gnome Sort is the worked example — under 30 lines, and it instantly gets a picker entry, code highlighting, stats, GIF export, and Compare-mode support for free.

Real-World Applications

The obvious one is classroom teaching — a DSA lecturer running Dijkstra on the projector while students actually see the distance labels relaxing. Coding bootcamps and interview-prep platforms use exactly this kind of visual to explain why Quicksort's worst case shows up on already-sorted input.

Beyond teaching, the generator-plus-replayer pattern here is the same one used in game replay systems, undo/redo stacks in design tools, and debugger step-through UIs. If you can explain this architecture in an interview, you're explaining a pattern that shows up in real production code.

Also, honestly, it's a great portfolio piece. Recruiters open it, click play, and get it in three seconds.

Who Should Buy This

If you're a BCA or BTech CSE student in your final semester, your DSA fundamentals are decent but your React is shaky, and you need something that looks impressive in a 10-minute demo — this is your project. It photographs well. It demos well. And it has enough architectural depth that you can talk for twenty minutes about the step contract and the keyframed replayer without repeating yourself.

MCA students who want a heavier viva story: focus on the benchmark worker and the Big-O curve comparison. That's your "experimental validation" chapter, sorted.

One honest warning. The hard part of this project is not running it — it's understanding the reducer in lib/engine/stateReducer.js well enough to defend it. It's a pure function that maps a step to render state, and if you've never worked with reducers, budget an evening with it. The easy part, which surprises most students, is extending it: open lib/algorithms/sorting/gnome.js, copy the shape, write your own sort, register it in the index file. Done. No engine changes, no canvas changes, nothing.

Skip this one if your college specifically demands a database-backed CRUD project with login and admin panel. There's no backend here. It's a pure frontend engine, deliberately — and some guides don't like that. Check first.

Why CodeAj

You get the complete source, a college-format project report you can adapt to your university's template, and the architecture explanation written out so you're not reverse-engineering your own submission the night before viva. If npm install throws something weird or Node version fights with Next.js 16, message us and we'll get it running on your machine — the project setup service exists exactly for that. Browse more Next.js projects with source code if you want to compare, or look through the wider BTech CSE final year projects collection to see what pairs well with this in a group submission.