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

Log in or sign up for Devpost to join the conversation.