StudentIDE

The problem

A student practicing web development needed an editor, a live preview, and a way for me to look at and edit the same files, without asking him to set up a dev environment.

Constraints

• Nothing a student writes runs on the server; the preview is plain static file serving.
• Every file path is confined to that student's own workspace folder, validated so a symlink or a ".." can't escape it.
• The preview runs in a sandboxed origin, so a student's page can't read the editor's session or call its API.

Approach

Built with a FastAPI backend and a Vite/React/TypeScript frontend using Monaco, the same editor VS Code uses.

1. The live preview uses two stacked iframes rather than one. A reload navigates only the hidden iframe and swaps visibility once it finishes loading, so the visible page never goes blank mid-reload.
2. Autosave fires a second after typing stops. A save that conflicts with my own edit on the same file returns a conflict instead of silently overwriting it.
3. File changes from the student's saves and my own edits are watched and sent to the browser live. A single save can raise more than one raw filesystem event; those are coalesced so one save always reads as one change instead of looking like a delete.
4. A console bridge in the preview forwards console output and errors to the editor's console panel.

What was hard

Getting file switching and preview refresh right took two separate fixes: coalescing the file watcher's events so a save never looked like a delete-then-recreate, and a double-buffered preview iframe so a reload never shows a blank page. An earlier pass added end-to-end tests in a real browser and fixed issues a security audit found.

Result

In use, invite only.