The situation
Zeroday Camp is an online coding bootcamp focused on teaching HTML and CSS from zero — structured, accountable, and built for students who need more than passive video consumption to actually learn. The platform had three requirements that standard LMS tools can't meet: a code editor that runs in the browser and evaluates real output against real test cases, a lesson system flexible enough for instructors to update without database migrations, and an engagement system that keeps students accountable without requiring a live instructor in the room. For the code editor, we integrated Monaco (the same engine that powers VS Code) with Sandpack for live browser preview. Students write HTML and CSS, see the output update in real time in a split-screen preview, and submit against test cases evaluated server-side. Test results are authoritative — there's no way to fake a passing submission. The lesson engine is YAML-based. Instructors write lessons in a structured YAML format with embedded test cases, hint systems, and preset starter files. The application parses YAML at request time — adding a new module or updating an existing lesson is a file edit with no database migration. 29 modules (12 HTML, 17 CSS) are live. The focus tracking system is the most technically complex piece. Camera-based face detection runs in a web worker (never blocking the editor), logging engagement windows, distraction ratios, absence events, and study clock data. The JS architecture uses an event bus with pluggable adapters: camera, clock, engagement (keyboard/mouse), and study session plugins — all independently testable and replaceable. Multi-step enrollment handles payment requests and prerequisite verification — students can't access advanced modules without completing prior requirements.
What had to change
Standard LMS tools offer video playback and multiple-choice quizzes. Neither gives instructors real signal on whether a student is learning — or present. Students can finish a course module without writing a single line of code, without demonstrating comprehension, and without accountability for whether they were even watching. The platform also needed to be maintainable by instructors without engineering involvement.
What we changed
Monaco editor (VS Code engine) with Sandpack live preview — students write real HTML/CSS and see output update instantly. Server-side test evaluation means results are authoritative; there is no way to fake a passing submission. YAML-based lesson engine: instructors write lessons as structured files with embedded tests, hints, and starter code. Camera-based focus tracking runs in a background web worker, logging presence, engagement, and distraction data without ever blocking the editor. Multi-step enrollment with prerequisite gating.
What the client gained
- 01 Monaco editor + Sandpack — real code, real preview, in-browser
- 02 YAML lessons — instructors update content without developers
- 03 Camera-based focus system — accountability without a proctor
- 04 Server-side test evaluation — results that can't be faked
