AlgoVerse

• 

  Concept Library

• 

  AI Algo Builder - Any question it can gennerate

• 

  3D Visualization of Array Operation

• 

  Majority Element

• 

  Reverse a Linked list

• 

  Stack Operation And Question

• 

  Queue Operation

• 

  Tree Traversal

• 

  Graph Traversal - DFS - BFS

Inspiration

Learning Data Structures and Algorithms (DSA) often feels like staring at a black box. Traditional textbooks use static, 2D diagrams that fail to capture the dynamic, time-based nature of code execution. Even existing online visualizers often oversimplify complex concepts like recursion, leaving students to mentally visualize the "call stack."

I was inspired to build AlgoVerse to bridge this cognitive gap. I wanted to transform abstract logic into tangible, immersive 3D environments, gamifying the learning experience and allowing developers to physically "watch their code breathe."

What it does

AlgoVerse is a next-generation interactive laboratory for algorithms, built entirely in the browser. It goes beyond typical bar chart animations by treating data as physical objects in a 3D virtual space.

Recursive Tree Views: Its flagship feature visualizes "Divide and Conquer" algorithms (like Merge Sort and Quick Sort) by physically breaking arrays apart into dynamic 3D trees. Users can watch the recursion stack deepen as cubes drop down levels, and watch them reassemble as the stack unwinds.

Standard Sorting: It renders classic algorithms like Bubble, Selection, and Insertion Sort with highly polished 3D block animations in a clean aesthetic.

Full Execution Control: Users aren't passively watching a video; they have a powerful "Pause/Resume" engine to freeze the algorithm mid-millisecond to inspect the state.

Real-time Feedback: Color-coded states instantly communicate logical operations (e.g., Yellow for comparison, Red for swapping, Purple for pivots, and Green for sorted).

LLM-Powered 3D Generation: AlgoVerse integrates an advanced LLM model that can interpret any algorithmic question given by the user and automatically generate an interactive 3D visualization for it. Instead of being limited to predefined algorithms, users can input custom problems and instantly see them transformed into dynamic, explorable 3D algorithm simulations.

How I built it

I leveraged the modern React ecosystem to bring high-performance 3D graphics to the web without needing a heavy game engine.

Core Framework: The application is built on React.js for robust state management and UI routing.

3D Engine: I used React Three Fiber (R3F), a powerful renderer for Three.js, to define the 3D scene declaratively as components.

Animation: To ensure buttery-smooth 60FPS performance, I utilized react-three/drei helpers and bypassed the main React render loop by using direct reference manipulation within R3F's useFrame hook.

The Logic: I implemented standard DSA algorithms in JavaScript, modifying them with complex async/await patterns to inject animation delays and state updates between logical steps.

Challenges I ran into

Visualizing Recursion in 3D: Mapping a flat 1D array index to dynamic X, Y, and Z coordinates as data splits and merges was intellectually challenging. Calculating the correct offsets to prevent overlapping cubes during deep recursion took several iterations.

The "Pause" Button Paradox: You cannot simply "pause" an asynchronous JavaScript function mid-execution. I had to engineer a custom "Smart Sleep" promise-gate mechanism. Every step of the algorithm asynchronously checks a reference flag; if paused, it awaits a new promise that only resolves when the user clicks "Resume."

Performance Optimization: Balancing React state updates with heavy 3D rendering was tricky. I had to learn to use useRef extensively to avoid re-rendering the entire 3D canvas on every tiny position change.

Accomplishments that I'm proud of

I am incredibly proud of the recursive visualization. Seeing the array physically tear itself apart into a tree structure and reassemble is a powerful "Aha!" moment that static diagrams cannot replicate.

The Async Orchestrator: Building a robust engine that handles complex animation timings while keeping the UI responsive and connectable to a Pause/Stop button was a significant technical achievement.

Aesthetic Polish: Achieving a clean, professional, futuristic aesthetic (the green and white theme with glowing accents) that feels like a modern developer tool rather than a basic toy.

What I learned

I gained deep expertise in React Three Fiber and the nuances of managing a 3D scene context within a 2D UI framework.

I learned how to manage complex asynchronous control flows in JavaScript, specifically how to interrupt and resume promise chains.

Ironically, building visualizers for these algorithms forced me to understand their underlying logic and edge cases far better than just solving LeetCode problems ever did.

What's next for AlgoVerse

AlgoVerse is just the foundation. The roadmap includes:

AI Tutor Integration: Adding an LLM-powered assistant that can explain why a specific swap is happening in real-time based on the current visual state.

Mobile Optimization: Ensuring the 3D experience is touch-friendly for learning on the go.

Code Editor Integration: Allowing users to paste their own code and see it visualized instantly.

Built With

• react
• three.js