Cognito Education
A B2C LMS providing complex course materials to 100,000+ students per month, 93 million lessons delivered and counting.
Overview
Cognito Education is a large-scale B2C learning management system serving over 100,000 active students per month. The platform delivers interactive course content across a wide range of GCSE and A-Level subjects. With 93 million lessons delivered to date, the platform is scaling to accomodate an international user base.
The Challenge
The platform needed to scale to meet rapidly growing student demand while maintaining a fast, responsive experience across devices. The existing codebase had accumulated massive technical debt and the component architecture needed modernising to support the pace of feature development the business required.
My Role
As the primary front-end developer, I was responsible for the front-end architecture, component design system, and GraphQL API integration. I worked closely with the development lead, and product designer to translate complex educational requirements into intuitive UI patterns. A legacy front-end based on Material UI was no longer sufficient for our use case, so we opted for a headless approach.
Technical Approach
The front end is built with React and TypeScript, backed by a GraphQL API. I established a component-driven architecture using a custom design system built in SCSS, ensuring visual consistency and reusability across the product.
Key technical decisions included:
- Component library — A shared set of primitives (buttons, inputs, modals, progress indicators) used across the entire app, these were either coded from scratch or Radix Primitives were used for more complex interactions.
- Styling - We opted to use SCSS for our styling solution, we found with the sheer size of the codebase, having a custom design system that synced to Figma allowed us to be flexbile whilst also having the freedom to define our own design tokens.
- GraphQL layer — Apollo Client with fragment-based data fetching to minimise over-fetching across complex lesson data structures, sophisticated caching was used where appropriate to ensure complex progress data was kept up to date whilst avoifing overfetching of data.
- Performance — Code splitting by route and lazy-loading of heavy lesson components kept initial load times low even on slower connections.
- Accessibility — WCAG 2.1 AA compliance was a hard requirement, we manually tested everything to fully ensure that users with any requirements could access our platform. We also kept accessibility in mind with unit testing, to ensure that new components met our required standards.
Outcome
The platform now reliably serves over 100,000 students per month with strong uptime and consistent performance. The modernised component architecture reduced time-to-ship for new features significantly, enabling the product team to iterate quickly in response to student and teacher feedback. Student feedback was positive, and a much cleaner codebase has allowed us to move faster and ship new features at a fraction of the time.
The rewrite also allowed us to fully take advantage of AI tooling such as Cursor and Claude Code, the cleaner codebase proved much easier for these tools to digest and subsequently assist us in building out new features rapidly.