CASE STUDY · FULL STACK
Online Learning Platform
A project-based course platform with a video player, progress streaks, live sessions, certificates and Stripe-powered enrollment.
- ROLE
- Full-stack lead
- TIMELINE
- 14 weeks
- TEAM
- 2 people
- PLATFORM
- Web, responsive
PRODUCT IDENTITY
lumen
Learn the skills that light up your career.
01 · OVERVIEW
Project overview
DEVELOPMENT TIME
14 weeks
Beta cohort to public launch
TEAM SIZE
2 people
Me plus an instructional designer
KEY ACHIEVEMENT
80k learners
With a 71% course completion rate
THE PROBLEM
Online courses have notoriously low completion rates. Learners watched a few videos, lost momentum, and never built anything they could show an employer.
THE APPROACH
Lumen structures every course around a real project, tracks progress with daily streaks and checkpoints, and adds live critique sessions so learners finish with work worth sharing.
71%
course completion vs. ~15% industry average
80k
learners in the first year
4.8 / 5
average course rating
02 · FEATURES
What it does
Course player
Chaptered video with notes, transcripts and playback speed.
Progress & streaks
Daily streaks, checkpoints and a visible path to finish.
Certificates
Shareable certificates tied to the project a learner built.
Live sessions
Scheduled critiques and Q&A with reminders.
Stripe enrollment
One-time purchases, bundles and team seats.
Instructor studio
Upload lessons, build quizzes and review submissions.
03 · PROCESS
How it was built
WEEK 1–2
Discover
Surveyed 300 learners about why they dropped courses.
- Survey results
- Completion model
WEEK 3–4
Design
Course page, player, progress and checkout flows.
- Figma prototype
- Design system
WEEK 5–12
Build
Next.js app, tRPC API, video pipeline, payments and instructor studio.
- Web app
- Instructor studio
WEEK 13–14
Ship
Beta cohort of 500 learners, then public launch with three courses.
- Public launch
- Lighthouse 98
04 · TECH STACK
Built with
FRONTEND
- Next.js
- React
- Tailwind CSS
BACKEND
- tRPC
- Prisma
- PostgreSQL
SERVICES
- Stripe
- Mux video
- Resend
INFRASTRUCTURE
- Vercel
- Upstash Redis
- Sentry
ARCHITECTURE
Lumen web app
Next.js App Router
tRPC API
Courses, progress, billing
PostgreSQL
Users, courses
Mux
Video + captions
Stripe
Payments, seats
05 · LEARNINGS
Challenges & learnings
Video at scale
CHALLENGE
Self-hosted video buffered badly for learners on slow connections.
OUTCOME
Moving to Mux adaptive streaming cut start time to under a second.
Keeping learners going
CHALLENGE
Most drop-off happened between lessons three and five.
OUTCOME
Streak reminders and a mid-course checkpoint project lifted completion to 71%.
Interested in this project?
Happy to walk through the code, the decisions behind it, or how something similar could work for your team.