Fragmented information
Apprenticeship requirements lived across school pages, training documents, and external resources. Basic answers could be found, but a usable path from current status to next step was missing.
~/projects/panday-case-study
Case Study
Panday
Case study for a 14-week capstone product that turned fragmented apprenticeship information into an interactive roadmap and grounded AI assistant
# Role: Technical Lead # Team: 4 developers, 4 designers # Duration: 14 weeks # Year: 2025
Next.js 15 React 19 Go PostgreSQL pgvector Redis Streams D3.js React Flow Vitest
~/overview
Panday was built for BCIT ConnectHer to help trades apprentices understand current progress, completed requirements, available resources, and next actions without digging through scattered school and government pages.
The case study covers the full arc of the project: problem framing, validation, UX shaping, technical system design, implementation tradeoffs, and delivery quality in a short academic timeline.
~/challenge
High cognitive load
Even when information existed, the structure was hard to interpret. Sequence, prerequisites, and specialization choices were not obvious from static pages and PDFs.
Short delivery window
A 14-week capstone timeline required a product that felt complete enough to demonstrate real value while still making room for research, design iteration, and engineering quality.
~/process
Linear issue history made the project arc much clearer. The product did not move in a clean waterfall from research to design to code. It iterated through roadmap architecture, personalization, grounded AI, trust hardening, and repeated UX correction as new problems became visible.
01
Roadmap foundation and source gathering
The earliest work focused on making the roadmap real before polishing the interface. Linear tickets such as PAN-27, PAN-28, PAN-30, and PAN-31 pushed the team to define the React Flow roadmap view, collect electrician-program source material, and decide how markdown content and embeddings would live in the codebase.
React Flow roadmap Electrician source set Content storage structure
02
Personalization and product framing
Once the graph existed, the next step was making it feel specific to the user instead of generic. PAN-35, PAN-36, PAN-40, and PAN-46 added the public-facing landing experience, onboarding quiz, account-linked default viewport, and authentication so the roadmap could respond to individual progress and context.
Landing page Onboarding quiz Persistent user-specific roadmap
03
Grounded AI and bounded assistance
The assistant matured through a chain of tickets rather than a single feature drop. PAN-32 and PAN-33 established the embedding and retrieval path, while PAN-53, PAN-54, PAN-63, PAN-78, and PAN-80 improved streaming UX, source citations, user context, contextual prompts, and voice input. The result was a more constrained, useful assistant instead of a generic chatbot bolted onto the page.
Embedding pipeline Source-citing chat Context-aware assistant Voice input
04
Usability correction and trust hardening
Real project evolution showed up most clearly in the correction tickets. PAN-48, PAN-50, PAN-52, PAN-56, PAN-66, and PAN-73 point to repeated work on checklist clarity, tutorial guidance, roadmap hierarchy, and information density. In parallel, PAN-42, PAN-43, and PAN-64 focused on sanitization and prompt-injection resistance, showing that usability and safety were being refined at the same time.
Clearer checklist structure Tutorial flow Prompt-injection protection Refined info panels
~/iteration-through-tickets
Oct 14-24
Roadmap architecture takes shape
PAN-27, PAN-28, PAN-30, PAN-32, and PAN-33 establish the roadmap view, source collection, document structure, embedding system, and LlamaIndex integration.
Oct 31-Nov 5
Product becomes personalized
PAN-36, PAN-40, and PAN-46 connect onboarding, authentication, and account-linked roadmap positioning so the experience stops feeling static.
Nov 4-11
Chat moves from novelty to utility
PAN-53, PAN-54, PAN-55, PAN-62, PAN-63, and PAN-64 focus on streaming responses, citations, contextual clarity, user context, and protection against malicious prompts.
Nov 11-21
Roadmap UX gets reworked
PAN-48, PAN-50, PAN-52, PAN-66, PAN-71, and PAN-73 show a clear pattern: the team kept revisiting node clarity, hierarchy, progress displays, and edge-case bugs to reduce confusion.
Nov 17-Dec 4
Demo polish and edge-case cleanup
PAN-77, PAN-78, PAN-80, PAN-83, PAN-84, PAN-85, and PAN-86 add chat history, contextual prompting, voice input, progress fixes, arrow corrections, and account reset flows.
~/technical-deep-dive
Dynamic roadmap rendering
Problem
The roadmap could not rely on fixed node positions because progress paths, node states, and custom additions needed to remain flexible.
Decision
The frontend used React Flow for interaction and D3-assisted layout work to keep graph placement practical as node density increased. The roadmap system also separated content, metadata, and generated graph structure so authoring could stay content-driven.
Impact
The result was a roadmap that could scale to denser graphs without collapsing into visual noise or brittle hand-positioned layouts.
Grounded assistant architecture
Problem
Generic model output would not be credible for apprenticeship guidance, especially when users needed answers tied to official material.
Decision
The chat flow used retrieval over apprenticeship content with pgvector-backed search, source-aware responses, validation, and user-scoped persistence. The assistant was designed to answer from documented material instead of improvising unsupported advice.
Impact
That structure increased trust, improved answer quality, and gave the interface a stronger relationship between roadmap context and conversational guidance.
Performance and delivery quality
Problem
Graph interaction and team velocity both became risks as the codebase expanded and multiple contributors landed changes in parallel.
Decision
Performance bottlenecks in dense graphs were fixed before launch, embedding query caching cut unnecessary API work, Redis-backed buffering protected chat persistence, and CI coverage reduced regression risk across chat, graph logic, validation, and sanitization.
Impact
The product stayed responsive during internal testing and the team could keep shipping without destabilizing late-stage demos.
~/what-shipped
- Interactive roadmap with personalized progress, milestone visibility, checklist nodes, and guided detail panels.
- Profile onboarding and progress tracking so roadmap state could adapt to current level and specialization.
- Grounded assistant with retrieval, citations, saved threads, and FAQ generation from chat activity.
- Custom node workflow that allowed AI-assisted suggestions without handing direct write authority to the model layer.
- Voice input path with browser speech support and fallback transcription behavior for degraded conditions.
~/outcomes
~80% reduction in embedding API calls through TTL-based query caching.
Responsive graph interaction retained during internal testing with 100+ node scenarios after performance fixes.
Production-oriented quality signals added across rate limiting, validation, logging, health checks, and test coverage.