Kanban Board (Props-only Pain)

Why This Project

This is the first of a three-part sequence. You'll build the same Kanban board three times — first with only props and useState, then with useContext + useReducer, then with Redux Toolkit. A Kanban board is more complex than a shopping cart: cards move between columns, columns can be reordered, and multiple parts of the UI need to react to the same state change. The prop drilling pain will be obvious. Do NOT skip ahead.

What to Build

A Trello-style board with columns (e.g., "To Do", "In Progress", "Done"). Users can add cards to any column, move cards between columns (via buttons, not drag-and-drop), edit card titles, delete cards, and add/rename/delete columns. A header shows the total card count across all columns. Build with ONLY useState and props.

Requirements

Components: App, Header (total card count), Board, Column, Card, AddCardForm, AddColumnForm
All state lives in App — the entire board is one state object
Move card left/right between columns via arrow buttons on each card
Header shows "12 cards total" — this requires the board state, so it must be passed up or through
Inline editing: click a card title to edit it in place
Delete confirmation before removing a column (which also removes all its cards)
No context, no Redux, no external state libraries
No backend — all in-memory (data disappears on refresh, that's fine)

Skills Practiced

useState prop drilling lifting state nested state updates immutable updates component hierarchy

Pain Point to Notice

Moving a card between columns means updating two columns in one state change. The move handler lives in App, gets passed to Board, then to Column, then to Card. That's four levels of prop drilling for a single function. And every column needs different callbacks (moveLeft, moveRight, deleteCard, editCard, addCard). Count the total number of props being passed through components that don't use them. Write that number down. You'll eliminate them all in the next version.

Resources

Managing State — react.dev docs
Choosing the State Structure docs — react.dev
Updating Objects in State docs — react.dev
Updating Arrays in State docs — react.dev
Lifting State Up — react.dev docs
Passing Data Deeply with Context — react.dev docs — read AFTER building this version