Learning Trees
2025Collaborative
Next.jsTypeScriptCanvas APIPostgreSQLPrismaTailwind CSS
Interactive skill-tree learning platform — visualize and unlock skills through a canvas-based tree of nodes, with progression animations, prerequisite logic, and mobile support.
Learning Trees is a tool for structured self-directed learning. Skills are laid out as nodes in an inverted tree; completing a prerequisite lights up the connections and unlocks the next layer.
The renderer is built on HTML5 Canvas for smooth animation and fine control over the node layout — including an anti-overlap algorithm that automatically spaces nodes at narrow screen widths. Unlock events trigger a confetti explosion as a small reward. Data is stored in PostgreSQL via Prisma, with NextAuth handling authentication.