ApexDev is a full-featured educational portal and Learning Management System (LMS) engineered to empower students and instructors across modern software engineering, AI workflows, and high-income freelancing. Built with Next.js 15, React 19, TypeScript, and Turbopack, the platform features multi-role access control (RBAC), interactive course enrollment pipelines, structured lesson roadmaps, in-browser code editor playgrounds, peer-review cohorts, and real-time student learning progression.
Modern online education requires a high-performance, resilient platform that caters to two fundamentally distinct user personas: Instructors (who author structured syllabi, upload lesson media, manage enrollment rosters, and conduct peer assessments) and Students (who discover curated learning paths, enroll with one click, write code in real time, and track graduation milestones). I architected ApexDev from the ground up to unify these experiences within a single, highly performant Next.js 15 ecosystem.
To ensure strict security and distinct UI workflows between instructors and learners:
Edge middleware validates authentication sessions and role permissions before requests hit serverless route handlers:
// middleware.ts - Edge-Based Role-Based Access Control (RBAC)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const sessionToken = request.cookies.get("apex_session")?.value;
const userRole = request.cookies.get("apex_role")?.value; // "instructor" | "student"
const { pathname } = request.nextUrl;
// Protect Instructor Studio Routes
if (pathname.startsWith("/studio")) {
if (!sessionToken || userRole !== "instructor") {
return NextResponse.redirect(new URL("/login?error=unauthorized_role", request.url));
}
}
// Protect Student Learning Dashboard & Course Rooms
if (pathname.startsWith("/learn") || pathname.startsWith("/dashboard")) {
if (!sessionToken) {
return NextResponse.redirect(new URL("/login?redirect=" + pathname, request.url));
}
}
return NextResponse.next();
}A frictionless enrollment pipeline is crucial for educational conversion. ApexDev enables students to preview course curricula, view prerequisite tech stacks, and enroll with one click. Once enrolled, the platform creates an immutable student learning ledger that records lesson completion percentages, quiz scores, and active streaks.
The enrollment transaction utilizes Next.js Server Actions with optimistic client-side feedback:
Atomic transaction handling guarantees enrollment consistency and prevents concurrent duplicate enrollments:
// src/app/actions/enrollment.ts - Idempotent Course Enrollment Server Action
"use server";
import { revalidatePath } from "next/cache";
export async function enrollStudentInCourse(courseId: string, studentId: string) {
// 1. Verify student eligibility and existing enrollment
const existingEnrollment = await db.enrollment.findUnique({
where: { studentId_courseId: { studentId, courseId } },
});
if (existingEnrollment) {
return { success: true, message: "Already enrolled in this course." };
}
// 2. Atomic enrollment transaction with initial progress zero-state
await db.$transaction([
db.enrollment.create({
data: {
studentId,
courseId,
enrolledAt: new Date(),
progressPercent: 0,
status: "ACTIVE",
},
}),
db.course.update({
where: { id: courseId },
data: { activeLearnersCount: { increment: 1 } },
}),
]);
revalidatePath(`/catalog/${courseId}`);
revalidatePath("/dashboard");
return { success: true };
}Passive video watching produces low retention; developers learn best by writing real code from day one. I engineered an interactive in-browser code editor simulating real-world IDE workflows (syntax highlighting, line numbering, multi-file tabs, run button, and live console output).
| Playground Dimension | Engineering Architecture | Educational Impact |
|---|---|---|
| Syntax Highlighting | Lightweight PrismJS token parser with customizable theme colors | Zero-lag typing experience without heavy Monaco bundle bloat |
| Sandboxed Execution | Isolated Web Worker iframe runner blocking DOM manipulation and cookie access | 100% client-side security against malicious code loops |
| Automated Test Suites | Assertion runners that compare student output against instructor test cases | Instant feedback with actionable error traces and hints |
| Multi-Language Tabs | Dynamic language mode switching (TypeScript, Python, HTML/CSS) | Versatility across full-stack and data engineering tracks |
One of the most transformative elements of ApexDev is its collaborative peer review system ('Ship Faster With Peer Reviews'). When students complete capstone projects, their code is submitted to a blinded cohort queue where fellow students and instructors conduct line-by-line reviews.
To ensure constructive, high-quality code critiques across student cohorts:
The assignment dispatcher fairly balances workload across active students in each cohort:
// src/lib/peerReview.ts - Algorithmic Peer Review Assignment
export async function assignPeerReviews(submissionId: string, cohortId: string) {
// Fetch 2 active peers from the same cohort who haven't reviewed this submission
const candidatePeers = await db.student.findMany({
where: {
cohortId,
submissions: { some: { status: "COMPLETED" } },
},
take: 2,
orderBy: { pendingReviewCount: "asc" },
});
return Promise.all(
candidatePeers.map((peer) =>
db.reviewAssignment.create({
data: {
submissionId,
reviewerId: peer.id,
deadline: new Date(Date.now() + 48 * 60 * 60 * 1000), // 48h deadline
},
})
)
);
}Empowering instructors to create world-class courses without technical friction was a top architectural priority. I engineered the Instructor Studio: a comprehensive authoring environment featuring modular chapter organization, markdown lesson editors, video asset association, and live student analytics.
Reorder modules and lessons with instant database order synchronization using optimistic UI updates.
Built-in MDX editor with live preview, syntax highlighting, and callout blocks.
Direct-to-cloud upload pipeline with chunked transfer and signed authorization tokens.
Instructor dashboards visualizing drop-off rates, average quiz scores, and cohort velocity.
Educational platforms must handle synchronized traffic spikes—such as when a cohort launches or hundreds of students attend a live workshop simultaneously. ApexDev leverages Vercel multi-region serverless auto-scaling and edge caching to ensure zero downtime.
| Infrastructure Dimension | Technical Strategy | Performance Result |
|---|---|---|
| Course Catalog Caching | Static site generation with on-demand ISR (revalidatePath) | Sub-100ms global catalog load times under heavy traffic |
| Video Stream Acceleration | HLS adaptive bitrate chunk delivery via global edge CDN | Zero video buffering even on slow mobile connections |
| Database Connection Pooling | Prisma Accelerate & edge connection poolers | Eliminates serverless cold-start exhaustion during surge hours |
| Global Availability | Multi-region edge deployment with automatic failover | 99.99% uptime for global international learners |
I'm available for full-time roles & freelance projects.
I thrive on crafting dynamic web applications and delivering seamless user experiences.