Platform

Renewables Connect

A ground-up rebuild of a SharePoint-based learning platform into a four-app system — learner, institution, employer and admin — with a working dashboard, module viewer, progress tracking and assessment engine, built to serve thousands of learners globally.

Next.jsTypeScriptTailwind CSSChart.jsAzure AD B2CAzure

At a glance

Technology

A Turborepo monorepo — four Next.js apps (learner, institution, employer, admin) plus a Fastify API and shared TypeScript packages, all typed end to end. A single @rc/types package defines Learner, Certificate and JobRole once, consumed identically by every app and the API.

Backend & data

A dedicated Fastify + Prisma API over PostgreSQL, containerised with Docker and health-checked, sitting behind the four front-end apps rather than each app hitting its own database directly.

Content

Sanity CMS with Portable Text rendering for course content, so non-developer editors can update modules without a deploy.

Authentication

Microsoft Authentication (MSAL) against Azure AD B2C, with the API independently verifying each request's token via JWKS rather than trusting the front end.

Data visualisation

Chart.js, in a consistent dark "data card" style for progress and completion figures.

Hosting & CI/CD

Each of the four apps deploys to its own Azure Static Web App, with GitHub Actions building and deploying automatically on push to main — Tailwind CSS throughout, mobile-first via a shared design system.

Brief

Where it started.

Renewables Connect deliver professional training for the global renewables industry. Their existing learning platform ran on SharePoint — course content served as static PDFs, no structured progress tracking, no learner accounts that followed a student from one device to another. As the course catalogue expanded, the platform couldn't hold up: editors had no authoring environment beyond file management, and learners had no meaningful experience.

The agreed brief was a complete rebuild on a modern stack, scoped as four connected apps rather than one monolith: a learner-facing platform, an institution dashboard for education partners, an employer app for talent discovery, and an internal admin console — all sharing a common type system and design language, designed to a minimum of 5,000 registered learners globally from day one.

Architecture

How it's built.

The build is a Next.js monorepo: four apps (learner, institution, employer, admin) plus two shared packages — a TypeScript type library used across all four, and a typed API client — so a Learner, a Certificate or a JobRole means the same thing everywhere it's referenced. Learner authentication runs on Microsoft Authentication via Azure AD B2C (MSAL), chosen so the platform can accept both direct email/password sign-ups and “Sign in with Microsoft” for learners with existing accounts. Course content is currently structured TypeScript content files — each sub-module an ordered set of sections and typed content blocks (text, image, video, audio, callout, chart, quiz) — with a Sanity CMS integration scoped for when a non-developer content team needs to publish without a deploy.

The module viewer renders those content blocks against a table-of-contents sidebar with a live reading-progress bar and deep-linkable sections. Chart.js visualisations run throughout the curriculum in a consistent dark “data card” style, and each sub-module ends in a Confirmation of Learning assessment — scored, explained, and gated behind a 70% pass mark. Progress, quiz scores and completion state are tracked per learner and designed to sync through Azure Functions and Azure SQL once that backend layer is deployed, so a learner's place in the course follows them from device to device rather than living only in one browser.

Learner dashboard — programme progress at a glance

The dashboard is the learner's home screen: overall completion, average quiz score, and a breakdown by the three curriculum parts, each with its own progress bar and completion percentage. Career Profile and Programme Overview surface as secondary cards — the former feeds the employer-facing talent pipeline once a learner opts in to be discoverable.

Module viewer — sectioned content with reading progress

Each sub-module is broken into sections listed in a table-of-contents sidebar, with a per-section time estimate and a live progress indicator as the learner scrolls. Content blocks — video, image, callout, chart — render in order from structured data, so the same viewer handles an eleven-section deep-dive or a six-section overview without bespoke templates.

Confirmation of Learning — scored assessment with feedback

Every sub-module ends in a ten-question Confirmation of Learning quiz — four options per question, a pass mark of 70%, and wrong-answer explanations that link straight back to the relevant section for review. It's built end-to-end: questions render, answers score, and results feed back into the dashboard's per-part completion figures.

Part overview — sub-module cards with live status

Each of the three curriculum parts has its own overview page — sub-module cards showing section count, estimated hours, topic tags and live status (available, in progress, completed, coming soon), so a learner or an institution reviewing the programme can see the shape of a part before committing to it.

Sign-in — Microsoft Authentication via Azure AD B2C

Sign-in runs on Azure AD B2C with MSAL handling the token flow client-side — “Continue with Microsoft” for learners with an existing account, or a free account created through the same hosted flow. It satisfied a specific brief requirement: retain Microsoft Authentication from the SharePoint era while opening the platform to any learner globally, not just ones inside a corporate Microsoft tenant.

Building a platform this size?

All fifteen sub-modules of the first course are built, with eleven of the fifteen carrying a live Confirmation of Learning quiz — the module viewer, dashboard, part overview and sign-in screens shown above are working, navigable UI, not mockups. If you need a platform built to scale from day one, with the data model, authentication and content architecture thought through properly, that's the kind of build this is. See learning platforms for the full breakdown.

Start a project →

← Yardley Hastings Garage AI Love You Journal →