SkillTree — Gamified Community Learning-Path Builder
Visual skill-tree editor where anyone can design, fork, and earn XP as they climb interactive roadmaps.
Transform static learning roadmaps into living, interactive, forkable skill trees with measurable progress tracking, gamified XP curves, and infinite open-source contributor surface area.
The Root Challenge
Every developer has used a roadmap—a static image, Notion doc, or roadmap.sh page. None of them are interactive, forkable, or measurable. Learners get lost with no notion of prerequisites, mentors repeat guidance constantly, and progress is invisible with no gamified feedback loop to drive retention.
In Sri Lanka and emerging tech hubs across the Global South, thousands of self-taught developers and undergraduates navigate ambiguous curricula without senior mentorship. Static roadmaps fail to bridge the practical skills required by international remote teams, leaving aspiring contributors overwhelmed without structured, bite-sized progression.
Structural Root Causes:
- Roadmaps are static PNGs or articles that cannot track completed skills or dynamically reveal what to learn next
- Roadmaps lack personalization: a junior and senior receive the exact same DSA guide with zero branch pruning
- Roadmaps are not forkable: learners who disagree with 20% of a guide cannot remix or build upon the other 80%
- Zero gamification: absent XP, streaks, or badges, learners lack the micro-feedback needed to sustain long-term self-study
- Community knowledge is fragmented across personal blogs and Twitter threads instead of an auditable open-source graph
Target Community & Beneficiaries
Learners seeking a structured path from fundamentals to job readiness without getting stuck in tutorial hell.
- Not knowing prerequisites for advanced topics
- Feeling overwhelmed by 40 conflicting guides
- Zero feedback or milestone celebrations
Maintainers and senior developers who guide juniors through open-source tech stacks.
- Rewriting the same learning guidance for every mentee
- No way to measure reach or learner completion rates
- Inability to fork existing roadmaps cleanly
Frontend, full-stack, AI, and docs contributors seeking accessible, rewarding issues with clear PR acceptance criteria.
- Complex monolithic codebases with high setup friction
- Lack of visual payoff for junior contributions
The Proposed Solution & Workflow
SkillTree turns roadmaps into living skill trees: authors design trees on an infinite drag-and-drop canvas (React Flow), learners clone trees and mark nodes complete to earn XP and level up, and the community upvotes, forks, and remixes paths like open-source code.
Operational Model & Governance
Admin-maintained core platform for SWoC S7 with an open MIT license. Contributors tackle 30 pre-scoped issues across Good-First-Issue, Medium, and Advanced tiers. Seed paths (Frontend, DSA, AI/ML, DevOps) guarantee immediate utility upon kickoff.
Citizen Engagement Lifecycle
Key Civic-Tech Innovations
Architecture & Engineering Approach
Built on React 18, Vite, TypeScript, and Tailwind CSS on the client; React Flow (@xyflow/react) for infinite canvas rendering; Zustand and TanStack Query for state; Node.js 20, Express, MongoDB, and Mongoose on the server; and Zod for unified contract validation.
Tree states and user progress persist in browser IndexedDB/LocalStorage for offline browsing and offline node completions, syncing via optimistic mutations when online.
Canvas nodes render with virtualized windowing; SVG edge rendering utilizes hardware-accelerated transforms; initial JavaScript bundle compressed under 140KB via Vite split chunks.
Extensible i18n dictionary system enabling multilingual node titles and curriculum guides in Sinhala, Tamil, and English.
Stateless JWT authentication with bcrypt password hashing; public learner profiles display opt-in badges and XP without exposing personal contact info.
Implementation Milestones
Pre-Season: Monorepo Scaffold & 30-Issue Backlog
Pre-Kickoff · COMPLETEDScaffold client + server monorepo, write docs/API.md, Docker Compose for Mongo, seed 4 sample paths, and publish 30 issues.
Week 1: Foundations & Read-Only Canvas
Week 1 · IN PROGRESSEnd-to-end JWT auth, Path CRUD API, and public read-only path viewer powered by React Flow.
Week 2: The Visual Editor & XP Progress
Week 2 · IN PROGRESSInteractive path editor with drag/connect nodes, position PATCH API, node completion engine, and user profile XP progression.
Week 3: Community Layer & Forking
Week 3 · IN PROGRESSOptimistic voting system, path forking with provenance tracking, domain filters, full-text search, and badge awards.
Week 4: Polish, Production Deploy & AI Stretch
Week 4 · IN PROGRESSDark mode, loading skeletons, OG preview card generation, stretch AI path generation, and deployment on Vercel + Render free tier.
Measurable Success Criteria
Operational Assumptions & Governance Ethics
SkillTree is licensed under MIT and adheres to open-source governance. The project strictly prohibits paywalled learning roadmaps or vendor lock-in. Anti-metric vigilance is enforced: 25 meaningful PRs are prioritized over 60 trivial cosmetic PRs.
- Contributors are familiar with modern React and JavaScript fundamentals common in SWoC
- Docker Compose eliminates local MongoDB installation drop-off for beginner developers
- React Flow (@xyflow/react) library stability and canvas performance
- Vercel and Render free tiers for hosting preview and production builds