Skip to main content
E-Learning PlatformFull-Stack Case Study
Shipped Production System · Corporate L&D

A Full-Stack E-Learning Platform

An end-to-end, cross-platform product — Flutter, React, TypeScript & REST, built to run on any HTML5-supported screen.

Explore the Case StudyTry a Live Lesson

Delivered end-to-endCross-platformReal-time sync

learn.enterprise.io/modules/sec-204
React + TypeScript
MODULE 04 · LIVE

API Security & Session Hygiene

450 pts
3 of 3 Interactions Verified80%
JWT Bearer + Scoped Refresh
Cohort Poll · 78% Multi-Device+50 pts
Unlocked Badge
Security Sentinel
● Synced 3/3 devices
09:41Tablet · 768px
API Security & Session Hygiene450 pts
Security Sentinel80%
9:41Flutter
MOD 04450 pts

Security Sentinel

Synced live

01 · Product Overview

What I Built

One shared product experience across native mobile and modern web — keeping corporate learners synchronized on every screen.

I architected and shipped a cross-platform corporate e-learning system built for Learning & Development teams rolling out high-engagement training across distributed organizations. Rather than siloing employees inside static desktop portals, I delivered a Flutter/Dart mobile client and a React/TypeScript web application backed by shared REST services—so every question answered, poll voted on, point earned, and badge unlocked synchronizes in real time across any HTML5-supported screen.

Flutter / Dart

Cross-platform mobile client

Native-compiled Flutter and Dart mobile application delivering 60fps lesson flows and offline-resilient progress capture on iOS and Android.

React + TypeScript

Web-facing interface

Strictly typed React and TypeScript web client engineered to run reliably across any modern HTML5-supported browser and workstation.

Questions · Polls · Clicks

Interactive layers

Composable interaction primitives—knowledge checks, live cohort polls, and spatial hotspot exercises—embedded directly inside lesson sequences.

Real-Time State

Gamification sync

Deterministic state synchronization keeping learner points, completion streaks, and earned badges identical across phones, tablets, and desktops.

Content · Auth · Reporting

REST API integrations

Unified REST service contracts connecting Flutter and React clients to modular content delivery, JWT authentication, and L&D reporting.

Events → Backend

Notifications, announcements & usage analytics

In-app corporate announcements paired with structured frontend usage events that stream directly into backend reporting pipelines.

Want to inspect the shared widget contracts, state synchronization ledger, and REST repositories?

02 · Interactive Learner Experience

Live Lesson — Try the Shipped Interaction Model

Step through a real corporate training sequence featuring a multiple-choice check, a live cohort poll, and a click hotspot audit. Toggle Preview on Mobile to interact with both clients side-by-side and watch points and badges stay synchronized in real time.

learn.enterprise.io/modules/sec-204
React + TypeScript · Desktop
L&D MODULE 04 · React Web

Enterprise API Security & Cross-Device Session Hygiene

0 pts
No badge yet
Engineering & Product Compliance·90 sec interactive module

Interactive Security & Sync Walkthrough

Experience the three core interaction layers delivered across our Flutter and React clients: a verified knowledge check, a live cohort poll, and a spatial hotspot inspection.

1. Question (+50)
2. Cohort Poll (+50)
3. Hotspot (+50)

The interaction model the platform ships — questions, polls, and clicks, synced across screens.

03 · System Architecture & Stack

Two Client Runtimes, One Unified REST Backbone

Flutter and React consume identical REST schemas for content manifests, JWT authentication, and progress synchronization—so user data flows seamlessly across every device and backend reporting service.

Client Runtimes (Shared Design Language)

Integration & Sync Layer

Unified learner identity, points & badges across Flutter ↔ React ↔ Backend

Backend Services

Selected Node:Shared REST API Layer
  • Single schema authority serving mobile and web clients
  • Idempotent gamification ledger preventing duplicate point awards
  • Tenant-isolated JWT bearer middleware
