Code Explainer
Turning AI-generated code into deliberate learning
10 programming languages
Line-by-line annotations
Concept confidence tracking
Learning streak calendar
01The Problem
The rise of AI coding tools created a new problem: developers copy code they don't understand. The vibe-coding workflow is productive until you need to debug, extend, or explain what you built. I wanted a tool that forced understanding — not just output.
02The Approach
Paste any code snippet and Claude returns line-by-line annotations explaining what each part does and why. The concept tracker surfaces which programming concepts appear across your sessions, with a confidence score you can self-rate. A learning history and streak calendar gamify the process.
03Architecture Decisions
Structured AI prompt for annotations
The prompt asks Claude to return annotations in a strict JSON format: {line: number, code: string, explanation: string, concepts: string[]}. Structured output means the UI can render annotations inline next to the actual code.
Concept graph with confidence tracking
Every code analysis extracts concept tags (closures, recursion, async/await, etc.). The concept tracker shows how many times you've seen each concept and lets you self-rate your confidence level — building a personal knowledge map over time.
GitHub-style streak calendar
Learning activity is tracked daily and displayed as a heatmap calendar. The visual representation of consistency turned out to be surprisingly motivating.
04Key Insight
Asking Claude for 'line-by-line explanations' in freeform text returns inconsistent results. Asking for structured JSON with explicit fields (line number, code, explanation, concepts) returns annotations that are far more precise and parseable — the schema constrains the output quality.
05Why It Matters
Addresses a real gap in the AI-coding era. As AI generates more code, tools that help developers understand it (not just use it) become increasingly valuable.