Quick Start

Follow these steps to set up the ProctorAI prototype locally and explore its proctoring simulations.

Before you begin, ensure you have the following installed:

Node.js 18.17 or later.
A modern web browser (Chrome or Edge recommended for webcam/audio API compatibility).
A working webcam and microphone to test the interactive exam features.

Clone the repository and install the dependencies using npm:

# Clone the repository
git clone https://github.com/Ambika1704/proctor.git
cd proctor

# Install dependencies
npm install

Start the local development server to view the application:

npm run dev

Once the server is running, open http://localhost:3000 in your browser.

This project is a functional frontend simulation. You can explore the core product surfaces via the following flows:

Navigate to /exam to start the proctoring simulation.

System Check: The app will request camera and microphone permissions and perform a simulated network/browser check.
Exam Environment: Once in the exam, try switching tabs, exiting fullscreen, or moving out of the camera's view. You will see real-time "Proctor Warnings" triggered by these anti-cheat guardrails.
Submission: Complete the multiple-choice questions to view the compliance summary.

Navigate to /dashboard to view the administrative interface.

Live Monitoring: Observe the student list where risk scores and statuses (Active/Flagged) update dynamically.
Alert Feed: Watch the real-time alert log as simulated violations (gaze deviation, tab switches) are detected across the "student" population.
Student Details: Click on a student card to open a detailed monitoring view, including a risk factor breakdown and event timeline.

Navigate to /analytics to view high-level data visualizations.

Review the Risk Distribution and Violation Categories.
Interact with the Risk Over Time area charts and Peak Violation bar graphs built with Recharts.

The prototype uses Tailwind CSS v4. Theme variables, including the "Navy" and "Cyan" brand colors, are defined in src/app/globals.css.

If you wish to modify the mock data used in the dashboard or analytics views, you can find the source objects in src/lib/mockData.ts.