POST /api/v1/events/ingest → { surface: 'web_html5', event: 'badge_earned' }
FlutterDartReactTypeScriptJavaScriptRESTDockerGitLabAgile/Scrum

Modular, reusable widget and component architecture shared across platforms — one design language, two runtimes.

04 · Cross-Platform, Responsive UX

Adaptive Layouts Built for Every Screen Employees Use

Corporate training happens on commuter trains, conference-room tablets, and dual-monitor engineering desks. I designed shared spacing tokens, fluid container grids, and unified pointer/touch targets so every lesson scales gracefully without losing context or visual polish.

Responsive across 375px, 768px, 1440px+ — same components, same state, same experience.
Flutter Mobile & Mobile HTML5375px

Thumb-zone ergonomics for micro-learning on the move

Single-column card stack with sticky bottom action bar, 48px minimum touch targets, and condensed gamification pill in the top header.

  • Full-width choice cards tuned for one-handed tap accuracy
  • Compact persistent header surfacing live points & active badge
  • Swipe-friendly progression with instant tactile feedback
9:41375px · Mobile
MODULE 04 · LIVE

API Security & Session Hygiene

450 pts
Interactive Cohort Poll80% Complete

Primary L&D training workflow across devices:

Mobile + Desktop Handoff44%
Desktop Browser Only27%
Security SentinelSynced

One vision — run on any HTML5-supported screen.

05 · Notifications, Analytics & Communication

Corporate Announcements & Telemetry Connected End-to-End

Every frontend interaction across Flutter and React—from lesson_started to poll_voted and badge_earned—streams into backend reporting services that power L&D dashboards and trigger targeted in-app notifications.

In-App Inbox2 new

Corporate announcements & synced alerts

Announcements deliver identically to the Flutter notification tray and React web inbox via REST feed polling and push fan-out.

L&D Reporting & Event Telemetry

7-day rolling ingestion across Flutter mobile & HTML5 web

lesson_startedpoll_votedbadge_earned

Daily Interaction Event Velocity

3,505 lessons started

Events by Client Runtime Surface

Balanced mobile & desktop adoption

06 · Engineering Practices — Quality & Process

Shipped with Sustainable Engineering Discipline

Keeping a Flutter mobile app, a React web client, and shared REST services aligned over successive releases required strict contract hygiene, containerized environments, and automated quality gates.

Source & Review Hygiene

Git / GitLab workflows

Short-lived feature branches, scoped merge requests, mandatory peer reviews, and protected release tags keeping mobile and web releases synchronized.

Unit · Widget · Integration

Automated testing

Automated unit, Flutter widget, and React component suites paired with REST contract verification to catch regressions before merge.

ADRs & API Contracts

Technical documentation

Versioned OpenAPI specifications, architecture decision records, and cross-runtime component guides keeping frontend and backend contracts aligned.

Predictable Delivery

Agile / Scrum

Two-week sprint cadence with structured backlog refinement, stakeholder reviews with L&D leads, and continuous retrospective improvements.

Reproducible Environments

Docker

Containerized web, API, and test-runner environments eliminating machine-to-machine drift across local workstations and GitLab CI pipelines.

Typed & Modular

Code maintainability

Strict Dart and TypeScript compiler checks, decoupled domain state modules, and enforced lint rules engineered for long-term team velocity.

07 · Structural Outcomes & Scope

Architectural Parity Delivered Across Every Surface

Measured by production scope: unified cross-platform parity, reusable interactive lesson primitives, and a single shared REST backbone serving corporate learners in real time.

0 Screens
Form-Factor Coverage

Phones (375px), tablets (768px), and desktops (1440px+) unified under the run-on-any-HTML5-screen vision.

0%
Cross-Runtime State Parity

Learner progress, points, and badges synchronized across Flutter mobile, React web, and REST services.

0 Layers
Interactive Lesson Primitives

Reusable multiple-choice questions, live cohort polls, and spatial hotspot interactions shipped across runtimes.

0 Domains
Unified REST Service Integration

Content management, authentication, notifications, and usage analytics connected through one shared API contract.