LearnTrust started as a structured shell: five dashboard tiles, three hardcoded learning paths, and a trust score fixed at 78. The upgrade layered five AI features on top of that foundation, each targeting a specific gap where the product name promised intelligence the UI could not deliver. The result is a live agentic learning platform with a curriculum generator, content summariser, animated trust score engine, skills knowledge graph, and an in-module coach panel.
Year
08.25
Scope
Course Generation, Agent Integration
Timeline
3 weeks
The Audit
The app had five feature tiles and three learning paths, all backed by static mock data. The Trust Score displayed as a fixed 78 that never changed. Three of the five dashboard tiles triggered toast notifications reading "coming soon." The onboarding form collected focus, skill level, and priority, but those values were used for a single downstream effect: changing the label on the Start Learning tile. The gap was total. The product name promised an intelligent, trust-building platform. The existing interface was a visually structured shell with no intelligence inside it.
Ideation: Five Agentic Workflows
Five capabilities were identified, each targeting a specific surface where the current app fell short. An AI Curriculum Generator to replace the generic path recommendations, producing a 5-module sequence with per-module rationale calibrated to the user's onboarding profile. A Content Summariser to fill the stubbed tile, generating structured briefings with key concepts, action items, and a trust-score relevance rating. A live Trust Score Engine to replace the static StatsPanel, decomposing the fixed number into five animated sub-scores. A Skills Knowledge Graph mapping completed modules as connected SVG nodes across cluster regions. And a Module Coach: a collapsible right panel in the learning path view with contextual tips, a quick-check quiz, and a suggested next path.
Julian Vance
Senior ML Engineer
Diagnoses complex agent failures and optimises reasoning loops.
Trace Observability
Prompt Engineering
Latency Optimisation
Elena Rodriguez
Compliance Specialist
Audits autonomous outputs for accuracy and redlines hallucinations.
Redlining Logic
HITL Verification
Domain Alignment
Marta Chen
Head of AI Strategy
Benchmarks models in the Arena to ensure operational reliability.
Model Benchmarking
KPI Monitoring
Token Unit Economics
Architecture: Data-First Separation
All TypeScript interfaces and mock data were written into src/utils/aiData.ts before any component was built. Confidence scores, timestamps, sub-score breakdowns, and skill node positions were established before any UI decision was made. This meant every interface was defined once and consumed everywhere, and replacing mock data with a real API later requires changes in one file, not across twelve components. The AI components live in src/components/AI/, entirely separate from existing dashboard and UI components. The dashboard was refactored from a flat grid into a tabbed layout using shadcn Tabs, with the Skills Graph set as the default view.
Implementation: Three Non-Obvious Decisions
The SkillsGraph required placing 13 nodes across a 760x480 SVG viewBox in five cluster regions. Edges are drawn before nodes so they sit behind the circles. Hover state is tracked in React and drives both edge colour and node glow. The CurriculumGenerator animation uses a staggered setTimeout loop rather than CSS transitions, incrementing a visibleModules counter while each card's opacity and transform are tied to that counter. The ModuleCoach grid uses a conditional className on the LearningPath page: md:grid-cols-3 when the coach is closed, md:grid-cols-4 when open, toggled by a Coach button added to the module content card header.
The Smallest Change with the Widest Reach
A single useEffect in Index.tsx reads window.location.search for ?preview=1. If present, it sets default preferences and marks onboarding complete without touching localStorage. The deployed URL for the portfolio iframe is ascend-system-forge.vercel.app/?preview=1. Every visitor to this case study sees the dashboard with the Skills Graph open by default, rather than the onboarding form. The change is eight lines of code in one file. Without it, every iframe viewer would land on a blank preference form and leave before seeing anything the upgrade built.
Outcome
All five AI features are live at ascend-system-forge.vercel.app. The dashboard opens on the Skills Graph by default, showing completed skill nodes, cluster regions, and a highlighted suggested-next node. The Trust Score Engine counts up from zero on every visit, revealing five sub-scores. The Curriculum Generator produces a full 5-module path with confidence score and per-module rationale in under 1.5 seconds. The Content Summariser history pre-populates with two realistic AI-policy briefings. The data layer is isolated in one file. Swapping mock data for real API calls is a single-file change.
