# Build an Arrow-Controlled Kanban Board in React Build a small Kanban board in React and TypeScript. Tasks are displayed in ordered status columns. Do not implement drag and drop; each task has left and right arrow controls that move it to the adjacent column. Hide the left arrow in the first column and the right arrow in the last column. Whenever a task changes status, append it to the bottom of its destination column, even if it previously occupied another position there. After presenting a working implementation, explain how the state shape and rendering strategy would change for roughly one hundred thousand tasks. Cover virtual scrolling and how to avoid scanning the entire task collection for every move. ### Constraints & Assumptions - Column order is fixed for the core implementation. - A task belongs to exactly one column. - A move updates status and ordering as one state transition. - Control visibility, keyboard access, and accessible names must reflect whether a move is possible. ### Clarifying Questions to Ask - Can tasks be added, deleted, or updated concurrently from a server? - Must ordering persist across reloads, and how is a destination-bottom position represented by the backend? - Does the large-data version need client-side access to all tasks or server-windowed pagination per column? ```hint Group IDs by status Keep task entities separate from each column's order so a move changes one task and two ordering structures rather than filtering every task for every render. ``` ```hint Render only the visible window Virtualization reduces DOM work, but the underlying update path must also avoid rebuilding an array of all one hundred thousand tasks. ``` ### What a Strong Answer Covers - Correct arrow visibility and immutable status moves. - Destination-bottom ordering after every move. - Normalized TypeScript state and stable task keys. - Accessible buttons, focused tests, and protection against impossible moves. - Per-column virtualization and an indexed or server-windowed strategy for large collections. ### Follow-up Questions - How would you preserve focus after a task moves to another virtualized column? - How would optimistic moves reconcile with a server rejection or a concurrent update? - What ordering key would let the backend append without renumbering every task?