Glitch Detective

Inspiration

When student developers and bootcampers hit code crashes or syntax exceptions, they often paste error messages into generic AI chatbots and blindly copy bandage fixes without understanding why their code broke. Consequently, when the same bug invariant appears in an exam, technical interview, or hackathon project, they get stuck.

We built Glitch Detective to turn every crash into a pedagogy-first masterclass: diagnosing the exact mechanical invariant failure under the hood, generating novel drills on that archetype, and tracking retention on a live weakness radar.

What it does

• Forensic Bug Autopsy: With one click, Google Gemini performs a surgical autopsy on the crash. It pinpoints the faulty line in glowing red, exposes the mechanical invariant failure (e.g., array index boundary breach propagating undefined), provides a step-by-step trace, and renders an interactive side-by-side corrected diff.
• Dynamic Practice Mode: Understanding the diagnosis is only step one. Gemini's drill generator synthesizes a brand-new scenario with the identical bug archetype. Students fix the code in an interactive sandbox with a 2-stage progressive hint oracle that never spoils the answer.
• Weakness Profile Dashboard: An adaptive 6-axis skill radar (Recharts) monitors mastery across core archetypes—from off-by-one errors to async race conditions—pinpointing vulnerabilities and recommending targeted drills.
• AI Architecture Transparency: An in-app audit modal breaks down model parameters, prompts, and schema validation guarantees.

How we built it

• Framework: Next.js 16 (App Router & Turbopack) with React 19 for ultra-fast server rendering.
• AI Engine: Google Gemini 2.5 Flash orchestrated via a 3-prompt specialized pipeline (/api/analyze, /api/practice/generate, /api/practice/check) with native JSON schema guarantees and automated zero-temperature retry handlers.
• Styling: Tailwind CSS v4 with custom hacker/detective glassmorphism UI.
• Data Visualization: Recharts multi-axis RadarChart and BarChart.
• Security & Privacy: Zero client API key leakage (server-side only) and local-first persistence via browser localStorage.
• Deployment: Deployed on Vercel Edge Serverless.

Challenges we ran into

1. Ensuring Strict AI Determinism: LLMs can return prose instead of structured data. We enforced Gemini's native responseMimeType: "application/json" with schema validation and a fallback heuristic engine to guarantee zero downtime.
2. Pedagogical Hint Calibration: Balancing helpfulness without giving away the solution required tuning prompt system instructions so hints explain the broken invariant conceptually rather than simply rewriting code.
3. Automated Demo Production: Developing Playwright scripts and FFmpeg filter chains to synchronize 1080p screen captures with neural voiceover (edge-tts) and burned-in visual subtitle overlays within the strict 3-minute hackathon limit.

Accomplishments that we're proud of

• Seamless, zero-latency one-click benchmark autopsies across JavaScript, Python, Java, and C++.
• Live Vercel deployment with 100% operational uptime.
• A fully automated, 1080p Full HD video walkthrough with neural voiceover and burned-in subtitles completed within 2:40.

What we learned

• Designing multi-prompt agentic pipelines that separate diagnostic inspection from evaluation.
• How to structure progressive pedagogical hints that cultivate problem-solving intuition rather than passive reliance.

What's next for Glitch Detective

• In-Browser WebAssembly Sandboxes: Executing student code fixes in sandboxed browser runtimes (Pyodide / WebContainer).
• GitHub PR Review Bot: An automated CI action that analyzes recurring pull request bugs and assigns custom drills to developers based on their personal repository tendencies.

Built With

• artificial-intelligence
• edge-computing
• education
• google-gemini
• lucide-react
• next.js
• react
• recharts
• tailwindcss
• typescript
• vercel