Build a “Debug the Glitch” Mini App That Generates Real JavaScript Errors and Teaches Fixes (Playable)

Build a fully functional micro web app called Debug the Glitch: a playable debugging simulator where the user fixes real JavaScript and UI bugs inside a sandboxed environment.

This is not a quiz.
It’s an interactive broken app that the player repairs.

The output must be a single HTML file that runs locally with no dependencies.

⸻

Core Gameplay Loop
1. The app shows a small “broken widget” (e.g., counter, form, modal, fetch mock, list filter).
2. A console panel displays real error messages (generated by the broken code).
3. The user edits code in an on-page editor and clicks Run Fix.
4. The app re-runs the widget:
• if fixed, show a satisfying success animation and unlock the next glitch
• if still broken, show updated errors and a subtle hint system

⸻

Glitch Levels (Must Include 6)

Create 6 levels, each with a distinct realistic bug:
1. State Bug

• a counter that re-renders incorrectly or resets due to bad state handling

2. useEffect-Style Bug (Vanilla Simulation)

• repeated event listener attachment causes duplicated clicks
• fix by cleaning up or preventing double binding

3. DOM Query Bug

• wrong selector or timing causes null reference

4. Async Bug (Mock Fetch)

• race condition or missing await breaks UI flow
• use a mocked fetch function (no network calls)

5. CSS Layout Bug

• a modal overlay not clickable due to z-index or pointer-events
• fix CSS rules

6. Data Bug

• list filter/sort fails because of wrong type comparisons or mutation

Each level must include:
• broken code snippet
• expected behavior description
• success condition check (automated)

⸻

UI Requirements (Must Feel Premium)

Dark mode only.
Cyber/dev aesthetic but clean.

Layout:
• Left: the broken widget preview (live)
• Right: code editor + console output tabs
• Bottom: hint strip (minimal)

Include:
• Level selector with locked/unlocked states
• Animated “Glitch Fixed” feedback
• A progress bar or “6/6” completion indicator

⸻

Editor Requirements (No External Libraries)

Implement a lightweight editor:
• use a styled <textarea> with monospace font<br />
• support tab indentation (insert 2 spaces on Tab)<br />
• line numbers optional (nice-to-have)</p>
<p>When user clicks Run Fix:<br />
• safely evaluate user code in an isolated function scope<br />
• prevent access to global window where possible (best effort)<br />
• reset the widget container before each run</p>
<p>⸻</p>
<p>Hint System (Non-Annoying)</p>
<p>Hints must be optional:<br />
• “Hint” button reveals 1 hint at a time<br />
• maximum 3 hints per level<br />
• hints should guide thinking, not give the solution directly</p>
<p>⸻</p>
<p>Technical Requirements<br />
• Single HTML file<br />
• Pure HTML/CSS/JS<br />
• No external libraries<br />
• No network calls<br />
• Clean, commented code<br />
• Modular structure: level definitions stored in an array with:<br />
• id, title, description, starterCode, validator(), hints[]</p>
<p>Include a small internal logging system that prints to the on-page console panel.</p>
<p>⸻</p>
<p>Output Requirements</p>
<p>Return:<br />
1. complete runnable HTML file<br />
2. short explanation of how validators work<br />
3. instructions for adding more levels</p>
<p>No pseudo-code.</p>
</textarea>