LearnTrust is a personalised learning platform with a trust and credibility layer built in. The original product looked the part but didn't behave like one: fixed learning paths, a trust score that never moved, and a dashboard full of placeholder tiles. This project added five features that made the product do what it implied: a curriculum generator, a content summariser, a live trust score, a skills graph, and a coach panel inside each module.
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.
Marcus Webb
Active-Duty Infantry
Monthly subscriber, auto-reorders his bag. Earns recognition, not rewards.
Monthly Subscriber
Auto-Reorder
Merch Buyer
Lena Carr
Veteran & Firefighter
Buys for her crew. Expects double points as a service member — no questions asked.
Veteran Verified
Group Orders
Reserve Roasts
🤖
Tyler Rosch
Civilian Fan
Found BRCC through social. Driven by challenges and levelling up his rank.
Challenge Hunter
New Roasts
Squad Member
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.
