VibeTrace

Turning Frustration into Flow: The AI-Enhanced Debugging Playground.

Comment

Inspiration

As an educator leading multiple Vibecoding workshops, I noticed a consistent pattern: the greatest barrier for learners isn't "how to start a program," but "how to fix it when things go wrong." In the age of AI-assisted coding, debugging has become the most critical skill. I created VibeTrace to transform the often-frustrating debugging process into a structured, rewarding, and social experience. By categorizing common bugs into themed challenges, I help students bridge the gap between AI generation and true code comprehension.

What it does

VibeTrace is a specialized learning management system designed to coordinate "Vibecoding" sessions. Students receive specific debugging tasks on the platform and then transition into Gemini Canvas to perform the actual fixes.(Try it with room code 5945)

  • Themed Debugging Path: Challenges range from Basic (Bulletin Board layout) and Intermediate (Timer logic) to Advanced (RPG Battle mechanics).
  • Gamified Growth: Each student nurtures a digital "Vibe Monster." Evolution is driven by a custom algorithm: $$Evolution_State = f(T, L)$$ where $T$ is the time taken to solve the challenge and $L$ is the number of "Likes" received from peers for their prompts.
  • Social Learning: Students can view "Successful Prompts" used by classmates and give "Hearts" to helpful ideas.
  • Instructor Dashboard: Teachers monitor progress via a live Heatmap and receive "Smart Alerts" if a student is stuck on a specific task for too long.

How I built it

  • Antigravity: The entire project was architected and prototyped using Antigravity, enabling rapid development of complex state management.
  • Firebase Firestore: Used as a real-time backend to synchronize monster states, heatmaps, and peer interactions across dozens of students simultaneously.
  • Frontend: Built with Vanilla JavaScript and Tailwind CSS for a high-performance, responsive "Vibe" that works on any student device.
  • Gemini Integration: The core learning loop utilizes Gemini Canvas as the primary workspace, while VibeTrace acts as the orchestration and tracking layer.

Challenges I ran into

The primary technical challenge was managing Real-time State Sync for the evolution system. Ensuring that every "Heart" given by a peer immediately reflected in the database and potentially triggered an evolution state required a robust observer pattern within Firestore. Additionally, designing a fair evolution algorithm that balanced speed with community contribution required significant testing and logic iteration.

Accomplishments that I'm proud of

  • Reducing "Debugging Anxiety": Successfully turning a source of student frustration into a source of excitement through monster evolution.
  • The Class Photo Ritual: Developing an automated system that renders all student monsters together for a final "Vibe Class Photo," creating a strong sense of achievement.
  • Teacher Empowerment: Creating a tool that allows instructors to "see" student logic in real-time through prompt comparisons and heatmaps.

What I learned

I learned that Vibecoding is not just about writing code; it's about developing the intuition to talk to AI effectively. By gamifying the "errors," I remove the fear of failure. When students stop worrying about "breaking the code" and focus on "evolving their monster," their learning speed increases exponentially.

What's next for VibeTrace

My ultimate vision is to transform VibeTrace into a global ecosystem where teachers empower other teachers to embrace the AI era.

  • Teacher-to-Teacher (T2T) Network: I plan to develop a "Train the Trainer" framework, allowing experienced educators to host their own Vibecoding workshops using the VibeTrace platform to onboard their peers.
  • Global Challenge Library: We will build a crowdsourced repository where educators can share their themed debugging scenarios—ranging from basic HTML layouts to complex "Math City" logic puzzles—creating a limitless curriculum for classrooms worldwide.
  • AI Pedagogical Assistant (Gemini 3 Integration): We aim to leverage Gemini 3's reasoning capabilities to provide teachers with real-time "Teaching Insights." The system will analyze prompt patterns across the class to suggest exactly where the teacher should intervene to provide the most impact.
  • Multi-modal Visual Debugging: Integrating Gemini 3's visual processing to allow students to upload error screenshots directly into VibeTrace, enabling the AI to provide visual scaffolding and "vibe-checks" on UI/UX designs.

Built With

  • antigravity
  • firebase
  • geminicanvas
  • huggingface
  • tradionalchinese
Share this project:

Updates