NovaEdge Academy
A sixty-page learning platform that delivers courses
Overview
NovaEdge Academy is the largest surface area I have designed and built end to end: student dashboards, instructor views, course players, progress state and a community layer, past sixty pages in total.
At that size the hard problem stops being any individual screen and becomes consistency. Sixty pages designed one at a time turn into sixty dialects. The work was building a system strict enough that a new page composes itself out of decisions already made.
- Role
- Lead engineer and designer: design system, architecture, build.
- Year
- 2026
- Stack
- Next.js 16ReactTypeScriptNode.jsMongoDBTailwind CSSFramer Motion
Engineering
The decisions that mattered.
- 01
Progress state that survives interruption
Lesson position, completion and quiz state are written server-side on a debounce, so closing a tab halfway through a lesson costs nothing.
- 02
Route-level access control
Enrolment checks live in layouts instead of being repeated per page, so a new course route inherits the right gate by default rather than by someone remembering.
- 03
Sixty pages, a handful of layouts
Nested layouts and a small set of composable section primitives mean most new pages are content plus configuration rather than new structure.
Design decisions
Why it looks and behaves the way it does.
I designed this as well as built it. These are the interface calls I made and the reasoning behind each one.
The design system shipped first
Before any page existed I fixed the type scale, spacing steps, surface treatments and component states. On a sixty-page product, that constraint is the only thing keeping page fifty in the same language as page one.
The course player hides the interface
While a lesson plays, navigation fades back to almost nothing and returns on intent. A learning surface should get out of the way. A dashboard should stay put.
Progress reads as a position
"Lesson 4 of 12" tells a learner where they are standing. "33% complete" gives them a number to interpret. The first one leads.
Motion is reserved for state change
Animation marks completion, unlocking and navigation, which are moments that carry meaning. Decorative motion on a platform people sit in for hours turns into noise within a week.
Outcomes
What shipped.
- 60+ pages held to one design system
- Course progress durable across sessions and devices
- Access rules enforced in the layout tree rather than per page