Inspiration
As a student actively practicing Data Structures and Algorithms (DSA) for my upcoming campus placements, I found myself relying heavily on standard AI chatbots to understand complex solutions. While traditional GPTs excel at spitting out blocks of code and text explanations, they completely lack one crucial element: visual intuition.
Understanding how a recursive Backtracking tree actually unfolds, or how pointers i and j traverse a 2D matrix during an $O(N^2)$ algorithm, or calculating time complexity like $O(N \log N)$ is inherently visual. Reading text just wasn't cutting it. I realized that a true coding companion needs a digital whiteboard. That is why I built Code Helper—an AI-powered DSA visualizer that bridges the gap between raw code and human intuition by rendering the data state frame-by-frame.
What it does
Code Helper is an interactive, progressive educational platform. Instead of just dumping a wall of code when you ask a LeetCode question, it mentors you step-by-step:
Phase 1 (Hints): Pushes you to think without entirely spoiling the answer. Phase 2 (Logic Walkthrough): Explains both the Brute Force and Optimal strategies. Phase 3 (Multi-Language Implementation): Generates robust code in C, C++, Java, JS, and Python. Phase 4 (Interactive Execution Engine): The crown jewel! Built from scratch, this 2D animation engine takes AI-generated step data and renders Arrays, Matrices, and Abstract Syntax Trees. You can click "Play" and literally watch pointers physically slide across the data structures while tracking local variable states frame-by-frame. How we built it The application was engineered using a modernized Full-Stack approach:
Frontend: Built with React.js and Vite for massive performance gains. The UI utilizes a deep-space glassmorphism aesthetic built using raw CSS. The core visualization engine leverages Framer Motion to handle complex positional layouts, state transitions, and smooth pointer animations across the DOM. Backend: A lightweight Node.js / Express server acting as an orchestration pipeline. AI Core: I integrated the Google Gemini 2.5 Flash API. I engineered a strict "System Prompt Response Schema" that forces the Generative AI to output highly-structured JSON traces. By parsing these traces, the AI acts as a pseudo-compiler, outputting the step-by-step execution states (arrays, trees, variable dictionaries) necessary to drive the frontend animations.
Challenges we ran into
Forcing a Large Language Model to act as a deterministic debugging engine was the biggest hurdle. LLMs frequently hallucinate or drop formatting syntax. Crafting the strict schema pipeline to ensure the AI's output matched an exact JSON structure (so the React front-end wouldn't crash when iterating over nodes) took significant prompt-engineering iteration.
Additionally, building a native React Visualizer that could dynamically swap between 1D Arrays, 2D Matrices, and Absolute-Positioned Trees required intense coordinate algorithms. For instance, calculating tree depth recursively and mapping bounding SVG line branches to floating DOM nodes dynamically using layout formulas like $X_{left} = X_{parent} - \Delta X$ was particularly mind-bending!
What we learned
I vastly improved my understanding of React component lifecycles and complex state orchestra using Framer Motion. More importantly, figuring out how to enforce strict JSON schemas against Gemini Generative AI changed how I view Prompt Engineering—moving from generic text-generation to true data-generation workflows. On top of all of this, coding the visualization rules engine inadvertently tested and solidified my own foundational mastery of DSA concepts!
You can simply copy and paste the Markdown box above into whatever submission platform/portfolio you are using!
Log in or sign up for Devpost to join the conversation.