# 0monish0/algoflow architecture

> Architecture diagram of the GitHub repository 0monish0/algoflow, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/0monish0/algoflow
- Repository: https://github.com/0monish0/algoflow

## Overview

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: [`src/App.jsx`](https://github.com/0monish0/algoflow/blob/main/src/App.jsx) (Route App), [`src/pages/SandboxPicker.jsx`](https://github.com/0monish0/algoflow/blob/main/src/pages/SandboxPicker.jsx) (Sandbox Picker), [`src/pages/Home.jsx`](https://github.com/0monish0/algoflow/blob/main/src/pages/Home.jsx) (Home), [`src/sandbox/components/SandboxShell.jsx`](https://github.com/0monish0/algoflow/blob/main/src/sandbox/components/SandboxShell.jsx) (Sandbox Shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Navigation"]
  node_app["Route App<br/>[App.jsx]"]
  node_home["Home<br/>[Home.jsx]"]
  node_search_state["Search State<br/>[searchStore.js]"]
end

subgraph group_learning["Documentation and Search"]
  node_docs_shell["Docs Shell<br/>[DocsShell.jsx]"]
  node_docs_page["Docs Page<br/>[DocsPage.jsx]"]
  node_topics["Topic Content<br/>[index.js]"]
  node_navigation["Topic Navigation<br/>[navigation.js]"]
  node_search["Search Palette<br/>[SearchPalette.jsx]"]
  node_search_index["Search Index<br/>[index.js]"]
  node_sorting["Sorting Race<br/>[SortingRace.jsx]"]
  node_algorithms["Sorting Algorithms"]
end

subgraph group_sandbox["Interactive Sandboxes"]
  node_sandbox_picker["Sandbox Picker<br/>[SandboxPicker.jsx]"]
  node_sandbox_shell["Sandbox Shell<br/>[SandboxShell.jsx]"]
  node_canvas["Sandbox Canvas<br/>[SandboxCanvas.jsx]"]
  node_linked_list["Linked List Sandbox"]
  node_stack["Stack Sandbox<br/>[StackSandbox.jsx]"]
  node_array["Array Sandbox<br/>[ArraySandbox.jsx]"]
  node_tree["Tree Sandbox<br/>[TreeSandbox.jsx]"]
  node_hash_table["Hash Table Sandbox"]
  node_lessons["Guided Lessons"]
end

subgraph group_state["Sandbox State and Evaluation"]
  node_store["Sandbox Store<br/>[useSandboxStore.js]"]
  node_graph_model["Graph Model<br/>[graphModel.js]"]
  node_evaluator["Graph Evaluator<br/>[evaluator.js]"]
end

node_learner(("Learner"))

node_learner -->|"opens app"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes docs"| node_docs_shell
node_app -->|"routes topic"| node_docs_page
node_app -->|"routes picker"| node_sandbox_picker
node_app -->|"routes sandbox"| node_linked_list
node_app -->|"routes sandbox"| node_stack
node_app -->|"routes sandbox"| node_array
node_app -->|"routes sandbox"| node_tree
node_app -->|"routes sandbox"| node_hash_table
node_docs_page -->|"looks up topic"| node_topics
node_docs_shell -->|"uses navigation"| node_navigation
node_home -->|"opens search"| node_search_state
node_search -->|"reads state"| node_search_state
node_search -->|"searches entries"| node_search_index
node_search -->|"navigates to topic"| node_docs_page
node_home -->|"links to picker"| node_sandbox_picker
node_home -->|"links to docs"| node_docs_page
node_home -->|"renders race"| node_sorting
node_sorting -->|"uses algorithms"| node_algorithms
node_sandbox_picker -->|"offers sandbox"| node_linked_list
node_sandbox_picker -->|"offers sandbox"| node_stack
node_sandbox_picker -->|"offers sandbox"| node_array
node_sandbox_picker -->|"offers sandbox"| node_tree
node_sandbox_picker -->|"offers sandbox"| node_hash_table
node_linked_list -->|"renders shell"| node_sandbox_shell
node_stack -->|"renders shell"| node_sandbox_shell
node_array -->|"renders shell"| node_sandbox_shell
node_tree -->|"renders shell"| node_sandbox_shell
node_hash_table -->|"renders shell"| node_sandbox_shell
node_store -->|"creates graph data"| node_graph_model
node_store -->|"evaluates graph"| node_evaluator
node_lessons -.->|"provides lesson content"| node_linked_list

click node_app "https://github.com/0monish0/algoflow/blob/main/src/App.jsx"
click node_home "https://github.com/0monish0/algoflow/blob/main/src/pages/Home.jsx"
click node_docs_shell "https://github.com/0monish0/algoflow/blob/main/src/components/layout/DocsShell.jsx"
click node_docs_page "https://github.com/0monish0/algoflow/blob/main/src/pages/DocsPage.jsx"
click node_topics "https://github.com/0monish0/algoflow/blob/main/src/content/index.js"
click node_navigation "https://github.com/0monish0/algoflow/blob/main/src/content/navigation.js"
click node_search "https://github.com/0monish0/algoflow/blob/main/src/components/search/SearchPalette.jsx"
click node_search_index "https://github.com/0monish0/algoflow/blob/main/src/content/index.js"
click node_search_state "https://github.com/0monish0/algoflow/blob/main/src/store/searchStore.js"
click node_sandbox_picker "https://github.com/0monish0/algoflow/blob/main/src/pages/SandboxPicker.jsx"
click node_sandbox_shell "https://github.com/0monish0/algoflow/blob/main/src/sandbox/components/SandboxShell.jsx"
click node_canvas "https://github.com/0monish0/algoflow/blob/main/src/sandbox/components/SandboxCanvas.jsx"
click node_linked_list "https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/LinkedListSandbox.jsx"
click node_stack "https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/StackSandbox.jsx"
click node_array "https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/ArraySandbox.jsx"
click node_tree "https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/TreeSandbox.jsx"
click node_hash_table "https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/HashTableSandbox.jsx"
click node_store "https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/useSandboxStore.js"
click node_graph_model "https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/graphModel.js"
click node_evaluator "https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/evaluator.js"
click node_lessons "https://github.com/0monish0/algoflow/blob/main/src/sandbox/lessons/linkedListLessons.js"
click node_sorting "https://github.com/0monish0/algoflow/blob/main/src/components/ui/SortingRace.jsx"
click node_algorithms "https://github.com/0monish0/algoflow/blob/main/src/utils/sortingAlgorithms.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_home,node_search_state toneBlue
class node_docs_shell,node_docs_page,node_topics,node_navigation,node_search,node_search_index,node_sorting,node_algorithms toneAmber
class node_sandbox_picker,node_sandbox_shell,node_canvas,node_linked_list,node_stack,node_array,node_tree,node_hash_table,node_lessons toneMint
class node_store,node_graph_model,node_evaluator toneRose
class node_learner toneIndigo
```

## Components

### App and Navigation

- [Route App](https://github.com/0monish0/algoflow/blob/main/src/App.jsx): `src/App.jsx`
- [Home](https://github.com/0monish0/algoflow/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Search State](https://github.com/0monish0/algoflow/blob/main/src/store/searchStore.js): `src/store/searchStore.js`

### Documentation and Search

- [Docs Shell](https://github.com/0monish0/algoflow/blob/main/src/components/layout/DocsShell.jsx): `src/components/layout/DocsShell.jsx`
- [Docs Page](https://github.com/0monish0/algoflow/blob/main/src/pages/DocsPage.jsx): `src/pages/DocsPage.jsx`
- [Topic Content](https://github.com/0monish0/algoflow/blob/main/src/content/index.js): `src/content/index.js`
- [Topic Navigation](https://github.com/0monish0/algoflow/blob/main/src/content/navigation.js): `src/content/navigation.js`
- [Search Palette](https://github.com/0monish0/algoflow/blob/main/src/components/search/SearchPalette.jsx): `src/components/search/SearchPalette.jsx`
- [Search Index](https://github.com/0monish0/algoflow/blob/main/src/content/index.js): `src/content/index.js`
- [Sorting Race](https://github.com/0monish0/algoflow/blob/main/src/components/ui/SortingRace.jsx): `src/components/ui/SortingRace.jsx`
- [Sorting Algorithms](https://github.com/0monish0/algoflow/blob/main/src/utils/sortingAlgorithms.js): `src/utils/sortingAlgorithms.js`

### Interactive Sandboxes

- [Sandbox Picker](https://github.com/0monish0/algoflow/blob/main/src/pages/SandboxPicker.jsx): `src/pages/SandboxPicker.jsx`
- [Sandbox Shell](https://github.com/0monish0/algoflow/blob/main/src/sandbox/components/SandboxShell.jsx): `src/sandbox/components/SandboxShell.jsx`
- [Sandbox Canvas](https://github.com/0monish0/algoflow/blob/main/src/sandbox/components/SandboxCanvas.jsx): `src/sandbox/components/SandboxCanvas.jsx`
- [Linked List Sandbox](https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/LinkedListSandbox.jsx): `src/sandbox/structures/LinkedListSandbox.jsx`
- [Stack Sandbox](https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/StackSandbox.jsx): `src/sandbox/structures/StackSandbox.jsx`
- [Array Sandbox](https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/ArraySandbox.jsx): `src/sandbox/structures/ArraySandbox.jsx`
- [Tree Sandbox](https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/TreeSandbox.jsx): `src/sandbox/structures/TreeSandbox.jsx`
- [Hash Table Sandbox](https://github.com/0monish0/algoflow/blob/main/src/sandbox/structures/HashTableSandbox.jsx): `src/sandbox/structures/HashTableSandbox.jsx`
- [Guided Lessons](https://github.com/0monish0/algoflow/blob/main/src/sandbox/lessons/linkedListLessons.js): `src/sandbox/lessons/linkedListLessons.js`

### Sandbox State and Evaluation

- [Sandbox Store](https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/useSandboxStore.js): `src/sandbox/core/useSandboxStore.js`
- [Graph Model](https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/graphModel.js): `src/sandbox/core/graphModel.js`
- [Graph Evaluator](https://github.com/0monish0/algoflow/blob/main/src/sandbox/core/evaluator.js): `src/sandbox/core/evaluator.js`

### Other components

- **Learner**

## Connections

- 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