Visual Skill Roadmap Builder

[Ewan-Dkhar]

This PR introduces a fully functional, visual, node-based skill roadmap builder. Built as a submission for DevStakes, this project allows developers to design their learning paths, track progress across different skills, and define prerequisites using an interactive canvas.

The app is built to be strictly offline-first (using localStorage), making it highly accessible, with an optional Supabase integration for cloud syncing and user authentication.

✨ Key Features Implemented

• Interactive Node Canvas: Integrated React Flow to allow users to pan, zoom, drag, and connect skill nodes.
• Smart Prerequisite System: Nodes automatically lock/unlock based on the completion status of their parent dependencies.
• Progress Tracking: Users can mark skills as Pending, In Progress, or Done, with visual updates on the canvas.
• Versatile Link Creation: Added 5 distinct ways to link nodes (drag handles, hover buttons, right-click context menus, toolbar, and sidebar).
• Roadmap Library & Presets: Includes a library to manage saved roadmaps and curated templates to help users get started quickly.
• Import / Export: Fully supports saving and loading roadmaps as .json files.
• Undo / Redo History: Implemented comprehensive history tracking for node and edge modifications.
• Keyboard Shortcuts: Added quick actions (N for new node, E for edit, Ctrl+Z/Y, etc.) for power users.

🛠️ Tech Stack

• Frontend: React 19, Vite 8, Tailwind CSS 4
• Canvas & Animations: React Flow 11, Framer Motion 12
• State Management: Zustand 5
• Backend (Optional): Supabase (Auth + Postgres + RLS)

🧪 How to Test

1. Clone the branch and run npm install.
2. Run npm run dev.
3. Offline Mode Test: The app should work immediately without any environment variables. Create a node, link it, change its status, and refresh to ensure localStorage persistence is working.
4. Cloud Mode Test (Optional): Copy .env.example to .env, add Supabase credentials, and run the provided supabase-schema.sql in your Supabase SQL editor. Test user sign-up and cloud saving.
5. File I/O Test: Export a roadmap to .json and try re-importing it via the Library tab.

🎯 Context / Related Issues

• Event: Submission for DevStakes.
• Resolves initial project setup and core feature requirements.