feat: add TaskFlow Board with React Flow integration

[saksham-1304]

📝 Description

This PR implements a comprehensive Task Flow Board dashboard using React Flow, enabling users to visually manage tasks through draggable nodes and connections.
Fix #120

🎯 Features Implemented

✅ Core Functionality

• React Flow Integration: Seamlessly integrated React Flow for node-based visualization
• Task Management: Full CRUD operations (Create, Read, Update, Delete) for tasks
• Drag & Drop: Repositionable nodes with smooth drag-and-drop interaction
• Connections: Connect tasks to visualize dependencies and workflow relationships
• Persistent Storage: Automatic localStorage persistence of board state

🎨 UI/UX Features

• Custom Node Component: Styled task nodes with title, description, status, and priority
• Color Coding: Visual indicators for priority levels (low/medium/high) and status
• Controls: Built-in zoom, pan, and MiniMap for better navigation
• Modal Forms: Clean modal interface for adding/editing tasks
• Responsive Design: Mobile-friendly layout with proper touch support

💾 Advanced Features

• Export/Import: Save and restore board configurations as JSON files
• Clear Board: Reset functionality with confirmation dialog
• Double-Click Add: Quick task creation by double-clicking the canvas
• Initial Demo: Pre-populated sample tasks to showcase features
• Legend Panel: Visual guide for priority and status indicators

📸 Screenshots

🔄 Changes Made

New Files

• src/pages/TaskFlowBoard.jsx - Main task board component (686 lines)

Modified Files

• src/App.jsx - Added TaskFlow route
• src/components/Navbar.jsx - Added TaskFlow navigation link
• src/pages/Home.jsx - Added TaskFlow card to dashboard list
• README.md - Updated dashboard table and tech stack
• CONTRIBUTING.md - Added TaskFlow contribution ideas
• package.json - React Flow dependency already present

✅ Acceptance Criteria Met

All acceptance criteria from the original requirements have been fulfilled:

• ✅ Integrate React Flow to display draggable task nodes
• ✅ Allow users to add, edit, and delete tasks dynamically
• ✅ Implement drag-and-drop reordering and repositioning of nodes
• ✅ Add connections (edges) between related tasks
• ✅ Store board state in React state and localStorage
• ✅ Include zoom and pan controls for better usability
• ✅ Ensure responsive layout with clear node styling (title, status, priority)

🧪 Testing

• Manually tested all CRUD operations
• Verified localStorage persistence across page refreshes
• Tested export/import functionality
• Confirmed drag-and-drop behavior works smoothly
• Validated node connections and edge creation
• Tested responsive layout on different screen sizes
• Verified theme compatibility (light/dark mode)

📦 Dependencies

• Uses existing reactflow package (v11.11.4) - already in package.json
• No new dependencies added

🚀 Future Enhancements (TODOs)

The component includes comprehensive TODO comments for future contributors:

Easy:

• Color picker for node customization
• Keyboard shortcuts (Delete, Ctrl+Z)
• Node icons based on task type
• Improved mobile touch support

Medium:

• Task search/filter functionality
• Task categories/tags system
• Drag-to-connect nodes feature
• Task due dates and reminders
• Template boards (Kanban, Sprint Planning)

Advanced:

• Real-time sync with backend
• Smart auto-layout algorithms
• Task dependencies validation
• Analytics dashboard

📚 Documentation

• Updated README with TaskFlow Board entry
• Updated CONTRIBUTING guide with TaskFlow-specific contribution ideas
• Added inline code comments and TODO blocks for maintainability

🎯 Type of Change

• New feature
• Enhancement

🔍 Additional Notes

This implementation follows the project's coding style and architecture patterns:

• Component kept in pages/ directory as per structure
• Uses existing Card and HeroSection components
• Follows CSS variable naming for theming
• Includes comprehensive error handling
• localStorage used for client-side persistence

---

Ready for review! 🎉

[vercel]

@saksham-1304 is attempting to deploy a commit to the venisha-kalola's projects Team on Vercel.

A member of the Team first needs to authorize it.

[saksham-1304]

@venisha-kalola Please review the PR