A comprehensive, secure online proctoring system built with Next.js, TypeScript, and Tailwind CSS. This system enables teachers to conduct exams with real-time monitoring and implements advanced anti-cheat functionalities.
- Secure Login/Register: Role-based authentication for students and teachers
- Password Encryption: Client-side encryption using crypto-js
- Session Management: Secure cookie-based authentication with encrypted user data
- Role-based Access: Different interfaces and permissions for teachers and students
- Dashboard: Comprehensive overview with exam statistics and quick actions
- Exam Management: Create, edit, and manage examinations
- Real-time Monitoring: Live monitoring of students during exams
- Anti-cheat Detection: Real-time alerts for suspicious activities
- Webcam Monitoring: Live video feeds from student cameras
- Direct Messaging: Send messages to students during exams
- Analytics: Detailed performance reports and insights
- Dashboard: View available exams, upcoming tests, and results
- Exam Interface: Clean, intuitive exam-taking interface
- Progress Tracking: Real-time progress indicators and navigation
- Question Flagging: Mark questions for review
- Timer: Countdown timer with automatic submission
- Tab Switching Detection: Alerts when students switch tabs
- Window Focus Monitoring: Detects when exam window loses focus
- Keyboard Shortcuts Prevention: Blocks developer tools, copy/paste, etc.
- Right-click Disable: Prevents context menu access
- Fullscreen Enforcement: Forces fullscreen mode during exams
- Print Prevention: Blocks printing attempts
- Real-time Violation Tracking: Logs and reports all suspicious activities
- Live Camera Feed: Real-time webcam monitoring
- Snapshot Capture: Periodic photo capture during exams
- Camera Status Monitoring: Ensures camera remains active
- Permission Handling: Graceful handling of camera permissions
- Data Encryption: Client-side encryption for sensitive data
- CSRF Protection: Token-based request validation
- Input Validation: Comprehensive form validation using Zod
- Secure Cookies: HTTPOnly, Secure, and SameSite cookie settings
- XSS Prevention: Input sanitization and safe rendering
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS 4
- Authentication: Custom implementation with crypto-js
- Forms: React Hook Form with Zod validation
- Icons: Lucide React
- Camera: React Webcam
- Real-time: Socket.io (client)
- State Management: React hooks and context
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd proctoring_system
-
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root directory:NEXT_PUBLIC_ENCRYPTION_KEY=your-secret-encryption-key
-
Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
- Secure API endpoints with proper authentication
- JWT/session-based authentication with password hashing
- Server-side monitoring and data persistence
- Role-based permission enforcement
- Secure media storage for webcam snapshots
- Rate limiting and comprehensive audit logging
- Anti-cheat detection and violation tracking
- Real-time exam monitoring with WebSocket support
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.