The Democratization of Mastery. SkilleTreeOSS is an open-source, gamified learning platform. We map out complex skills (like "Full-Stack Developer," "ML Engineer," or "Photography") into beautiful, interactive RPG-style skill trees. Click a node, find the best free resource on the internet, and level up your life.
Most learning sites are either hidden behind expensive paywalls or are overwhelming, messy lists of links. Self-learners often face a "curriculum gap" — they don't know what they should learn next.
SkilleTreeOSS solves this by turning education into a visual progression system.
- Zero Overwhelm: See exactly where you are and what to tackle next.
- Community Curated: Nodes link to the single highest-voted free resource for that specific sub-skill.
- Gamified Progression: Watch your tree light up as you complete nodes, unlocking advanced branches.
- In-app editor at
/builder— no JSON or GitHub knowledge required /builder/[treeId]— load and edit any existing published tree- Double-click the canvas (or press
N) to add nodes; drag between node handles to connect them - Right-click anywhere for a context menu; rectangular drag to multi-select nodes
- Full keyboard shortcuts —
VSelect,HPan,Nadd at cursor,Ctrl+Aselect all,Ctrl+Ltoggle layout direction,Deleteremove; press?for the built-in guide modal - Edit each node inline: label, description, zone, icon (searchable Material Symbols + emoji picker), and learning resources
- Liquid bubble animation — tool and tab switches animate with a spring-physics bubble (Framer Motion
layoutIdshared layout) - Dagre auto-layout with LR ↔ TB direction toggle; smart node placement prevents stacking
- Preview mode — switch between Build and Preview to see the tree exactly as learners will
- Auto-save drafts to
localStorage; Supabase persistence for signed-in users - Submit as PR — anonymously (bot token) or from your own GitHub fork
- 4 visual themes — World Map, RPG, Terminal, Neural
- Dagre auto-layout with toggleable LR ↔ TB direction
- Node sidebar with resources, prerequisite timeline, resource voting, and resource suggestions
- Animated node state transitions (locked → available → completed)
- Right-click context menu; center-on-node with smooth
setViewportanimation
- Supabase auth (email/password, OAuth)
- Progress synced to DB in real time;
localStoragefallback - XP & level system — 50 XP per completed node, 8 levels (Apprentice → Legend)
- Navbar UserMenu with SVG level-ring progress indicator and Lv badge
- Reset-progress button with confirmation modal
- Full-text search across titles, descriptions, categories, node labels, zones, and resource titles
- Filter by category (dynamically derived from tree files) and difficulty
- Sort by: A→Z, Most Popular (enrolled), Top Rated, Easiest First, Shortest First
- "Continue your journey" strip for in-progress trees
- Pagination (12 per page)
- 1–5 star rating modal on the canvas toolbar
- Enrollment auto-detected from completed nodes (no separate join flow)
- Per-tree enrolled counts and average ratings shown in Explore and landing page
- Landing page stats (Active Learners, Skill Trees, Nodes Unlocked) served from a
site_statssingleton kept current by a Postgres trigger — O(1) read, no full table scans - Featured trees configurable in
lib/featured-trees.tswith real data from tree JSON + DB
- Per-resource upvote / downvote on every resource card
- "Suggest a better resource" inline form on every node — stores explanation, optional URL, and title in a
resource_suggestionstable with a status workflow (pending → reviewed → accepted/rejected)
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| Canvas Engine | ReactFlow (@xyflow/react) + Dagre |
| State | Zustand — lib/store.ts (viewer) · lib/builder-store.ts (builder) |
| Animations | Framer Motion (shared-layout layoutId, spring physics, AnimatePresence) |
| Styling | Tailwind CSS v4 |
| Auth + DB | Supabase (Postgres, RLS, SSR client) |
Run these in order from supabase/migrations/ via the Supabase SQL editor:
| File | Table | Purpose |
|---|---|---|
20240101_tree_ratings.sql |
tree_ratings |
1–5 star ratings per user per tree |
20240102_site_stats.sql |
site_stats |
Singleton counter + Postgres trigger for landing-page stats |
20240103_resource_suggestions.sql |
resource_suggestions |
Community resource feedback queue |
user_progress(existing) — storescompleted_node_ids text[]per user per tree. Enrollment is implicit: any row with ≥1 completed node counts as enrolled.
- Clone the repository
git clone https://github.com/nasimstg/SkillTreeOSS.git
cd SkillTreeOSS- Install dependencies
npm install- Set up environment variables
cp .env.local.example .env.local
# Fill in NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY-
Run database migrations — paste each file from
supabase/migrations/into the Supabase SQL editor and execute in order. -
Run the dev server
npm run devOpen http://localhost:3000 in your browser. Go to http://localhost:3000/builder to try the visual tree builder.
The easiest way is the in-app builder at /builder — no coding required. See the Builder section of CONTRIBUTING.md for a step-by-step walkthrough.
For direct JSON editing, all skill trees live in data/trees/ as JSON files. See CONTRIBUTING.md for the full schema, validation rules, and PR process.
To change the featured trees on the landing page, edit lib/featured-trees.ts:
export const FEATURED_TREE_IDS = ['full-stack-dev', 'ml-ai-engineer', 'photography-mastery']We welcome new trees, bug fixes, UI improvements, and backend integrations. Check the Issues tab for good first issue and help wanted labels.
See CONTRIBUTING.md for setup and developer guidelines.
MIT — see LICENCE.md. Education should be free, and so is this code.
