A web application that generates interactive roadmaps in the style of roadmap.sh.

• Visual roadmap creation with nodes and connections
• Interactive drag-and-drop interface
• roadmap.sh-inspired styling
• Export functionality
• Responsive design

├── backend/
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React app
│   │   ├── RoadmapCanvas.tsx # Canvas for roadmap editing
│   │   ├── NodeEditor.tsx   # Node editing interface
│   │   └── Toolbar.tsx      # Toolbar with controls
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

1. Open the application in your browser
2. Use the toolbar to add different types of nodes:
   • 📚 Topic: Main subject areas (blue)
   • 🛠️ Skill: Specific skills to learn (cyan)
   • 🎯 Milestone: Important checkpoints (green)
   • ⭐ Optional: Bonus content (dashed border)
3. Drag nodes to reposition them on the canvas
4. Double-click nodes to edit their title, description, type, and status
5. Shift+click between nodes to create connections
6. Click nodes to select and change their status in the toolbar
7. Export your roadmap as JSON when complete

• Visual Design: Mimics the clean, professional look of roadmap.sh
• Interactive Canvas: Drag-and-drop interface with grid background
• Node Types: Different visual styles for topics, skills, milestones, and optional content
• Status Tracking: Mark items as not-started, in-progress, or completed with visual indicators
• Connections: Create curved connecting lines between related nodes
• Export: Save your roadmap as JSON for sharing or backup
• Responsive: Works on desktop and mobile devices

• Shift + Click: Connect two nodes
• Double Click: Edit node
• Click: Select node
• Drag: Move node