# abdullahmahfouz/dsa-visualizer architecture

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

- Interactive diagram: https://gitdiagram.com/abdullahmahfouz/dsa-visualizer
- Repository: https://github.com/abdullahmahfouz/dsa-visualizer

## Overview

DSA Visualizer is an interactive learning application: learners explore data structures and algorithms through visualizers, comparisons, practice, AI help, and a Python sandbox. The principal interaction runs from a routed React page through its visualizer and API client to Flask routes and in-memory data-structure models, returning state for display. README capabilities fill out the map where source excerpts are absent; those links are shown only where documented. Backend excerpts confirm representative route-to-model calls, while frontend wiring is inferred from the documented API use and component roles.

Main entry points: [`frontend/src/api/api.js`](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/api/api.js) (API client), [`frontend/src/App.jsx`](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/App.jsx) (React routes), [`app/routes`](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/routes) (Structure APIs), [`frontend/src/visualizers`](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/frontend/src/visualizers) (Visualizers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Learning experience"]
  node_app["React routes<br/>[App.jsx]"]
  node_api_client["API client<br/>[api.js]"]
  node_history["Playback history"]
end

subgraph group_structures["Structure visualizers"]
  node_visualizers["Visualizers"]
end

subgraph group_backend["Backend services"]
  node_flask["Flask application<br/>[app.py]"]
  node_structure_routes["Structure APIs"]
  node_linear_models["Linear models"]
  node_tree_models["Tree models"]
  node_graph_model["Graph model<br/>[graph.py]"]
  node_hash_models["Hash models"]
  node_heap_models["Heap models"]
  node_sandbox_api["Sandbox engine<br/>[sandbox_routes.py]"]
  node_practice_api["Practice API<br/>[practice_routes.py]"]
  node_gemini_api["Gemini API<br/>[gemini_api.py]"]
end

subgraph group_learning_tools["Learning tools"]
  node_compare["Algorithm comparison<br/>[AlgoCompare.jsx]"]
  node_hash_compare["Hash comparison<br/>[HashComparison.jsx]"]
  node_practice["Coding practice<br/>[PracticePage.jsx]"]
  node_sandbox_ui["Code sandbox"]
  node_assistant["AI assistant<br/>[AIAssistant.jsx]"]
end

node_learner(("Learner"))
node_gemini{{"Google Gemini"}}
node_jdoodle{{"JDoodle compiler"}}

node_learner -->|"opens pages"| node_app
node_app -->|"routes to"| node_visualizers
node_app -->|"routes to"| node_compare
node_app -->|"routes to"| node_hash_compare
node_app -->|"routes to"| node_practice
node_app -->|"routes to"| node_sandbox_ui
node_visualizers -->|"requests state"| node_api_client
node_api_client -->|"calls APIs"| node_structure_routes
node_structure_routes -->|"invokes"| node_linear_models
node_structure_routes -->|"invokes"| node_tree_models
node_structure_routes -->|"invokes"| node_graph_model
node_structure_routes -->|"invokes"| node_hash_models
node_structure_routes -->|"invokes"| node_heap_models
node_visualizers -->|"uses playback"| node_history
node_practice -->|"submits code"| node_api_client
node_api_client -->|"calls execution"| node_practice_api
node_practice_api -.->|"runs code"| node_jdoodle
node_sandbox_ui -->|"sends snippets"| node_api_client
node_api_client -->|"runs snippets"| node_sandbox_api
node_assistant -->|"sends questions"| node_api_client
node_api_client -->|"calls AI routes"| node_gemini_api
node_gemini_api -.->|"requests responses"| node_gemini

click node_app "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/App.jsx"
click node_api_client "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/api/api.js"
click node_visualizers "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/frontend/src/visualizers"
click node_history "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/hooks/useAlgorithmHistory.js"
click node_compare "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/AlgoCompare.jsx"
click node_hash_compare "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/HashComparison.jsx"
click node_practice "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/practice/PracticePage.jsx"
click node_sandbox_ui "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/CodeVisualizerSandbox.jsx"
click node_assistant "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/components/AIAssistant.jsx"
click node_flask "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app.py"
click node_structure_routes "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/routes"
click node_linear_models "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/linear"
click node_tree_models "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/binarytrees"
click node_graph_model "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/models/graphs/graph.py"
click node_hash_models "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/hashing"
click node_heap_models "https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/heaps"
click node_sandbox_api "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/routes/sandbox_routes.py"
click node_practice_api "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/routes/practice_routes/practice_routes.py"
click node_gemini_api "https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/api/gemini_api.py"

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_api_client,node_history toneBlue
class node_visualizers toneAmber
class node_flask,node_structure_routes,node_linear_models,node_tree_models,node_graph_model,node_hash_models,node_heap_models,node_sandbox_api,node_practice_api,node_gemini_api toneMint
class node_compare,node_hash_compare,node_practice,node_sandbox_ui,node_assistant toneRose
class node_learner,node_gemini,node_jdoodle toneIndigo
```

## Components

### Learning experience

- [React routes](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [API client](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/api/api.js): `frontend/src/api/api.js`
- [Playback history](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/hooks/useAlgorithmHistory.js): `frontend/src/hooks/useAlgorithmHistory.js`

### Structure visualizers

- [Visualizers](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/frontend/src/visualizers): `frontend/src/visualizers`

### Backend services

- [Flask application](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app.py): `app.py`
- [Structure APIs](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/routes): `app/routes`
- [Linear models](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/linear): `app/models/linear`
- [Tree models](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/binarytrees): `app/models/binarytrees`
- [Graph model](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/models/graphs/graph.py): `app/models/graphs/graph.py`
- [Hash models](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/hashing): `app/models/hashing`
- [Heap models](https://github.com/abdullahmahfouz/dsa-visualizer/tree/main/app/models/heaps): `app/models/heaps`
- [Sandbox engine](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/routes/sandbox_routes.py): `app/routes/sandbox_routes.py`
- [Practice API](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/routes/practice_routes/practice_routes.py): `app/routes/practice_routes/practice_routes.py`
- [Gemini API](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/app/api/gemini_api.py): `app/api/gemini_api.py`

### Learning tools

- [Algorithm comparison](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/AlgoCompare.jsx): `frontend/src/pages/AlgoCompare.jsx`
- [Hash comparison](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/HashComparison.jsx): `frontend/src/pages/HashComparison.jsx`
- [Coding practice](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/practice/PracticePage.jsx): `frontend/src/practice/PracticePage.jsx`
- [Code sandbox](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/pages/CodeVisualizerSandbox.jsx): `frontend/src/pages/CodeVisualizerSandbox.jsx`
- [AI assistant](https://github.com/abdullahmahfouz/dsa-visualizer/blob/main/frontend/src/components/AIAssistant.jsx): `frontend/src/components/AIAssistant.jsx`

### Other components

- **Learner**
- **Google Gemini**
- **JDoodle compiler**

## Connections

- Learner → React routes: opens pages
- React routes → Visualizers: routes to
- React routes → Algorithm comparison: routes to
- React routes → Hash comparison: routes to
- React routes → Coding practice: routes to
- React routes → Code sandbox: routes to
- Visualizers → API client: requests state
- API client → Structure APIs: calls APIs
- Structure APIs → Linear models: invokes
- Structure APIs → Tree models: invokes
- Structure APIs → Graph model: invokes
- Structure APIs → Hash models: invokes
- Structure APIs → Heap models: invokes
- Visualizers → Playback history: uses playback
- Coding practice → API client: submits code
- API client → Practice API: calls execution
- Practice API → JDoodle compiler: runs code
- Code sandbox → API client: sends snippets
- API client → Sandbox engine: runs snippets
- AI assistant → API client: sends questions
- API client → Gemini API: calls AI routes
- Gemini API → Google Gemini: requests responses