Build & Configuration

Getting Started

To run the ProctorAI prototype locally, ensure you have Node.js 18.18+ or Node.js 20+ installed. This project leverages the latest features of Next.js 15 and React 19.

Installation

Clone the repository:

git clone https://github.com/Ambika1704/proctor.git
cd proctor

Install dependencies: This project uses Tailwind CSS v4 and Framer Motion for high-performance animations.
```
npm install
# or
yarn install
```
Run the development server:
```
npm run dev
```
Open http://localhost:3000 to view the application.

Build Configuration

The project is configured via next.config.ts to support specific prototype requirements and visual instrumentation.

Visual-Edit Instrumentation

The prototype includes a custom loader for Orchids tooling, allowing for visual-edit instrumentation. This is handled via a Turbopack rule that injects a component tagger:

// next.config.ts snippet
turbopack: {
  rules: {
    "*.{jsx,tsx}": {
      loaders: [LOADER] // src/visual-edits/component-tagger-loader.js
    }
  }
}

Next.js Optimization Flags

To facilitate rapid prototyping and demo stability, the build configuration includes several specific overrides:

TypeScript/ESLint: Build errors and linting warnings are ignored during the production build to ensure the prototype can be deployed even with experimental code.
Image Optimization: The configuration allows SVGs and remote patterns from any host (**) to support diverse mock data and student profile placeholders.
Allowed Origins: Supports *.orchids.cloud for remote development and visual editing contexts.

Development Environment

TypeScript Strict Mode

The project uses TypeScript in strict mode to ensure type safety across the exam flow and dashboard state management.

Styling with Tailwind CSS v4

This project utilizes the early-access features of Tailwind CSS v4. Unlike previous versions, styling is largely driven through CSS variables defined in src/app/globals.css.

Utility Usage: To manage dynamic class merging (especially for UI components in src/components/ui), use the provided cn utility:

import { cn } from "@/lib/utils";

// Combines tailwind classes and handles overrides
<div className={cn("base-style", isActive && "active-style", customClass)}>

Mock Data & Simulation

Since this is a frontend-centric prototype, all "live" data is simulated.

Location: src/lib/mockData.ts
Behavior: The dashboard (at src/app/dashboard/page.tsx) uses useEffect hooks to simulate real-time risk score fluctuations and incoming proctoring alerts every 5–12 seconds.

Production Build

To generate an optimized production build:

npm run build

The output will be located in the .next folder. Note that outputFileTracingRoot is configured to point to the project root to support monorepo or containerized deployments if needed.