E-Learning Labs
Student and instructor experience for a course platform, on SSR/ISR with resumable lessons.
Role
Senior Next.js / React Developer
Engagement
Full-time at Latitude Technolabs
Client
Latitude Technolabs
Period
2022
The problem
An e-learning product where lesson media, progress and assessment state all had to stay consistent across devices, and where course content pages needed to rank organically without being server-rendered on every request.
My responsibility
Built the student learning experience and instructor authoring flows in Next.js, including the lesson player, progress persistence and assessment UI.
Surfaces shipped
Student app
Course catalogue, lesson player, progress tracking, assessments and certificates.
Instructor app
Course authoring, lesson sequencing, question banks and cohort analytics.
Architecture
How it was structured, and the reasoning behind each boundary.
- 01
SSR for app, ISR for content
Course and lesson marketing pages are statically generated with incremental revalidation so authors can publish without a deploy; authenticated app views are server-rendered per request.
- 02
Progress as a first-class server resource
Lesson position and completion sync to the server debounced, with optimistic local state so a resume never waits on the network.
- 03
Accessible media player
Full keyboard control, announced state changes, captions support and a transcript toggle — a player that fails a keyboard-only user fails the product.
Key challenges
- 01
Resumability across devices
A learner switches from desktop to phone mid-lesson. Position had to be authoritative on the server yet instantly usable offline, which meant reconciling local and remote state without clobbering either.
- 02
Long-form content performance
Lessons with heavy media needed lazy boundaries per chapter so the initial route stayed small and interaction stayed responsive.
Implementation
- 01
Chapter-level lazy loading
Media and interactive blocks load on approach, keeping first-load cost proportional to what's on screen.
- 02
Typed assessment flows
Question, response and grading types are shared with the instructor authoring UI so a malformed question can't be published.
Results
- 01Consistent lesson resumption across devices with no reported progress-loss issues.
- 02Content pages statically served and indexable while the app remained fully dynamic.
- 03Instructors able to publish new lessons without an engineering release.
Technologies
- Next.js
- React
- TypeScript
- Redux Toolkit
- Tailwind CSS
- Node.js
- AWS
Technical highlights
- ISR content pipeline with authenticated SSR app shell
- Debounced progress sync with optimistic local state
- Keyboard-complete accessible media player
Building something similar? I’d like to hear about it.
Start a conversation