Web Exam Platform: A Next.js Monolith for Secure, Multilingual Online Exams

The Challenge: Modernizing Complex Academic Examinations

Educational institutions managing multi-semester programs, diverse cohorts, and multilingual student bodies (English, Arabic, Urdu) often struggle with manual exam administration. The client needed a single, centralized platform to handle secure, timed online exams for both registered students and walk-in candidates, complete with advanced proctoring, strict role-based access, and the ability to scale during high-concurrency exam periods.

The Solution: A Feature-Rich Next.js 14 Monolith

I built the Web Exam Platform as a full-stack Next.js 14 application using TypeScript and the App Router. By leveraging Server Components for data fetching and client components (*-client.tsx) for interactivity, the system delivers exceptional performance while maintaining a clean, well-organized architecture with 71 API routes and 40+ pages.

Key Features & Engineering Highlights

1. Dual Exam Flows: Registered vs. Public Candidates

The platform offers two entirely distinct exam-taking experiences:

• Registered Students log in to a role-based dashboard (Admin, Teacher, or Student) to access their cohort-specific exams with full academic tracking.
• Public Exam Flow allows walk-in candidates to join using a unique 6-character code or QR code, requiring only a name and mobile number. This flow includes an admin approval workflow, ensuring institutions can vet external participants before granting exam access.

2. Advanced Proctoring & Violation Detection

Security is paramount in online exams. I implemented a robust client-side violation detection system that tracks 12 distinct violation types, including:

• Tab switching and window blurring.
• Opening DevTools or right-click menus.
• Copy/paste attempts.

All violations are logged in real-time, auto-submitting the exam upon reaching a threshold and flagging the attempt for review in a dedicated Admin violation dashboard.

3. Complex Academic Architecture & Audit Trails

To accommodate semester/yearly academic tracks, the data model supports a full hierarchy:

• Programs → Cohorts → Shifts → Enrollments.
• Student progression is recorded in an append-only PromotionEvent audit trail, ensuring complete historical visibility for administrators.

4. Multilingual Support & Performance Optimizations

The platform natively supports English, Arabic, and Urdu using a Context-based language switcher with full RTL layout support for Arabic/Urdu. To handle high-concurrency public exam spikes, I implemented in-memory TTL caching, server-side timer synchronization, and submit idempotency—ensuring the system stays responsive even under heavy load.

Architecture & Engineering Standards

The project follows a strict Service Layer pattern, with business logic centralized in a robust lib/data.ts module (~1,700 lines) and authorization handled via dedicated requireRole() helpers in API routes. The database schema is well-indexed with 25 Prisma models, ensuring efficient joins and fast query performance. Developed steadily over 118 commits, the platform demonstrates a mature, iterative approach to building institution-grade software.

The Result

The Web Exam Platform is now a fully functional, production-ready system capable of handling the rigorous demands of modern education institutions. By combining complex academic modeling, advanced proctoring, and high-performance server-side rendering, it provides a seamless, secure, and scalable examination experience for admins, teachers, and students alike.

---

Interested in a custom EdTech solution for your institution? Check out my other engineering projects or reach out to me to discuss how we can build a tailored platform for your unique requirements.