SkillTreeOSS
Open-source, gamified learning platform with RPG-style skill trees you can build, share, and level up through, plus community-curated resources.
The problem
Self-taught learners hit a curriculum gap: they don't know what to learn next and drown in disconnected links. roadmap.sh helps but is rigid. SkillTreeOSS turns learning into an RPG-style visual progression: prerequisite-aware nodes, each linked to a top free resource, with real-time progress and community curation.
Try a skill tree
A 7-node slice of the live frontend-dev tree. Complete an unlocked node to earn XP and unlock the next.
- 1
Click an unlocked node to complete it and unlock the next.
Architecture
- ReactFlow (@xyflow/react) canvas with a Dagre Sugiyama auto-layout that respects per-theme node dimensions and spacing, so trees stay readable at any size
- Four visual themes (RPG, World Map, Terminal, Neural), each re-rendering edge styling (quest paths, roads, circuits, synapses), not just colours
- Zustand stores split between the viewer (progress, XP, selection) and the builder (draft persistence, multi-select, keyboard shortcuts)
- Supabase Postgres: a site_stats singleton kept current by an AFTER STATEMENT trigger for O(1) landing stats, plus tree ratings, a resource-suggestion workflow (pending → reviewed → accepted/rejected), and text[] progress arrays
- Builder: double-click to add nodes, drag handles to connect, right-click menu, toggle layout direction, localStorage autosave with Supabase sync when signed in
- Two community paths: the Supabase suggestion/upvote workflow, plus a GitHub contribution pipeline (OAuth + Octokit) that commits a submitted tree straight to the repo for review
- Gamified XP (50 per node) across eight levels (Apprentice → Grandmaster), persisted locally and synced to Supabase
Highlights
Four canvas themes with real styling
World Map, RPG, Terminal, and Neural each restyle node shape, edge routing, and animation: complete chains glow green, in-progress blue, locked grey.
Smart, theme-aware auto-layout
Dagre lays out trees using per-theme dimensions and spacing rules, preventing overlap and keeping flow direction legible regardless of complexity.
Community curation at scale
29 curated trees with prerequisite graphs; contributors can suggest resources (a pending → reviewed → accepted workflow) or submit whole trees through a GitHub-backed pipeline that commits them to the repo.
Impact
29
Curated skill trees across programming, design, and more
4
Canvas themes (RPG, World Map, Terminal, Neural)
8
XP levels, Apprentice → Grandmaster
$0
Paywall: every linked resource is free