Run-Sketch: Interactive real-time code visualization and AI narration for DSA learning

Learning Data Structures and Algorithms (DSA) can often be noted to be an important challenge, primarily due to the abstract nature of program execution. To address this pedagogical challenge, the current paper presents RunSketch, an interactive educational application that will help with visualizing code in real-time, highlighting syntax, tracking variables, and providing AI-based narration. RunSketch uses code execution to provide feedback on the code to users, and provides explanatory information in the form of written text and spoken output using Google Text to Speech API. Its front-end architecture is based on React.js, D3.js and Monaco Editor, the back-end is written in Python using Flask and uses the sys.settrace() method to trace execution. RunSketch significantly enhances understanding and interaction of learners, due to the combination of visual and audio feedback systems, thus, becoming an important innovation in the sphere of teaching programming.