What is the difference between "let" and "var"?

The gap in what exists

While many explanations exist, a truly interactive, visual, and highly focused tool specifically demonstrating `let` vs `var` scope in a step-by-step manner could still stand out among text-heavy articles.

Wedge to win

Target new JavaScript learners and bootcamp students who struggle with these foundational concepts, offering a superior visual and interactive learning experience compared to static documentation.

Reputation value (worth doing free for proof) — 75/100

Creating a highly polished, interactive visualization tool for a fundamental JS concept would be an excellent 'Show HN' piece, demonstrating strong frontend and educational tooling skills to the developer community.

Likely monetization

unclear

Incumbents to beat

MDN Web Docsjavascript.infoFreeCodeCamp

You are an expert full-stack developer. Create a Next.js 16 App Router application with React 19 and Tailwind v4. The goal is to build an interactive learning tool that visually explains the difference between `let` and `var` in JavaScript. Focus on core concepts: variable scope (global, function, block), hoisting, and re-declaration/re-assignment. 

The MVP should include:
1.  **Code Editor:** A basic code editor (e.g., using a simple textarea or a lightweight library like react-simple-code-editor) where users can type `var` and `let` declarations and simple assignments within different scopes (e.g., global, inside a function, inside an if block or loop).
2.  **Output Console:** A display area that shows the `console.log` output when the user's code is 'executed'.
3.  **Scope Visualizer:** A simplified visual representation (e.g., colored boxes or indented text) that dynamically illustrates the current scope and where variables declared with `let` vs `var` are accessible. Highlight the 'temporal dead zone' for `let`.
4.  **Explanation Text:** Dynamic text that explains *why* the output is what it is, based on the code executed and the visual scope.

Use Gemini via AI SDK v6 for any helper functions for code parsing or error detection if beneficial, but the core logic should be frontend-driven. Store minimal user preferences (e.g., theme) in local storage, no backend database (Neon Postgres) needed for the MVP. 

Your task is to build the core UI components and JavaScript execution environment for this interactive explanation tool. Ensure the execution environment safely runs user-provided JavaScript code without server-side execution (e.g., using `eval` in a sandboxed iframe if necessary, but prioritize client-side safety).