Interactive knowledge base
Algorithms for AI
43 in-depth guides connecting classic data structures and algorithms to where they appear in AI/ML/LLM systems, with in-browser Python via Pyodide/WebAssembly and step-by-step algorithm animations.
- Algorithms
- Interactive learning
- WebAssembly
- LLM internals
- Status
- Deployed on GitHub Pages
- Started
- 2026
- Stack
- TypeScript · Docusaurus 3 · Pyodide 0.26 · React · Vitest
- Guides
- 43 + 43 practice pages
- Sections
- 4 progressive
- Python in the browser
- Pyodide in a Web Worker
- Visualisers
- Array · graph · tree · matrix
Jump to section
Case-study brief
Verified 15 Sep 2026 (opens in a new tab)- Contribution
- Four sections — foundation, core DSA, advanced DSA and domain-specific DSA — with a runtime, a visualisation framework and a concept graph on top.
- Best evidence
- 43 guides · 43 practice pages
- Repository count; the currently deployed GitHub Pages build still serves the earlier 31-guide version.
- Main limitation
- At the time of writing the deployed site lags the repository: the live build serves the earlier 31-guide curriculum because the most recent CI runs failed before deployment.
- Verification basis
- Recursive tree, content structure, Pyodide worker, visualisation components and live deployment inspected.
Overview
A structured, cross-linked DSA knowledge base that carries every topic through to where it shows up in AI systems: tries into tokenisation, heaps into beam search, graphs into GraphRAG, matrices into attention's O(n²) wall. Each guide has a paired practice page where Python runs in the browser.
Problem
Algorithm courses stop at the whiteboard, and LLM engineering material assumes the algorithms. The gap is the reason KV caches, HNSW indexes and beam search feel like magic to people who could implement a heap.
Motivation
Connect the two: teach the classic structure, then show the exact place it lives inside a modern model or retrieval system, and let the reader run it.
Architecture
Four sections — foundation, core DSA, advanced DSA and domain-specific DSA — with a runtime, a visualisation framework and a concept graph on top.
- In-browser Python
- Pyodide 0.26 loaded in a Web Worker with streamed stdout and stderr and on-demand package loading such as NumPy.
- Visualisation framework
- An immutable frame model for arrays, graphs, trees and matrices, renderers with play/pause/step controls and keyboard support, and frame builders for HNSW and KV-cache walkthroughs.
- Concept graph
- A knowledge graph of concepts with an explorer, learning paths and local progress tracking.
- Domain-specific guides
- ANN search, HNSW, tokenisation, matrix operations for attention, multi-head attention, KV cache, sampling and decoding, beam search, graph algorithms for GraphRAG, state machines and DAGs for LangGraph, KD and ball trees, streaming and caching, probabilistic structures, and AI systems benchmarks.
Implementation
- Docusaurus 3.6 with TypeScript and React, Mermaid diagrams and client-side search.
- Content validators for links and concepts, eleven Vitest suites, and a deploy workflow gated on CI success.
Key technical decisions
01
Run it, don't just read it
Every guide ships a practice page backed by a real Python runtime in the browser.
02
Deterministic frames
Animations are built from immutable frames so each step is inspectable and testable.
Evaluation & results
- Content
- 43 guides · 43 practice pages
- Counted from the repository tree.
Challenges
- Running a Python interpreter in a Web Worker without blocking the page or losing streamed output.
Limitations
- At the time of writing the deployed site lags the repository: the live build serves the earlier 31-guide curriculum because the most recent CI runs failed before deployment.
What I learned
- Interactive explanations need a runtime, not just illustrations.
Links
- Repository (opens in a new tab)github.com/NiravRVaghasiya/dsa-knowledge
- Live site (opens in a new tab)niravrvaghasiya.github.io/dsa-knowledge/