Overview

Build a dynamic, interactive Kanban-style task board where users can reorder both tasks within their respective columns and the columns themselves. This problem challenges your ability to manage complex UI state, implement native drag-and-drop functionality without external libraries, and ensure a smooth user experience in React.

What you need to do / Task

Your primary goal is to implement the core drag-and-drop logic for a Kanban board using React and native browser D&D APIs.

1. Render the Board: Display the initial set of columns and tasks based on the provided mock data.
2. Task Reordering: Enable users to drag and drop tasks to reorder them within the same column.
3. Column Reordering: Enable users to drag and drop entire columns to reorder their horizontal position on the board.
4. State Management: Ensure that all drag-and-drop operations correctly update the underlying application state, reflecting the new order of tasks and columns.

UI/UX expectations

• Visual Feedback: When an item (task or column) is being dragged, provide clear visual feedback (e.g., a semi-transparent ghost image of the dragged item, a placeholder indicating the potential drop position).
• Drop Indicators: Clearly indicate valid drop targets as the user hovers a dragged item over them.
• Smooth Interaction: Dragging and dropping should feel responsive and intuitive without jank.
• Basic Responsiveness: The board should generally adapt to different screen widths, allowing columns to wrap or scroll horizontally if needed (basic flexbox/grid layout is sufficient).

Acceptance criteria

• The application renders the initial board state correctly with all columns and tasks.
• Users can successfully drag and drop tasks to reorder them within any given column.
• Users can successfully drag and drop entire columns to reorder their position horizontally across the board.
• The application's internal state (the boardData array) is updated accurately after each successful drag-and-drop operation.
• The UI visibly updates to reflect the new order of tasks or columns immediately after a drop.
• Visual cues (e.g., changing opacity, border, or background) are present during drag operations to indicate the dragged item and potential drop zones.

Clarifications

• Cross-Column Dragging: Dragging tasks between different columns is out of scope for this problem.
• Adding/Deleting: There's no need to implement functionality for adding, editing, or deleting tasks or columns.
• External Libraries: You are expected to implement drag-and-drop using native browser APIs (e.g., draggable attribute, dragstart, dragover, drop events) rather than relying on third-party D&D libraries.
• Data Structure: The provided initialBoardData structure should be used as the source of truth.