Back

WebApps Portal — Immersive Learning Suite

Built a gamified portfolio of OSI, cybersecurity, and pitching sims that teachers can clone, theme, and deploy in hours.

Role: Lead full-stack engineerTimeframe: 6-week consolidation sprintStack: Next.js • React • Tailwind • Supabase • n8n • Framer Motion
Next.jsReactTailwindn8nGamificationAnalyticsAccessibilityCMS
WebApps Portal — Immersive Learning Suite
At a glance
  • Problem
    Built a gamified portfolio of OSI, cybersecurity, and pitching sims that teachers can clone, theme, and deploy in hours.
  • Role
    Lead full-stack engineer
  • Timeframe
    6-week consolidation sprint
  • Stack
    Next.js • React • Tailwind • Supabase
  • Focus
    Next.js • React • Tailwind
  • Impact
    Module launch time: 2 days → 4 hrs
Module launch time
2 days → 4 hrs
Avg. session length
+42%
Bug rate
-70%

Problem

Built a gamified portfolio of OSI, cybersecurity, and pitching sims that teachers can clone, theme, and deploy in hours.

Context

S — A vocational program ran separate mini-apps (Cyber Defenders, OSI Adventure, Pitch Studio) with inconsistent branding and zero shared analytics. Instructors spent days duplicating content for each cohort. T — Consolidate the experiences into a single portal with reusable engines, live telemetry, and non-technical authoring tools so instructors can ship new scenarios overnight.

Gamified learning portal built on Next.js + Supabase

Reusable simulation engines let instructors launch modules quickly.

Centralized analytics reveal engagement and drop-off points.

Accessible, themeable learning apps for rapid curriculum rollout

Design tokens and theme packs keep UX consistent across modules.

Automations handle onboarding and badge issuance.

Architecture

  1. Refactored everything into a Next.js monorepo with shared design tokens, layout primitives, and motion choreography that matched the neon portfolio aesthetic.
  2. Built simulation engines (drag-and-drop OSI, scenario cards, pitch timers) as headless React hooks so they can power future modules.
  3. Persisted progress + leaderboards through Supabase, exposing sanitized APIs for instructors to export cohort insights.
  4. Added feature flags + theme packs so instructors spin up new flows per class without cloning code.
  5. Integrated n8n workflows for onboarding, badge issuance, and follow-up emails with scoped API keys stored in Doppler.
  6. Layered analytics using PostHog events + Vercel Web Analytics to surface friction points (drop-off questions, time per puzzle).
  7. Shipped accessibility sweeps: semantic controls, reduced-motion variants, audio transcripts, and color contrast utilities to keep gamification inclusive.

Security / Threat Model

  • Legacy pages mixed vanilla JS and jQuery, making accessibility fixes painful.
  • No centralized auth or persistence, so progress could not travel across modules.
  • Course authors lacked a safe way to tweak copy or scoring logic.
  • n8n automations for onboarding stored secrets in plaintext.

Tradeoffs & Lessons

Gamified education still needs boring fundamentals: design systems, telemetry, and safe automation. By treating each mini-app like a microservice inside a monorepo, we gained velocity without sacrificing whimsy.

Results

Instructors now assemble new learning paths in hours, not days. Learner dwell time rose 42%, completion jumped 28%, and bug reports fell by 70% because modules share the same hardened components. The portal became the flagship asset shown to partner schools when negotiating new curricula.

Stack

Next.jsReactTailwindSupabasen8nFramer Motion

FAQ

How are new modules created fast?

Reusable hooks and theme packs replace per-module rebuilds.

How is engagement measured?

PostHog events and analytics dashboards track learning friction.

What outcomes were achieved?

Module launch time dropped and session length increased.

Back to ProjectsExplore more Case Studies
    WebApps Portal — Immersive Learning Suite — Case Study