CodeVision education platform

Problem Beginners learn to write a = 5 and never find out what the machine does with it. The layers between a Python statement and a transistor — the C equivalent, the assembly, the machine-code bytes, the registers and buses that execute it — are taught months apart, in separate courses, as static diagrams. Nothing shows a value actually moving between them, so the mental model never forms and the computer stays a black box. CodeVision closes that gap. Type one line of Python, press Run, and see it at four levels at once — Python, C, x86-64 assembly and raw machine code — then watch it execute one instruction at a time on a live hardware schematic, each step lighting up the RAM, ALU, control unit or data bus it drives and explained in plain language by an AI narrator. Target user Primary: CS students in their first two years, who can write working code but have no picture of what runs underneath it. Secondary: bootcamp learners, who move fastest and get the least machine-level exposure, and instructors, who can paste the exact snippet from a lecture and get a generated walkthrough, not a pre-recorded one. How native.builder was used native.builder was the code editor for the entire project. The whole application — structure, interface, components, logic and backend services — was created and iterated on inside native.builder by writing instructions and prompts, not by hand-editing files in a conventional IDE. Each part was described in natural language, generated by its AI agents, then refined with further prompts: the four-level abstraction view, the canvas hardware schematic with particle animation, the playback controls with keyboard shortcuts and speed control, the resizable panel layout, and the two backend endpoints that classify the student's code and narrate each step. Deployment was handled through native.builder. Tools: Supabase Edge Functions (/understand, /narrate), React 18, TypeScript, Vite 7, Tailwind CSS v4, Canvas 2D.