# lakhanpatil99/dsa-visualizer architecture

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

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

## Overview

DSA Visualizer is an interactive learning app: learners choose an algorithm or structure, configure and step through its visualization, and can sign in to save and review progress. The main React app routes to sorting, data-structure, tree, and graph visualizers; visualizers use algorithm implementations and shared display components. Authentication and progress form a separate supporting workflow, with Next API routes and MongoDB-backed models in the repository. The tree and README document broad capabilities, but several pages, routes, and algorithm modules were not sampled, so their internal links are omitted or marked unverified.

Main entry points: [`src/App.js`](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/App.js) (App and routes), [`src/pages/DataStructureVisualizer.js`](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/DataStructureVisualizer.js) (Structure visualizer), [`src/pages/GraphVisualizer.js`](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/GraphVisualizer.js) (Graph visualizer), [`src/contexts/AuthContext.js`](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/contexts/AuthContext.js) (Authentication context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App and routes<br/>[App.js]"]
  node_navbar["Navigation<br/>[Navbar.js]"]
end

subgraph group_visualizers["Algorithm visualizers"]
  node_sorting["Sorting visualizer"]
  node_structures["Structure visualizer"]
  node_trees["Tree visualizer<br/>[TreeVisualizer.js]"]
  node_graphs["Graph visualizer<br/>[GraphVisualizer.js]"]
  node_canvas["Visualization canvas"]
  node_layout["Visualizer layout"]
  node_controls["Execution controls<br/>[Controls.js]"]
  node_pseudocode["Pseudocode panel<br/>[PseudocodePanel.js]"]
  node_complexity["Complexity display<br/>[ComplexityBox.js]"]
end

subgraph group_algorithms["Algorithm implementations"]
  node_sorting_impl["Sorting algorithms"]
  node_structure_impl["Data structures"]
  node_search_impl["Searching algorithms<br/>[searching.js]"]
  node_tree_impl["Tree algorithms"]
  node_graph_impl["Graph algorithms"]
end

subgraph group_identity["Accounts and progress"]
  node_auth["Authentication context<br/>[AuthContext.js]"]
  node_progress_service["Progress service<br/>[progressService.js]"]
  node_dashboard["Progress dashboard"]
end

subgraph group_backend["API and persistence"]
  node_auth_api["Account API routes"]
  node_progress_api["Progress API route<br/>[progress.js]"]
  node_db_connect["Mongo connection<br/>[dbConnect.js]"]
  node_user_model[("User records<br/>[User.js]")]
  node_progress_model[("Progress records<br/>[Progress.js]")]
end

node_learner(("Learner"))

node_learner -->|"opens app"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_sorting
node_app -->|"routes to"| node_structures
node_app -->|"routes to"| node_trees
node_app -->|"routes to"| node_graphs
node_app -->|"provides"| node_auth
node_structures -->|"uses"| node_structure_impl
node_structures -->|"uses"| node_search_impl
node_graphs -->|"uses"| node_graph_impl
node_structures -->|"renders in"| node_canvas
node_graphs -->|"renders in"| node_canvas
node_sorting -.->|"uses"| node_sorting_impl
node_trees -.->|"uses"| node_tree_impl
node_sorting -.->|"uses"| node_layout
node_structures -.->|"uses"| node_layout
node_trees -.->|"uses"| node_layout
node_graphs -.->|"uses"| node_layout
node_learner -->|"signs in"| node_auth
node_auth -->|"requests account"| node_auth_api
node_auth -->|"creates"| node_progress_service
node_progress_service -->|"fetches and saves"| node_progress_api
node_app -->|"routes to"| node_dashboard
node_auth_api -->|"connects via"| node_db_connect
node_auth_api -->|"uses"| node_user_model
node_progress_api -.->|"uses"| node_progress_model

click node_app "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/App.js"
click node_navbar "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/Navbar.js"
click node_sorting "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/SortingVisualizer.js"
click node_structures "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/DataStructureVisualizer.js"
click node_trees "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/TreeVisualizer.js"
click node_graphs "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/GraphVisualizer.js"
click node_canvas "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/VisualizerCanvas.js"
click node_layout "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/VisualizerLayout.js"
click node_controls "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/Controls.js"
click node_pseudocode "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/PseudocodePanel.js"
click node_complexity "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/ComplexityBox.js"
click node_sorting_impl "https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/sorting"
click node_structure_impl "https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/dataStructures"
click node_search_impl "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/algorithms/searching/searching.js"
click node_tree_impl "https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/trees"
click node_graph_impl "https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/graphs"
click node_auth "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/contexts/AuthContext.js"
click node_progress_service "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/services/progressService.js"
click node_dashboard "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/ProgressDashboard.js"
click node_auth_api "https://github.com/lakhanpatil99/dsa-visualizer/tree/main/pages/api/auth"
click node_progress_api "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/pages/api/auth/progress.js"
click node_db_connect "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/lib/dbConnect.js"
click node_user_model "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/models/User.js"
click node_progress_model "https://github.com/lakhanpatil99/dsa-visualizer/blob/main/models/Progress.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_navbar toneBlue
class node_sorting,node_structures,node_trees,node_graphs,node_canvas,node_layout,node_controls,node_pseudocode,node_complexity toneAmber
class node_sorting_impl,node_structure_impl,node_search_impl,node_tree_impl,node_graph_impl toneMint
class node_auth,node_progress_service,node_dashboard toneRose
class node_auth_api,node_progress_api,node_db_connect,node_user_model,node_progress_model,node_learner toneIndigo
```

## Components

### Application shell

- [App and routes](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/App.js): `src/App.js`
- [Navigation](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/Navbar.js): `src/components/Navbar.js`

### Algorithm visualizers

- [Sorting visualizer](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/SortingVisualizer.js): `src/pages/SortingVisualizer.js`
- [Structure visualizer](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/DataStructureVisualizer.js): `src/pages/DataStructureVisualizer.js`
- [Tree visualizer](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/TreeVisualizer.js): `src/pages/TreeVisualizer.js`
- [Graph visualizer](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/pages/GraphVisualizer.js): `src/pages/GraphVisualizer.js`
- [Visualization canvas](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/VisualizerCanvas.js): `src/components/VisualizerCanvas.js`
- [Visualizer layout](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/VisualizerLayout.js): `src/components/VisualizerLayout.js`
- [Execution controls](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/Controls.js): `src/components/Controls.js`
- [Pseudocode panel](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/PseudocodePanel.js): `src/components/PseudocodePanel.js`
- [Complexity display](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/ComplexityBox.js): `src/components/ComplexityBox.js`

### Algorithm implementations

- [Sorting algorithms](https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/sorting): `src/algorithms/sorting`
- [Data structures](https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/dataStructures): `src/algorithms/dataStructures`
- [Searching algorithms](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/algorithms/searching/searching.js): `src/algorithms/searching/searching.js`
- [Tree algorithms](https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/trees): `src/algorithms/trees`
- [Graph algorithms](https://github.com/lakhanpatil99/dsa-visualizer/tree/main/src/algorithms/graphs): `src/algorithms/graphs`

### Accounts and progress

- [Authentication context](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/contexts/AuthContext.js): `src/contexts/AuthContext.js`
- [Progress service](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/services/progressService.js): `src/services/progressService.js`
- [Progress dashboard](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/src/components/ProgressDashboard.js): `src/components/ProgressDashboard.js`

### API and persistence

- [Account API routes](https://github.com/lakhanpatil99/dsa-visualizer/tree/main/pages/api/auth): `pages/api/auth`
- [Progress API route](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/pages/api/auth/progress.js): `pages/api/auth/progress.js`
- [Mongo connection](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/lib/dbConnect.js): `lib/dbConnect.js`
- [User records](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/models/User.js): `models/User.js`
- [Progress records](https://github.com/lakhanpatil99/dsa-visualizer/blob/main/models/Progress.js): `models/Progress.js`

### Other components

- **Learner**

## Connections

- Learner → App and routes: opens app (evidence: `src/App.js`)
- App and routes → Navigation: renders (evidence: `src/App.js`)
- App and routes → Sorting visualizer: routes to (evidence: `src/App.js`)
- App and routes → Structure visualizer: routes to (evidence: `src/App.js`)
- App and routes → Tree visualizer: routes to (evidence: `src/App.js`)
- App and routes → Graph visualizer: routes to (evidence: `src/App.js`)
- App and routes → Authentication context: provides (evidence: `src/App.js`)
- Structure visualizer → Data structures: uses (evidence: `src/pages/DataStructureVisualizer.js`)
- Structure visualizer → Searching algorithms: uses (evidence: `src/pages/DataStructureVisualizer.js`)
- Graph visualizer → Graph algorithms: uses (evidence: `src/pages/GraphVisualizer.js`)
- Structure visualizer → Visualization canvas: renders in (evidence: `src/pages/DataStructureVisualizer.js`)
- Graph visualizer → Visualization canvas: renders in (evidence: `src/pages/GraphVisualizer.js`)
- Sorting visualizer → Sorting algorithms: uses
- Tree visualizer → Tree algorithms: uses
- Sorting visualizer → Visualizer layout: uses
- Structure visualizer → Visualizer layout: uses (evidence: `src/pages/DataStructureVisualizer.js`)
- Tree visualizer → Visualizer layout: uses
- Graph visualizer → Visualizer layout: uses (evidence: `src/pages/GraphVisualizer.js`)
- Learner → Authentication context: signs in (evidence: `src/contexts/AuthContext.js`)
- Authentication context → Account API routes: requests account (evidence: `src/contexts/AuthContext.js`)
- Authentication context → Progress service: creates (evidence: `src/contexts/AuthContext.js`)
- Progress service → Progress API route: fetches and saves (evidence: `src/services/progressService.js`)
- App and routes → Progress dashboard: routes to (evidence: `src/App.js`)
- Account API routes → Mongo connection: connects via (evidence: `pages/api/auth/register.js`)
- Account API routes → User records: uses (evidence: `pages/api/auth/register.js`)
- Progress API route → Progress records: uses