Case study // 01

AI University Learning Platform

Active learning frontend that turns course content into adaptive AI study sessions, practice exams, and instructor analytics — not passive video watching.

Role · Frontend architecture & product engineering

AI university learning platform cover
15
Feature modules
80+
API routes used
~530
Source files
Oct–Jun
Timeline
01

Overview

University courses often ship as PDFs and videos with weak engagement and little visibility into what students actually understand. This platform helps instructors author structured courses while students study through timed, AI-evaluated sessions with tutoring and progress analytics.

The case study focuses on the presentation and orchestration layer: a modular Next.js client consuming an external REST API for AI evaluation, persistence, and media.

02

Architecture

Thin App Router shell with fat feature modules. Proxy enforces auth/RBAC; services call a centralized fetch client; TanStack Query caches server state; Zustand holds auth and wizard drafts. Next route handlers cover logout and a Range-capable video proxy.

  • Shell / module boundaries for scalable feature ownership
  • Cookie JWT access + refresh with SSR/CSR fetch client
  • Learning session state machine (timers, breaks, distraction)
  • Design system via Radix + CVA + Tailwind
03

Features

Adaptive AI Q&A study sessions
AI tutor chat + remediation loops
Multi-step course authoring with DnD folders/topics
FortuneSheet study-mode workbooks + Excel import
Practice exams with attempts and score cards
Instructor understanding analytics (Recharts)
Multi-role RBAC: student, admin, university representative
Session lifecycle: timers, breaks, distraction logging
Encrypted video proxy for Cloudinary media
LLM usage dashboard for admins
04

Challenges → Solutions

Complex learning session state

Orchestrated evaluate → assist → tutor flow with exit guards and flush semantics

Multi-tenant roles across App Router

Edge proxy allowlists + layout-level role gating

Instructor content ops in spreadsheets

FortuneSheet study-mode authoring with Excel import

Auth refresh storms

Coalesced token refresh in a centralized fetch client

05

Tech stack

Next.jsReactTailwind CSSRadixReact Hook FormZodTanStack QueryZustandFramer Motiondnd-kitFortuneSheetRechartsCloudinary

Honesty note

This case study covers frontend architecture and product engineering against an external API. Backend ownership (schema, LLM gateway, scoring) is separate and not claimed here.

Next