Inspiration

Online exams are now the norm, but monitoring students fairly and securely at scale remains a huge challenge. We were inspired to build ProctorVision — a lightweight, browser-based AI proctoring tool — to democratize secure testing without relying on expensive infrastructure or third-party tools.

What It Does

ProctorVision uses the student's webcam to detect suspicious behavior — like absence of a face, presence of multiple faces, or looking away — all using in-browser AI (TensorFlow.js + MediaPipe). It logs violations in real time and generates a post-exam integrity report that administrators can review.

How We Built It

  • Frontend: React.js + Tailwind CSS for a responsive UI.
  • Backend: Node.js + Express.js for handling sessions, users, and report data.
  • AI: TensorFlow.js and MediaPipe for face/pose detection, running entirely in the browser.
  • Database: Firebase Firestore stores users, sessions, and violation logs.
  • Auth: Custom login/signup system with role-based access (student/admin).
  • Deployment: Frontend on Vercel, backend on Render.

We modularized the detection logic into a reusable React hook and integrated a Bolt AI agent for real-time decision logic (optional feature in extended version).

Challenges We Faced

  • Optimizing AI detection in-browser without lag during long sessions.
  • Ensuring accurate logging of violations without false positives.
  • Building a custom auth system instead of Firebase Auth.
  • Displaying live alerts and maintaining a smooth exam experience.

What We Learned

We deep-dived into running ML models in the browser, optimizing real-time detection performance, and building an efficient logging/reporting pipeline. We also learned how to balance security with user experience — keeping the system lightweight but effective.

What's Next

  • Add voice-based alerts using Web Speech API.
  • Build a mobile-friendly version for tablets.
  • Add support for identity verification via Bolt AI agent.

Built With

  • blackface
  • bolt
  • bolt-ai-agent-(optional)-database:-firebase-firestore-auth:-custom-login/signup-with-role-based-access-deployment:-vercel-(frontend)
  • express.js
  • express.js-ai/ml:-tensorflow.js
  • javascript
  • jwt
  • mediapipe-(blazeface)
  • node.js
  • react
  • render
  • tailwind-css-backend:-node.js
  • tenserflow
  • typescript
  • typescript-frontend:-react.js
  • vercel
Share this project:

Updates