Skip to content

Repository files navigation

⚡ Data Structures & Algorithms (DSA) Interactive Visualizer Suite

A Production-Grade, High-Performance Interactive Visualizer & Test-Driven DSA Curriculum Built for FAANG Technical Interviews and Computer Science Mastery

Live Demo React 18 Vite Framer Motion Tests License


🚀 Explore Live Demo🎮 DSA Quest (Game)⚔️ Algorithm Battle📖 Algorithm Guide🧪 Run Tests


DSA Visualizer Hero Banner


🌟 Why This Repository?

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-game or ?module=sorting-battle).

📸 Visual Showcase

🎮 DSA Quest (Interactive Algorithm Decision Game)

DSA Quest Game Interactive 10-level challenge mode with XP rewards, 7-day streak tracker, precondition violation diagnostics, and FAANG takeaways.


DSA Quest Success Instant diagnostic feedback, +100 DSA XP award, and FAANG algorithmic takeaway.


⚔️ Algorithm Battle Mode (All vs All Live Race)

Algorithm Battle Arena Simultaneous 6-lane minimized race on Random, Nearly Sorted, Reverse Sorted, Duplicates, or Large Datasets with live telemetry.


Battle Scoreboard & Winner Podium Post-race champion podium, comparative telemetry scoreboard (comparisons, swaps, memory, steps, ms), and algorithmic insights.


📊 Responsive Sorting & 8x Scrubbing 🕸️ Dynamic Network & Graph Topology
Sorting Visualizer Graph Visualizer
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
AVL Tree Visualizer Big-O Visualizer
Real-time LL, RR, LR, and RL rotations and balance factors Interactive comparison of logarithmic, linear, and exponential curves

🚀 Quick Start

Prerequisites

  • Node.js: v18.0+ (v20+ recommended)
  • npm or pnpm or yarn

1. Clone & Install

# Clone the repository
git clone https://github.com/Arto1993/Data-structures-Algorithms.git

# Navigate into project directory
cd Data-structures-Algorithms

# Install dependencies
npm install

2. Launch Local Development Server

npm run dev

Open http://localhost:3000 in your browser to experience the visualizer locally with hot module replacement (HMR).

3. Build for Production

npm run build
npm run preview

🧪 Automated Testing Suite

All 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.


📊 Master Curriculum & Complexity Matrix

Category Module / Algorithm Best Time Average Time Worst Time Space (Aux) Primary FAANG Applications
Complexity Asymptotic Growth Curves $\mathcal{O}(1)$ $\mathcal{O}(N)$ $\mathcal{O}(2^N)$ $\mathcal{O}(1)$ Scalability assessment, system sizing
Arrays Two Pointers & Sliding Window $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(1)$ Substring search, target sums, container with most water
Arrays Kadane's Algorithm $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(1)$ Maximum contiguous subarray, stock profit
Sorting QuickSort (3-Way Dutch Flag) $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N^2)$ $\mathcal{O}(\log N)$ High duplicate keys, dual-pivot system sorts
Sorting MergeSort $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N)$ Stable sorting, external storage merges
Sorting HeapSort $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(1)$ In-place guaranteed $\mathcal{O}(N \log N)$ sort
Lists Floyd's Cycle Finding $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(1)$ Loop detection, memory leak prevention
Stacks Monotonic Stack $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(N)$ $\mathcal{O}(N)$ Daily temperatures, largest rectangle in histogram
Trees AVL Tree (Self-Balancing) $\mathcal{O}(\log N)$ $\mathcal{O}(\log N)$ $\mathcal{O}(\log N)$ $\mathcal{O}(N)$ Strict lookup guarantees, database indices
Trees Trie (Prefix Tree) $\mathcal{O}(L)$ $\mathcal{O}(L)$ $\mathcal{O}(L)$ $\mathcal{O}(\Sigma \cdot L \cdot N)$ Autocomplete engines, spell check, IP routing
Heaps Min/Max Binary Heap $\mathcal{O}(1)$ peek $\mathcal{O}(\log N)$ $\mathcal{O}(\log N)$ $\mathcal{O}(N)$ Priority task schedulers, Dijkstra frontier
Graphs Dijkstra Shortest Path $\mathcal{O}(E \log V)$ $\mathcal{O}((V + E)\log V)$ $\mathcal{O}((V + E)\log V)$ $\mathcal{O}(V)$ GPS map routing, packet path optimization
Graphs Bellman-Ford & Negative Cycles $\mathcal{O}(V \cdot E)$ $\mathcal{O}(V \cdot E)$ $\mathcal{O}(V \cdot E)$ $\mathcal{O}(V)$ Currency arbitrage detection, distance vector routing
Graphs Floyd-Warshall (APSP) $\mathcal{O}(V^3)$ $\mathcal{O}(V^3)$ $\mathcal{O}(V^3)$ $\mathcal{O}(V^2)$ Transitive closure, dense network analysis
Graphs Ford-Fulkerson (Edmonds-Karp) $\mathcal{O}(V \cdot E^2)$ $\mathcal{O}(V \cdot E^2)$ $\mathcal{O}(V \cdot E^2)$ $\mathcal{O}(V + E)$ Bipartite matching, network maximum flow
Graphs Kahn's Topological Sort $\mathcal{O}(V + E)$ $\mathcal{O}(V + E)$ $\mathcal{O}(V + E)$ $\mathcal{O}(V)$ Build pipelines, dependency resolution (Webpack/Gradle)
DP 0/1 Knapsack $\mathcal{O}(N \cdot W)$ $\mathcal{O}(N \cdot W)$ $\mathcal{O}(N \cdot W)$ $\mathcal{O}(W)$ Resource allocation, budget optimization
DP Longest Common Subsequence $\mathcal{O}(M \cdot N)$ $\mathcal{O}(M \cdot N)$ $\mathcal{O}(M \cdot N)$ $\mathcal{O}(M \cdot N)$ git diff, bioinformatics DNA sequence alignment
DP Levenshtein Edit Distance $\mathcal{O}(M \cdot N)$ $\mathcal{O}(M \cdot N)$ $\mathcal{O}(M \cdot N)$ $\mathcal{O}(\min(M, N))$ Fuzzy search, spelling suggestion engines
DP LIS (Patience Sorting) $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N \log N)$ $\mathcal{O}(N)$ Box stacking, longest increasing trends

🛠️ Project Architecture

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

💡 Deep Linking & Embedding

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

🤝 Contributing

Contributions make the open-source community an inspiring place to learn, inspire, and create. Any contributions you make are greatly appreciated!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingAlgorithm)
  3. Commit your Changes (git commit -m 'Add some AmazingAlgorithm')
  4. Ensure All Tests Pass (npm test)
  5. Push to the Branch (git push origin feature/AmazingAlgorithm)
  6. Open a Pull Request

⭐ Support & Star

If this visualizer helped you master algorithms or crack a technical interview, please give it a Star ⭐ and Fork 🍴 it to support ongoing development!

Stargazers over time


📄 License

Distributed under the MIT License. See LICENSE for more information.


Built with ❤️ by Artashes • Hosted live on Google Cloud