DEV Community

Cover image for Building a Remote Technical Interview Platform with AI Proctoring (Next.js + WASM)
Keshav Jangir
Keshav Jangir

Posted on

Building a Remote Technical Interview Platform with AI Proctoring (Next.js + WASM)

Remote technical interviews are deceptively hard.

It’s not just about video calls and a code editor — it’s about fairness, integrity, real-time sync, and low-latency feedback, all inside the browser.

Over the past few weeks, I’ve been building AssessIQ, a remote technical interview platform designed to solve these problems using modern web technologies.

This post breaks down what I built, the hard problems I faced, and the architectural decisions behind them.

The Core Problem

  • Traditional remote interviews suffer from:
  • Tab switching and external help
  • Lack of real-time visibility for interviewers
  • High-latency server-side proctoring
  • Poor synchronization between interviewer and candidate

I wanted to answer one question:

Can we enforce interview integrity without harming performance or privacy?

High-Level Architecture

AssessIQ is built around real-time, client-first design:

Tech Stack

  • Next.js + TypeScript – Application framework
  • Convex – Real-time backend & synchronized state
  • Clerk – Authentication & role-based access (Interviewer / Candidate)
  • Stream API – Video calls & interview events
  • Monaco Editor – In-browser code editor
  • MediaPipe FaceMesh (WebAssembly) – Client-side AI proctoring
  • Piston API (in progress) – Sandboxed code execution

Real-Time Interview Flow

  • Interviewer creates a session
  • Candidate joins with a restricted environment
  • Code, alerts, and interview state sync in real time
  • Integrity checks run continuously in the browser

Convex handles reactive state updates, ensuring both sides see changes instantly without manual polling.

Client-Side AI Proctoring with WebAssembly
One of the most critical design decisions was where proctoring should run.

Instead of sending video streams to a server, I used MediaPipe FaceMesh compiled to WebAssembly (WASM).

Why WASM?

  • Near-native performance inside the browser
  • No server inference latency
  • Privacy-friendly (video never leaves the device)
  • Scales without GPU servers

What it detects

  • Face presence
  • Gaze deviation
  • Camera disengagement

All detection logic runs locally, with only events (not video) propagated to the system.

Enforcing Interview Integrity

To prevent common cheating vectors, I implemented:

  • Fullscreen API enforcement
  • Tab visibility & focus tracking
  • Stream event hooks for automated warnings
  • Progressive escalation (warnings → flags)

The challenge wasn’t detecting violations — it was avoiding false positives and ensuring the UX stayed fair.

What’s Next

  • Finish Piston-based execution pipeline
  • Add integrity scoring per session
  • Improve false-positive mitigation
  • Harden rate limiting & audit logs

AssessIQ taught me that:

  • Frontend engineering is no longer “just UI”
  • Browsers are capable of serious system-level work
  • WebAssembly unlocks entirely new classes of applications
  • Real-time systems demand discipline, not shortcuts

If you’re building interview platforms, proctoring tools, or real-time web apps — I’d love to exchange ideas.


Top comments (0)