Stanford BIOE 230 Interactive - Learning Platform

THE PROBLEM

How do you turn lectures into experiences?

A professor hands you 15 dense lecture PDFs on probability and statistics for bioengineering. The material is rigorous -- proofs, theorems, formal notation. Students can read it, but they can't feel it. They can't drag a Venn diagram and watch the probability change. They can't adjust the mean of a bell curve and see the distribution shift. They can't click to place data points and watch a regression line snap into place.

The challenge wasn't building one visualization. It was building a system that transforms any lecture into an interactive experience -- 180 of them, each with its own novel module, all organized into a platform that a professor can control and students can use every day.

THE SOLUTION

180 interactive modules. Every concept, hands-on.

I built an interactive platform where every concept in the course has its own novel visualization. Students toggle between "Everyone" mode (plain-language explanations) and "Stanford" mode (full academic rigor with proofs). A contextual tutor answers questions as students learn. A spaced-repetition system tracks what they've mastered.

FIVE OF 180

Every concept comes alive differently

The platform has 180 interactive modules. Here are five that show the range.

Brain-Computer Interface Demo Ch. 14: Eigenvectors & PCA

Simulate how EEG electrodes capture brain signals and use PCA to decode motor intent from noisy neural data.

Simulation

Gene Expression PCA Ch. 14: Eigenvectors & PCA

Load a gene expression dataset, run principal component analysis, and discover which genes drive the most variance.

Explorer

Clinical Trial Designer Ch. 10: Group Hypothesis Testing

Set sample size, effect size, and significance level. Watch statistical power change. Design a trial that would actually get funded.

Builder

Classification Boundary Painter Ch. 13: Logistic Regression

Paint decision boundaries on a 2D scatter plot. See accuracy, precision, and recall update with every brush stroke.

Game

Disease Prediction Game Ch. 02: Conditional Probability

A patient tests positive. What are the real odds they're sick? Experience the false positive paradox -- the most counterintuitive result in statistics.

Game

TRY IT YOURSELF

Three modules from the actual platform

These are simplified versions of modules from the real platform. The live version has 180 of them.

Click an operation to highlight the corresponding region on the Venn diagram.

μ 0.0

σ 1.0

P(μ − σ < X < μ + σ) = 68.27%

Click on the grid to add data points. The regression line updates in real-time.

Add at least 2 points to compute the regression line.

THE PLATFORM

See what the students use

BIOE 230 dashboard showing 15 lectures, progress stats, Everyone/Stanford mode toggle, and formula sheet

15 lectures, 180 concepts, Everyone/Stanford mode toggle, formula sheet, search

Lecture page with 12 concept cards showing interactive module names

12 concepts per lecture with named interactive modules -- Set Operations Visualizer, Venn Diagram Builder, Probability Playground

Concept page showing interactive Venn diagram with drag controls and tutor button

Every concept has a novel interactive module. This one: drag Venn diagram circles to see how set operations change. Tutor button in the corner for contextual help.

Master formula sheet with LaTeX rendering, search, and star favorites

Master formula sheet with LaTeX rendering, search, star favorites, print. Covers all 15 lectures.

PLATFORM SCALE

What's inside

0

Lines of Code

0

Files

0

Lectures

0

Concepts

0

Interactive Modules

0

Practice Problems

0

Quiz Questions

0

Automated Tests

THE ARCHITECTURE

How 15 PDFs become 180 interactive experiences

Professor's Lecture PDFs (15)

Source material: proofs, theorems, notation, examples

↓

Content Extraction & Structuring

Each PDF → 12 concepts. Each concept → MDX with frontmatter, formulas, explanations in both modes.

↓

MDX Content Layer (180 concept pages)

180 concept pages. KaTeX for math. Dynamic imports for interactive modules.

↓ Everyone Mode / Stanford Mode toggle

Interactive Module Registry (180 components)

180 React components. D3.js visualizations. Each mapped to a concept via registry.

↓

Student App

Next.js 16 App Router. Server Components. Responsive. PWA.

Admin Panel

Lecture visibility. Content editing. Analytics dashboard.

Formula Sheet

Searchable across all 15 lectures. Star favorites. Print.

Tutor System

Context-aware. Knows the current concept, formulas, and difficulty level.

↓

Vercel Deployment (PWA)

Progressive Web App. Offline support. Instant deploys.

HOW IT WORKS

Built for how students actually learn

Dual Mode

One toggle switches the entire platform between accessible explanations and full academic rigor with proofs.

Contextual Tutor

Built-in tutor that knows exactly which concept the student is viewing. Answers at the appropriate difficulty level.

180 Visualizations

Every concept has a novel interactive module. Not animations -- actual tools students manipulate.

960 Practice Problems

Categorized by difficulty with spaced repetition tracking.

PWA

Works offline on any device. Students use it during lectures.

Professor Controls

Admin panel for content editing, lecture visibility, and analytics.

Formula Reference

Searchable LaTeX formula sheet across all 15 lectures.

100K+ Lines

Production TypeScript. 850 files. 116 automated tests. Zero errors.

WHAT MADE IT HARD

Turning lectures into software at scale

01

180 interactive modules without killing page load

Each concept page has a unique D3.js-powered visualization -- from Venn diagrams to 3D Gaussian surfaces to brain-computer interface simulations. Loading 180 heavy components upfront would make the app unusable. Solution: dynamic imports with next/dynamic and a module registry that loads each visualization only when the student navigates to that concept. The registry maps concept slugs to lazy-loaded components, keeping initial bundle size under 200KB.

02

Dual-mode content from a single source

Every concept page has two versions: "Everyone" mode with plain-language analogies and simplified math, and "Stanford" mode with formal proofs and academic notation. Both must render from the same MDX source file -- not two separate files that could drift out of sync. Solution: conditional rendering blocks in MDX with a mode-aware provider. The toggle switches instantly because both modes are pre-rendered; only the visible blocks change.

03

Making it feel like a product, not a homework site

The professor needed students to actually want to use it. That meant PWA support for offline access during lectures, spaced repetition for practice problems, a searchable formula sheet with LaTeX rendering, keyboard shortcuts for power users, and an admin panel so the professor could control exactly which lectures were visible each week. Every feature had to work on mobile -- students use phones during class.

TECH STACK

What it runs on

Framework

Next.js 16 React 19 TypeScript (strict)

Styling

Tailwind CSS shadcn/ui CSS Modules

AI

Vercel AI SDK Google Gemini 2.5 Flash

Visualization

D3.js KaTeX Custom SVG

Auth

Cookie-based sessions bcrypt JWT

Testing

Vitest 116 tests

Deployment

Vercel PWA

Built with: Claude Code + Vercel AI SDK + Gemini — read more about my AI engineering stack →

THE ADOPTION

Stanford uses it to teach

Professor Todd P. Coleman adopted the platform for BIOE 230 (Probability and Statistics for Bioengineering) in Spring 2026. Students use it during lectures to follow along with interactive visualizations, for homework to practice with 960 problems, and for exam preparation with the searchable formula sheet.

A background in molecular biology and neuroscience research informed the platform's approach to scientific content - understanding how students actually process dense quantitative material. The system was designed from the start to be flexible -- it can accommodate any lecture-based course, not just probability and statistics.

The platform was built to solve one professor's problem. The architecture solves any professor's.

BIOE 230 Interactive