SotaTek Education - International Certification Management Platform

1. Overview & Problem Statement

This project is an enterprise-grade online assessment and certification platform engineered to power standardized programming examinations in collaboration with a leading East-Asian educational testing body. The ecosystem oversees the entire testing lifecycle: candidate registration, algorithmic question authoring, automated dynamic test assembly, live coding assessments, real-time proctoring, and digital credential verification.

Prior to engineering this solution, executing large-scale programming assessments involved critical technical challenges:

• Assessment UX Constraints: Absence of a resilient, web-based coding workspace capable of instant in-browser test execution with low latency.

• Rigid Permission Systems: Traditional role structures lacked the agility to dynamically reconfigure permissions across multiple operational domains (Proctoring, Candidate Testing, Educational CMS, and Partner Portals).

• Session Collisions & Latency: Fragmented authentication states across subsystems, combined with token refresh race conditions triggered by concurrent auto-saving, introduced risks of candidate disconnection during live examinations.

The platform was built to deliver a zero-latency UI, integrated algorithmic testing environments, and zero-trust security enforced through Keycloak UMA 2.0 (User-Managed Access) directly at the Edge Middleware layer.

2. Key Features & System Capabilities

In-Browser Coding Assessments & Standardized Core Integration

• In-browser Code Editor: Dedicated coding environment supporting multiple programming languages with syntax highlighting, standard developer keybindings, and real-time test-case validation.

• Standardized Examination Workflow: Secure API integrations syncing candidate registries, test sessions, and outcome metrics with an external standardized testing body to automate digital credential delivery.

• Question Bank & Dynamic Exam Assembler: Flexible test assembly engine supporting algorithmic difficulty stratification, tag-based categorization, and bulk curriculum management.

Dynamic Access Control with Keycloak UMA (User-Managed Access)

• Dynamic RBAC & UMA Policy Control: Resource-based authorization allowing administrators to create roles, adjust permission scopes, and modify policies dynamically through the management dashboard without modifying source code or triggering redeployments.

• Fine-grained Scopes: Granular policy enforcement mechanisms allowing seamless permission delegation across satellite services (Main Exam Portal, Practice Tests, Community Hub).

Live Exam Proctoring & Educational CMS

• Real-time Exam Monitoring: Administrative proctoring workspace tracking candidate connectivity health, test progression, and real-time session anomaly indicators.

• Educational CMS: Content publishing portal for managing technical curriculum guides, assessment timetables, and SEO-optimized educational articles with modern rich-text tooling.

Multi-Locale Internationalization Engine (i18n)

Full localization routing supporting English and Vietnamese views, while strictly confining administrative portals (/admin) to standard English to ensure uniform cross-border operational workflows.

3. Technical Architecture & Tech Stack

• Frontend Framework & UI Core: Next.js 15 (App Router, Server & Client Components), React 18, TypeScript, Ant Design 5, Styled Components, Sass/SCSS Modules, Framer Motion.

• Code Editor & Assessment Engine: Monaco Editor, Custom Execution Interface, Real-time Test Runner Engine.

• State Management & Data Layer: TanStack Query (React Query), Redux Toolkit + Redux Persist, Zustand, SWR, and an asynchronous queue-based Axios Interceptor architecture.

• Security & Auth Infrastructure: Keycloak OAuth2/OIDC with UMA 2.0 Engine, Decoded JWT via Edge Middleware, HttpOnly Secure Cookie Strategy.

• CMS & Rich-text Editing: CKEditor 5 Custom Build, Tiptap, ECharts data analytics, Day.js, Vite/Yarn Berry Package Manager.

4. Key Engineering Challenges & Solutions

Challenge 1: Non-blocking Token Refresh Queue Under Concurrent Assessment Workloads

• The Challenge: During a live examination, candidate browsers generate concurrent background traffic: saving code drafts automatically, sending connection heartbeat pulses, and syncing timer countdowns. When an access token expires, multiple parallel refresh attempts trigger replay detection on the identity provider. This invalidates the active session and risks ejecting the candidate from an active exam.

• The Solution: Designed an asynchronous Singleton Promise Queue within the HTTP response interceptor pipeline. When the first authorization failure occurs, the client activates an exclusive lock and initiates a single refresh promise. All subsequent background requests pause in a queue until the new bearer token is established. The stalled requests are then automatically re-dispatched with updated headers, eliminating session disruption and preserving active exam progress.

Challenge 2: UMA Policy Enforcement & Edge-level Token Inspection

• The Challenge: Keycloak UMA provides granular permissions, dynamic resource sets, and default system infrastructure roles within token payloads. Verifying these dynamic privileges entirely on the client introduces security loopholes and visual layout flashing when unauthorized accounts attempt accessing protected examination routes or confidential question banks.

• The Solution: Moved all authorization verification and cryptographic token inspection directly into Next.js Edge Middleware prior to server rendering. Implemented an automated sanitization routine that strips technical infrastructure flags and cross-references an access control block-list. Enforcing authorization at the network edge with sub-5ms latency effectively blocks unauthorized requests before reaching internal application modules.

5. Business Impact & Lessons Learned

Measurable Results & Delivery Value:

• Standardized Testing Delivery: Successfully facilitated large-scale assessment cycles in coordination with an international testing body, ensuring verifiable, tamper-proof workflows.

• Operational Agility: Enabled administrators to configure proctoring, evaluation, and question authoring permissions via the UI, eliminating dependencies on technical deployments.

• Session Resilience: Achieved zero session evictions or draft loss during live examinations through deterministic Edge verification and asynchronous token queue management.

Architectural Takeaways: Delivering an international testing portal requires reconciling real-time browser responsiveness with strict zero-trust security. Combining dynamic resource-based authorization, Edge Middleware validation, and resilient network interceptors creates a scalable, enterprise-grade architecture suitable for large-scale professional assessments.