Learning Vibe Coding Through Safety-Mong: Building a Real-Time Quiz Platform and Lessons from Elimination

While preparing to return to university after completing my military service, the most talked-about keyword across the developer community was “Vibe Coding.”

Watching developers iterate on entire codebases through natural-language prompts with LLMs, I didn’t want to remain a mere spectator. I wanted to study it hands-on and experience it directly. I wanted to understand how to weave AI tools into an actual engineering workflow, and discover where their real superpowers and structural boundaries lay.

Casually following sample tutorials wouldn’t provide the depth I was looking for. “Let me build and ship a complete, working product from start to finish.”

I chose the 2026 KIT Vibe Coding Contest as my proving ground to study and put vibe coding into practice. The competition attracted over 500 teams. I entered solo without teammates to build a product on my own.

---

The Concept: Transforming Lab Safety Education into a Real-Time Quiz

The overarching theme of the contest was “Next-Generation Educational Solutions Powered by AI.” The organizers’ guidelines stood out:

“This competition extends beyond building a conventional learning management system (LMS). We seek AI solutions that sharply resolve practical pain points faced by instructors, students, and educators.”

Since I was studying AI integration, I wanted to avoid building a trivial chatbot wrapper and instead tackle an everyday friction point in university life. My focus landed on the repetitive, check-the-box laboratory safety training mandated every semester.

In university research labs, safety training often devolves into idling through muted videos in background browser tabs or guessing on standardized multiple-choice questions. Instructors have no easy way to diagnose critical misunderstandings, and students promptly forget protocols once the quiz ends.

I set out to address this by combining a real-time synchronized quiz arena with post-session AI diagnostic reports. I named the project Safety-Mong.

• One-Click Tailored Generation: When an instructor enters an experiment topic or chemical reagent, Gemini 2.0 Flash instantly drafts contextual questions and plausible distractor options.
• QR Entry & Live Synchronized Arena: Students join on their phones via QR code without registration or app installation, competing simultaneously against an authoritative countdown.
• AI Misconception Diagnostic Reports: After the session, the system doesn’t merely display rankings. It analyzes why students chose particular wrong answers, identifying common hazards and giving instructors actionable feedback.

With the scope defined, I began implementing the platform using vibe coding workflows.

---

Facing Reality While Learning Vibe Coding

Initially, the speed of building with AI was eye-opening. Scaffolding the Next.js 15 App Router, modeling SQLite schemas with Drizzle ORM, and sketching responsive UI components with Tailwind CSS moved remarkably fast. Explaining functional context in natural language immediately produced functional scaffolding.

However, as the project evolved past basic CRUD into bi-directional real-time communication (Socket.IO) and strict session state synchronization, I confronted the real challenges of how to effectively wield vibe coding.

1. Never Trust the Client: The Server Authority Timer

For a casual toy quiz, a simple setInterval on the client might suffice. But in a synchronized quiz, a single second separates the leaderboard. The second a participant locks their mobile screen or switches browser tabs, client clocks drift.

When I initially asked the AI for timer code, it generated a basic countdown relying on browser clocks. That approach was vulnerable to network latency and client tampering. Instead of blindly trusting AI generation, I stepped back to design a Server Authority Timer architecture and paired with the AI to flesh out the implementation.

// The server process maintains internal ticks as the Single Source of Truth,
// broadcasting time sync events and applying a strict 500ms network grace period.

The server strictly retained authoritative time, broadcasting only remaining time events to clients while evaluating all submitted answers against server-side timestamps.

2. Session State Machines: One Drift Freezes the Room

Safety-Mong’s session lifecycle required rigid coordination:

waiting → active → intermission → active → ... → completed → analysis → closed

From the lobby to problem display, answer reveal, question progression, and final AI diagnosis, dozens of concurrent sockets had to transition through identical states in lockstep.

The initial code written by the AI broke down whenever a participant refreshed or reconnected midway through a round, triggering unhandled exceptions that locked up the entire session. Simply asking the AI “fix this error” failed to resolve the root cause.

This was where I realized that “even when vibe coding, the developer must hold the steering wheel on systems architecture and state modeling.” I sketched out the session transition rules on paper and modeled strict union types with Zod schemas. Once I defined that clear boundary, prompting the AI to implement the specific event handlers resulted in clean, reliable code.

3. Memory Leaks and Deployment Stabilization

During local concurrency testing with multiple browser tabs simulating live users, the server unexpectedly crashed.

• Sockets disconnected without cleaning up participant instances from the in-memory Map.
• The loginAttempts rate-limiting Map lacked cleanup for expired timestamp entries.
• Rapid timer updates caused unnecessary parent component re-renders.

Tracing through the codebase alongside the AI, I plugged the memory leaks and applied React.memo to high-frequency timer components. Packaging everything with Docker Compose, I finished the deployment and verified the live URL just before the submission deadline.

---

The Outcome and What Remained

When the results were announced, my name was not on the winners’ roster among the 500 competing teams. I was eliminated.

Having built the entire stack—from socket networking to AI pipelines and containerized deployment—the disappointment was real, but the time spent was far from wasted. Regardless of the contest outcome, Safety-Mong proved to be the most impactful hands-on learning experience for truly mastering vibe coding.

• I learned how to properly wield Vibe Coding.
  Delegating code generation to an AI does not diminish the engineer’s responsibility. Rather, it proved that AI delivers explosive productivity only when the human developer clearly defines data modeling, state boundaries, and system architecture.
• I regained full engineering confidence.
  What began as an exploratory project turned into an intensive solo crucible. Pushing through from blank slate to socket engine, AI pipelines, and live deployment swept away any lingering doubts about my coding instincts.

The lessons and challenges from this project became the cornerstone of my current development workflow. Crafting my custom CLI environment and agent harnesses (like Pi), building Hoseo LMS Plus for real university students, and operating my homelab cluster all trace their roots back to the lessons learned while studying vibe coding through Safety-Mong.

The contest ended in elimination, but the practical understanding of this new paradigm remains one of my most valuable engineering assets.