File Architecture

The ProctorAI prototype follows the Next.js 15 App Router architecture, organized into functional layers that separate user-facing routes, reusable UI components, and the simulation logic that powers the proctoring experience.

Directory Overview

The project is structured to prioritize clarity between the Student Exam Flow and the Proctor Dashboard.

src/
├── app/              # Application routes and page-level logic
├── components/       # Reusable React components
│   └── ui/           # Atomic UI primitives (shadcn-style)
├── lib/              # Business logic, utilities, and mock data
├── visual-edits/     # Instrumentation for Orchids tooling
└── styles/           # Global styles and Tailwind configuration

Core Application Routes (/src/app)

The app directory uses file-based routing to define the main product surfaces. Each folder contains a page.tsx that serves as the entry point for that specific experience.

• / (Home): The marketing landing page. It introduces the product value proposition, stats, and provides entry points for both the proctor and student demos.
• /features: A detailed catalog of the AI monitoring capabilities, including gaze tracking, behavioral analysis, and system monitoring.
• /dashboard: The proctor-facing interface. It features:
  • Real-time student monitoring cards.
  • Live alert feeds with severity filtering.
  • State-driven simulations that update student risk scores dynamically.
• /exam: The student-facing interactive flow. This route manages a three-phase state machine:
  1. setup: System hardware and identity verification.
  2. exam: The monitored testing environment with active anti-cheat guardrails.
  3. submitted: Result summary and compliance confirmation.
• /analytics: A high-level oversight view using Recharts to visualize integrity trends, violation distributions, and session history.

Component Architecture (/src/components)

Components are divided by their scope and reusability:

Shared Layouts

Located in src/components/, these provide consistent navigation and branding across all routes:

• Navbar.tsx: Context-aware navigation.
• Footer.tsx: Product links and metadata.
• ErrorReporter.tsx: Global instrumentation for error tracking.

UI Primitives (/src/components/ui)

A collection of low-level, accessible components built with Radix UI and styled with Tailwind CSS v4. These include buttons, cards, badges, and modals used throughout the application to ensure visual consistency.

Logic and Simulation (/src/lib)

Since this is a prototype, the "backend" is simulated via logic stored in the lib directory:

• mockData.ts: The central source of truth for the prototype. It contains the student database, exam questions, alert types, and helper functions to calculate risk levels or format timestamps.
• utils.ts: Contains the cn (class variance authority) helper for merging Tailwind classes dynamically.

Key Technical Configurations

Visualization and Motion

The project utilizes framer-motion for page transitions and recharts for the analytics dashboard. Most charts and lists are wrapped in AnimatePresence to handle real-time simulation updates smoothly.

Visual-Edit Instrumentation

In next.config.ts, the project is configured with a custom component-tagger-loader. This allows for visual-edit instrumentation via the Orchids tooling, enabling real-time UI adjustments within the visual-edits directory.

Anti-Cheat Instrumentation

The logic within src/app/exam/page.tsx implements client-side monitoring including:

• Tab Visibility: Detecting when a student switches tabs.
• Audio Analysis: Using the Web Audio API to monitor ambient noise levels.
• Canvas Analysis: A pixel-based face presence approximation.
• Input Blocking: Disabling right-click and unauthorized keyboard shortcuts.