CodeLingo

The problem

Coding is one of the most in-demand skills to learn, but the concepts that trip up beginners most — memory, scope, control flow — are invisible in a static code editor. Students can read a for-loop line by line and still not build an intuition for what's actually happening as it runs.

The approach

CodeLingo parses C++ with a custom parser written in barebones Python (no existing compiler toolchain) and maps each line to a dynamic visual block. As the program 'executes,' the UI steps through those blocks and shows live variable state updating alongside the code — turning an abstract mental model into something a beginner can watch happen.

Design decisions

• Step-by-step execution rather than an all-at-once diagram, so the pacing matches how a beginner actually reasons through a program.
• Variable state rendered next to the block that changed it, keeping cause and effect visually adjacent instead of in a separate watch panel.
• Built as a focused C++ subset rather than a general-purpose debugger — depth of learning experience over language coverage, given the hackathon timeline.

Research & validation

TODO: add findings from the hackathon demo sessions — which control-flow constructs (loops, recursion, pointers) users found clearest versus most confusing when visualized this way.

Outcome

Built and shipped in about a week for a hackathon submission on Devpost. TODO: add placement/judging feedback and any usage since the event.