SkillTreeOSS
Open-source, gamified learning platform — RPG-style skill trees you can build, share, and level up through, with 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 canvas with Dagre 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-renders 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 with an AFTER STATEMENT trigger for O(1) landing stats, plus a resource-suggestion workflow 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
- Gamified XP (50 per node) across eight levels (Apprentice → Legend), 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
30+ curated trees with prerequisite graphs; an upvote/suggest workflow (pending → reviewed → accepted) feeds continuous, crowd-sourced improvement.
Impact
30+
Curated skill trees across programming, design, and more
4
Canvas themes (RPG, World Map, Terminal, Neural)
8
XP levels, Apprentice → Legend
$0
Paywall — every linked resource is free