A Production-Grade, High-Performance Interactive Visualizer & Test-Driven DSA Curriculum Built for FAANG Technical Interviews and Computer Science Mastery
🚀 Explore Live Demo • 🎮 DSA Quest (Game) • ⚔️ Algorithm Battle • 📖 Algorithm Guide • 🧪 Run Tests
Most algorithm repositories are either dry academic code snippets or toy visualizers that break when given realistic datasets. This suite is engineered differently:
- 🎮 Interactive DSA Quest (Game Mode): Turn algorithm learning into an engaging RPG-style quest! Solve 10 progressive algorithmic dilemmas (e.g. diagnosing why Binary Search fails on unsorted arrays, choosing optimal
$\mathcal{O}(1)$ data structures for 1,000,000 users), earn +100 XP, maintain your daily streak (🔥 7 days), diagnose precondition violations, and level up to FAANG Grandmaster! - ⚔️ Algorithm Battle Arena: Side-by-side minimized race benchmarking Bubble, Selection, Insertion, MergeSort, QuickSort, and HeapSort simultaneously on identical datasets with live telemetry (comparisons, swaps, auxiliary memory, execution steps, and elapsed ms) plus winner podium and post-battle scoreboard!
- 🎯 Interactive Visualizer Engines: Custom SVG and Canvas visualization pipelines built with React 18, Vite, and Framer Motion.
- ⚡ Adaptive Density Flow: Seamlessly renders both educational small datasets and massive 60+ element enterprise datasets without layout clipping or performance degradation.
- 🎛️ Full Playback & Step Scrubber: Step-by-step narration, forward/backward step-through, pause/play, and scrubber speeds ranging from 1.0x up to 8.0x and Turbo.
- 💻 Synchronized Code Studio: View production-ready ES6+ implementations side-by-side with active visualizer steps.
- 🧪 53/53 Test-Driven Verification: Comprehensive, zero-dependency unit test suite covering invariant verification, cycle detection, edge cases, battle traces, question banks, and path reconstructions.
- 🔗 Direct URL Deep Linking: Share exact algorithms, datasets, and levels instantly (e.g.
?module=dsa-gameor?module=sorting-battle).
Interactive 10-level challenge mode with XP rewards, 7-day streak tracker, precondition violation diagnostics, and FAANG takeaways.
Instant diagnostic feedback, +100 DSA XP award, and FAANG algorithmic takeaway.
Simultaneous 6-lane minimized race on Random, Nearly Sorted, Reverse Sorted, Duplicates, or Large Datasets with live telemetry.
Post-race champion podium, comparative telemetry scoreboard (comparisons, swaps, memory, steps, ms), and algorithmic insights.
| 📊 Responsive Sorting & 8x Scrubbing | 🕸️ Dynamic Network & Graph Topology |
|---|---|
![]() |
![]() |
| Adaptive bar density, step narration, and 8.0x playback | Dijkstra, Bellman-Ford, Floyd-Warshall & Network Flow |
| 🌳 Self-Balancing AVL Trees | 📈 Asymptotic Big-O Growth Curves |
|---|---|
![]() |
![]() |
| Real-time LL, RR, LR, and RL rotations and balance factors | Interactive comparison of logarithmic, linear, and exponential curves |
- Node.js: v18.0+ (v20+ recommended)
- npm or pnpm or yarn
# Clone the repository
git clone https://github.com/Arto1993/Data-structures-Algorithms.git
# Navigate into project directory
cd Data-structures-Algorithms
# Install dependencies
npm installnpm run devOpen http://localhost:3000 in your browser to experience the visualizer locally with hot module replacement (HMR).
npm run build
npm run previewAll implementations include rigorous, zero-dependency unit tests validating asymptotic correctness, tree balance invariants, dynamic programming memoization tables, and graph cycle detections.
Run the test suite directly from your terminal:
npm test======================================================
🚀 RUNNING DATA STRUCTURES & ALGORITHMS TEST SUITE
======================================================
✅ 1. Complexity Analysis (1/1 passed)
✓ verifies asymptotic growth ordering O(1) < O(log N) < O(N) < O(N log N) < O(N²) (0ms)
✅ 2. Arrays & Strings (5/5 passed)
✓ Two Pointers, Sliding Window, Prefix Sum, Kadane's, Binary Search
✅ 3. Sorting Algorithms (6/6 passed)
✓ Bubble, Insertion, MergeSort, QuickSort (Lomuto & 3-Way), HeapSort, Radix Sort
✅ 4. Linked Lists (3/3 passed)
✓ In-place reversal, Fast & Slow pointer middle detection, Sorted merge
✅ 5. Stack & Queue (3/3 passed)
✓ LIFO Stack, FIFO Queue, Monotonic Stack Next Greater Element
✅ 6. Hash Tables (4/4 passed)
✓ Separate chaining, Two Sum O(N), Anagram clustering, Frequency Counter
✅ 7. Trees & BST (3/3 passed)
✓ BST invariants, Lowest Common Ancestor (LCA), AVL Tree rotations (|BF| <= 1)
✅ 8. Heaps & Priority Queue (3/3 passed)
✓ MinHeap order, Top-K Frequent Elements, QuickSelect O(N)
✅ 9. Graphs & Networks (9/9 passed)
✓ Dijkstra, Bellman-Ford negative cycles, Floyd-Warshall, Ford-Fulkerson Max Flow, Kahn's Topo Sort, DSU
✅ 10. Recursion & Backtracking (3/3 passed)
✓ N-Queens puzzle, Power Set 2^N, Word Search 2D grid DFS
✅ 11. Dynamic Programming (7/7 passed)
✓ Coin Change, House Robber, 0/1 Knapsack, LCS, Levenshtein Distance, Grid Paths, LIS O(N log N)
✅ 12. Sorting Algorithm Battle Arena (3/3 passed)
✓ 5 distribution types, all 6 algorithms sorting correctness & live telemetry, podium rankings
✅ 13. DSA Quest (Game Engine) (3/3 passed)
✓ 10 progressive levels, single-answer diagnostics, XP & rank tier promotions
======================================================
📊 TOTAL: 53 | PASSED: 53 | FAILED: 0 | TIME: 31ms
======================================================
Interactive Test Runner: You can also launch the test runner inside the web application by clicking "Run All Unit Tests" in the top navigation bar.
| Category | Module / Algorithm | Best Time | Average Time | Worst Time | Space (Aux) | Primary FAANG Applications |
|---|---|---|---|---|---|---|
| Complexity | Asymptotic Growth Curves | Scalability assessment, system sizing | ||||
| Arrays | Two Pointers & Sliding Window | Substring search, target sums, container with most water | ||||
| Arrays | Kadane's Algorithm | Maximum contiguous subarray, stock profit | ||||
| Sorting | QuickSort (3-Way Dutch Flag) | High duplicate keys, dual-pivot system sorts | ||||
| Sorting | MergeSort | Stable sorting, external storage merges | ||||
| Sorting | HeapSort | In-place guaranteed |
||||
| Lists | Floyd's Cycle Finding | Loop detection, memory leak prevention | ||||
| Stacks | Monotonic Stack | Daily temperatures, largest rectangle in histogram | ||||
| Trees | AVL Tree (Self-Balancing) | Strict lookup guarantees, database indices | ||||
| Trees | Trie (Prefix Tree) | Autocomplete engines, spell check, IP routing | ||||
| Heaps | Min/Max Binary Heap |
|
Priority task schedulers, Dijkstra frontier | |||
| Graphs | Dijkstra Shortest Path | GPS map routing, packet path optimization | ||||
| Graphs | Bellman-Ford & Negative Cycles | Currency arbitrage detection, distance vector routing | ||||
| Graphs | Floyd-Warshall (APSP) | Transitive closure, dense network analysis | ||||
| Graphs | Ford-Fulkerson (Edmonds-Karp) | Bipartite matching, network maximum flow | ||||
| Graphs | Kahn's Topological Sort | Build pipelines, dependency resolution (Webpack/Gradle) | ||||
| DP | 0/1 Knapsack | Resource allocation, budget optimization | ||||
| DP | Longest Common Subsequence |
git diff, bioinformatics DNA sequence alignment |
||||
| DP | Levenshtein Edit Distance | Fuzzy search, spelling suggestion engines | ||||
| DP | LIS (Patience Sorting) | Box stacking, longest increasing trends |
Data-structures-Algorithms/
├── docs/
│ └── assets/ # High-resolution documentation & demo screenshots
│ ├── hero-demo.png
│ ├── sorting-pro.png
│ ├── graphs-demo.png
│ └── avl-tree.png
├── src/
│ ├── components/ # Modular UI & visualizer components
│ │ ├── visualizers/ # Dedicated algorithm visualizer engines
│ │ │ ├── ArrayVisualizer.jsx
│ │ │ ├── MergeSortVisualizer.jsx
│ │ │ ├── GraphVisualizer.jsx
│ │ │ ├── TreeVisualizer.jsx
│ │ │ └── DPVisualizer.jsx
│ │ ├── ControlsBar.jsx # Playback engine, step scrubber & speed selector
│ │ ├── CodeStudio.jsx # Synchronized live syntax-highlighted code viewer
│ │ ├── Header.jsx # Live stats, test modal trigger, theme controls
│ │ ├── Sidebar.jsx # Category navigation & search
│ │ └── TestRunnerModal.jsx # In-browser test runner modal
│ ├── data/
│ │ └── modulesData.js # Complete curriculum metadata, presets & steps
│ ├── tests/
│ │ ├── test-framework.js # Lightweight assertion test runner
│ │ └── all-tests.js # 47 comprehensive unit test suites
│ ├── App.jsx # Main application container & URL routing
│ ├── index.css # Polished design system (Glassmorphism, dark tokens)
│ └── main.jsx # Application entry point
├── package.json
├── vite.config.js
└── README.md
You can link directly to any module and dataset difficulty level by appending URL parameters:
# Deep link to QuickSort with Pro dataset:
https://algorithms--artashes-dev.us-east4.hosted.app/?module=quick-sort&level=pro
# Deep link to Dijkstra Shortest Path:
https://algorithms--artashes-dev.us-east4.hosted.app/?module=graphs&level=beginner
# Deep link to AVL Trees:
https://algorithms--artashes-dev.us-east4.hosted.app/?module=trees&level=pro
Contributions make the open-source community an inspiring place to learn, inspire, and create. Any contributions you make are greatly appreciated!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingAlgorithm) - Commit your Changes (
git commit -m 'Add some AmazingAlgorithm') - Ensure All Tests Pass (
npm test) - Push to the Branch (
git push origin feature/AmazingAlgorithm) - Open a Pull Request
If this visualizer helped you master algorithms or crack a technical interview, please give it a Star ⭐ and Fork 🍴 it to support ongoing development!
Distributed under the MIT License. See LICENSE for more information.



