How abdullahmahfouz/dsa-visualizer works
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: api.js API client · App.jsx React routes · routes Structure APIs · visualizers Visualizers
Components 22
Learning experience
- React routes
frontend/src/App.jsx - API client
frontend/src/api/api.js - Playback history
frontend/src/hooks/useAlgorithmHistory.js
Structure visualizers
- Visualizers
frontend/src/visualizers
Backend services
- Flask application
app.py - Structure APIs
app/routes - Linear models
app/models/linear - Tree models
app/models/binarytrees - Graph model
app/models/graphs/graph.py - Hash models
app/models/hashing - Heap models
app/models/heaps - Sandbox engine
app/routes/sandbox_routes.py - Practice API
app/routes/practice_routes/practice_routes.py - Gemini API
app/api/gemini_api.py
Learning tools
- Algorithm comparison
frontend/src/pages/AlgoCompare.jsx - Hash comparison
frontend/src/pages/HashComparison.jsx - Coding practice
frontend/src/practice/PracticePage.jsx - Code sandbox
frontend/src/pages/CodeVisualizerSandbox.jsx - AI assistant
frontend/src/components/AIAssistant.jsx
Other components
- Learner
- Google Gemini
- JDoodle compiler
Connections 22
- 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