How 0monish0/algoflow works
AlgoFlow is a data-structures-and-algorithms learning app combining explanatory documentation with interactive visual sandboxes. Users can browse topics or search for a topic or section, and can choose a structure sandbox to manipulate or inspect it. The sandbox code includes graph evaluation and editable pointer/node state; the sampled store excerpt shows evaluation and history behavior, but does not establish every structure’s wiring to shared components.
Main entry points: App.jsx Route App · SandboxPicker.jsx Sandbox Picker · Home.jsx Home · SandboxShell.jsx Sandbox Shell
Components 24
App and Navigation
- Route App
src/App.jsx - Home
src/pages/Home.jsx - Search State
src/store/searchStore.js
Documentation and Search
- Docs Shell
src/components/layout/DocsShell.jsx - Docs Page
src/pages/DocsPage.jsx - Topic Content
src/content/index.js - Topic Navigation
src/content/navigation.js - Search Palette
src/components/search/SearchPalette.jsx - Search Index
src/content/index.js - Sorting Race
src/components/ui/SortingRace.jsx - Sorting Algorithms
src/utils/sortingAlgorithms.js
Interactive Sandboxes
- Sandbox Picker
src/pages/SandboxPicker.jsx - Sandbox Shell
src/sandbox/components/SandboxShell.jsx - Sandbox Canvas
src/sandbox/components/SandboxCanvas.jsx - Linked List Sandbox
src/sandbox/structures/LinkedListSandbox.jsx - Stack Sandbox
src/sandbox/structures/StackSandbox.jsx - Array Sandbox
src/sandbox/structures/ArraySandbox.jsx - Tree Sandbox
src/sandbox/structures/TreeSandbox.jsx - Hash Table Sandbox
src/sandbox/structures/HashTableSandbox.jsx - Guided Lessons
src/sandbox/lessons/linkedListLessons.js
Sandbox State and Evaluation
- Sandbox Store
src/sandbox/core/useSandboxStore.js - Graph Model
src/sandbox/core/graphModel.js - Graph Evaluator
src/sandbox/core/evaluator.js
Other components
- Learner
Connections 33
- Learner → Route App: opens app
- Route App → Home: routes to
- Route App → Docs Shell: routes docs
- Route App → Docs Page: routes topic
- Route App → Sandbox Picker: routes picker
- Route App → Linked List Sandbox: routes sandbox
- Route App → Stack Sandbox: routes sandbox
- Route App → Array Sandbox: routes sandbox
- Route App → Tree Sandbox: routes sandbox
- Route App → Hash Table Sandbox: routes sandbox
- Docs Page → Topic Content: looks up topic
- Docs Shell → Topic Navigation: uses navigation
- Home → Search State: opens search
- Search Palette → Search State: reads state
- Search Palette → Search Index: searches entries
- Search Palette → Docs Page: navigates to topic
- Home → Sandbox Picker: links to picker
- Home → Docs Page: links to docs
- Home → Sorting Race: renders race
- Sorting Race → Sorting Algorithms: uses algorithms
- Sandbox Picker → Linked List Sandbox: offers sandbox
- Sandbox Picker → Stack Sandbox: offers sandbox
- Sandbox Picker → Array Sandbox: offers sandbox
- Sandbox Picker → Tree Sandbox: offers sandbox
- Sandbox Picker → Hash Table Sandbox: offers sandbox
- Linked List Sandbox → Sandbox Shell: renders shell
- Stack Sandbox → Sandbox Shell: renders shell
- Array Sandbox → Sandbox Shell: renders shell
- Tree Sandbox → Sandbox Shell: renders shell
- Hash Table Sandbox → Sandbox Shell: renders shell
- Sandbox Store → Graph Model: creates graph data
- Sandbox Store → Graph Evaluator: evaluates graph
- Guided Lessons → Linked List Sandbox: provides lesson content