ProctorPal is a web-based online examination and proctoring platform designed to support secure, organized, and efficient online assessments.
The platform brings together authentication, quiz and examination management, reusable quiz-bank questions, student examination attempts, browser-based proctoring, results, reporting, and Supabase-backed data management in a single application.
Online examinations require more than simply presenting questions and collecting answers. ProctorPal provides a structured examination workflow for both instructors and students.
The application is built around authenticated user workflows and provides dedicated functionality for:
- Creating and managing quizzes
- Managing reusable quiz-bank questions
- Joining and attempting examinations
- Browser-based webcam proctoring
- Viewing examination results
- Reviewing student attempts
- Generating and viewing reports
- Managing user profiles
- Maintaining application data through Supabase
The project is built using React and TypeScript with Vite and TanStack technologies on the frontend and Supabase for backend and database functionality.
- User registration
- User login
- Password recovery
- Password reset
- Authenticated application routes
- Protected user workflows
- Profile management
- Quiz listing
- Quiz creation
- Quiz editing
- Quiz details
- Quiz joining
- Examination workflows
- Student quiz attempts
- Quiz results
- Dedicated quiz-bank interface
- Reusable examination questions
- Question management
- Supabase-backed quiz-bank data
- Seed data for initial quiz-bank content
- Browser-based proctoring functionality
- Webcam integration
- Camera permission handling
- Proctoring logic separated into a dedicated application module
- Proctoring support during examination workflows
- Student result viewing
- Quiz-level reporting
- Attempt-specific reporting
- Examination reports
- Review of student attempts
- Assessment performance information
- Protected authenticated routes
- Modular application structure
- Reusable React components
- Dedicated hooks
- Separated authentication logic
- Separated quiz logic
- Dedicated proctoring modules
- Supabase integration
- TypeScript database types
Teachers can use ProctorPal to manage examinations and review student performance.
Teacher-oriented functionality includes:
- Accessing the authenticated dashboard
- Creating quizzes
- Editing quizzes
- Managing quiz questions
- Using the quiz bank
- Viewing quiz information
- Reviewing examination attempts
- Accessing reports
- Reviewing assessment results
- Managing examination-related workflows
The exact permissions available to a user depend on the application's configured authentication and database policies.
Students can use ProctorPal to participate in online examinations.
The student workflow includes:
- Creating or accessing an account
- Logging into the application
- Accessing the authenticated dashboard
- Joining an available examination
- Starting a quiz attempt
- Completing examination questions
- Using browser-based proctoring where enabled
- Submitting the examination
- Viewing the resulting assessment information
- Reviewing previous quiz activity
ProctorPal provides a complete examination workflow covering the main stages of online assessment.
The application provides dedicated workflows for:
- Quiz listing
- Quiz creation
- Quiz editing
- Quiz details
- Quiz joining
- Student attempts
- Results
- Reports
Quiz-related application logic is organized primarily under:
src/lib/quizzes/
This module contains:
- Quiz data access (
quiz-data.ts) — loading quiz questions and options for editing - Quiz operations (
quiz.functions.ts) — creating, updating, publishing, and deleting quizzes; managing questions and options; quiz enrollment lists - Student operations (
student.functions.ts) — joining quizzes by access code, starting attempts, submitting answers, and retrieving results - Quiz-bank operations (
quiz-bank.functions.ts) — reusable question bank queries, subject listing, and generating quiz versions - Validation schemas (
schemas.ts) — Zod schemas for quiz and question data - Shared types (
types.ts) — quiz-bank and UI component types
- Students join a quiz using an access code (or a QR code)
- Each attempt is recorded with start and submission timestamps
- Answers are graded against the correct options and scored automatically
- Attempt status is tracked as
not_started,in_progress, orcompleted
Proctoring logic is kept in dedicated modules under:
src/lib/proctoring/
src/components/proctoring/
- Webcam capture and face detection (
use-webcam-proctor.ts) - Fullscreen and focus lockdown (
use-lockdown.ts) - Proctored session orchestration (
ProctoredSession.tsx) - Session timer (
quiz-timer.tsx)
Proctoring events, snapshots, and risk scores are stored in Supabase and surfaced in attempt reports.
- Students review their scores on the result page
- Teachers view quiz-level reports with per-attempt risk, scores, and critical-event counts
- Attempt detail pages show an event timeline, snapshots, face verification, and risk bands
src/
components/ Reusable UI and proctoring components
integrations/ Supabase client setup and generated database types
lib/ Application logic (auth, quizzes, proctoring, config)
routes/ File-based TanStack Router routes
- Frontend: React, TypeScript, Vite, TanStack Router, TanStack Start, TanStack Query
- Styling: Tailwind CSS and shadcn-style UI components
- Backend: TanStack Start server functions
- Database: Supabase (PostgreSQL) with generated TypeScript types
- Proctoring: Webcam capture, face detection, fullscreen lockdown, and event logging in the browser
-
Install dependencies:
npm install
-
Configure environment variables (see
.env):SUPABASE_URLSUPABASE_PUBLISHABLE_KEY/VITE_SUPABASE_URL/VITE_SUPABASE_PUBLISHABLE_KEYSUPABASE_SERVICE_ROLE_KEY(server-side only)
-
Start the development server:
npm run dev
-
Build for production:
npm run build