Building an AI-Powered Online Exam Proctoring System with React and Django

Online examinations have become increasingly popular, but maintaining examination integrity in a remote environment is still a major challenge.

As a Computer Science student interested in AI/ML and full-stack development, I started building Alice Exam Proctor, an AI-powered online examination proctoring system.

The goal was to explore how computer vision and real-time communication can help monitor online examinations.

🧠 What is Alice Exam Proctor?

Alice Exam Proctor is a web-based examination monitoring system designed to detect potentially suspicious activities during online exams.

The project combines frontend development, backend engineering, computer vision, and real-time event communication.

⚙️ Technology Stack

Here are the main technologies used in the project:

  • React.js – Building the frontend and examination interface.
  • Django – Backend application and API development.
  • MediaPipe Face Mesh – Facial landmark detection.
  • MediaPipe Iris Landmarks – Supporting gaze-related analysis.
  • face-api.js – Face-related detection capabilities.
  • WebSockets – Real-time communication.
  • MongoDB Atlas – Storing application data and examination events.

🔍 Key Features

1. Face Monitoring

The system uses facial landmarks to analyze face presence and positioning during an examination.

2. Gaze Analysis

MediaPipe Face Mesh and iris landmarks are used to explore gaze-related monitoring and identify potentially unusual viewing patterns.

3. Audio Monitoring

Audio monitoring is active during examinations to support the detection of potential examination violations.

4. Real-Time Event Monitoring

WebSocket communication helps transmit examination events and violation metadata to the backend.

5. Event Management

The system records relevant examination events for further review.

🏗️ Architecture Overview

The application follows a full-stack architecture:

Frontend (React) → Backend (Django) → Database (MongoDB Atlas)

Computer vision capabilities support examination monitoring, while WebSockets enable real-time event communication.

The backend receives violation metadata and event information rather than raw audio or video streams.

🚧 Challenges During Development

Building this project taught me that developing an AI-powered application involves much more than implementing a machine learning model.

Some challenges I explored include:

  • Integrating computer vision into a React application.
  • Handling real-time communication.
  • Managing frontend and backend integration.
  • Configuring CORS for production deployment.
  • Connecting MongoDB Atlas securely.
  • Deploying frontend and backend services independently.

🔮 What's Next?

I want to improve Alice Exam Proctor further by focusing on:

  • More reliable gaze analysis.
  • Better event classification.
  • Improved monitoring accuracy.
  • A more detailed examination analytics dashboard.
  • A stronger privacy and consent workflow.

AI-based monitoring should support human review rather than automatically treating every detected event as proof of misconduct.

💡 What I Learned

This project helped me understand how computer vision, web technologies, and backend systems can work together to solve a real-world problem.

It also improved my understanding of building and deploying full-stack applications.

Technology is most exciting when we use it to solve real problems.

👨‍💻 About the Developer

I'm Aditya Singh Rajput, a Computer Science student interested in AI/ML, Python, and full-stack development.

I'm passionate about building practical AI-powered applications and exploring new technologies.

🔗 Portfolio: https://adityasinghrajput.me

💻 GitHub: https://github.com/adii0018

🔗 LinkedIn: https://www.linkedin.com/in/adii001n/

Have you ever built an AI-powered web application? I'd love to hear about your experience!