A modern, interactive learning path management system with a responsive design and powerful canvas-based mind mapping tools.

• Create and organize learning concepts and sub-concepts
• Set difficulty levels (Beginner, Intermediate, Advanced, Extreme)
• Add comprehensive descriptions and resources
• Track progress with visual indicators

• Canva-like Design Interface - Professional drawing tools
• Text Tools - Add formatted text with custom fonts, colors, and styling
• Shape Tools - Draw rectangles, circles, triangles, stars, arrows, and more
• Drawing Tools - Free-hand drawing with customizable brushes
• Auto-Save - Automatic canvas state preservation
• Grid System - Visual dotted grid for precise alignment
• Image Upload - Import and manipulate images

• Mobile-First - Optimized for touch devices
• Cross-Platform - Works on desktop, tablet, and mobile
• Touch Support - Enhanced touch interactions for mobile drawing
• Adaptive Layout - Collapsible tools panel on mobile

• Search Functionality - Quick search across learning paths
• Real-time Validation - Form validation with detailed error messages
• Navigation System - Seamless navigation between concepts
• Data Persistence - Local storage for offline capability

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (Live Server, Python HTTP server, etc.)

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Canvas Library: Fabric.js 5.2.4
• Icons: Font Awesome 5.0.7
• Storage: Browser Local Storage
• Responsive Design: CSS Grid, Flexbox, Media Queries

1. Navigate to the main page
2. Click "Add Path"
3. Add concepts and sub-concepts with descriptions
4. Set difficulty levels and add resources

1. Access the canvas from any concept/sub-concept
2. Choose from Text, Shape, or Draw modes
3. Customize colors, sizes, and styles
4. Your work auto-saves as you create

• Use the floating tools button to access drawing tools
• Swipe through concepts in the stats panel
• Double-tap to select canvas objects
• Pinch to zoom (coming soon)

• Text Mode: Rich text editing with fonts and formatting
• Shape Mode: 8 different shapes with customization
• Draw Mode: 3 brush types with line styles
• Style Panel: Colors, opacity, stroke width controls

• Character count limits with real-time feedback
• Duplicate name detection
• Business logic validation
• Detailed error messages with emojis

• Desktop: 1024px+ (Full three-column layout)
• Tablet: 768px-1024px (Optimized spacing)
• Mobile: 480px-768px (Stacked layout)
• Small Phone: 320px-480px (Compact design)

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

YoussefReaper

• GitHub: @YoussefReaper

Happy Learning! 🎓