Trello-Style Board Clone

A Trello-style board looks simple at first: you have columns, and each column contains cards. The mistake is treating cards as anonymous pieces of text inside an array. This becomes a serious problem when you add drag-and-drop, editing, deleting, comments, labels, due dates, or card detail modals. If a card does not have a stable ID, it is difficult to move it safely, update it later, or keep the UI consistent after reordering.

Problematic approach:

          const board = {
            columns: [
              {
                title: "To Do",
                cards: ["Create layout", "Add drag and drop"]
              },
              {
                title: "Done",
                cards: ["Create project files"]
              }
            ]
          };

          function moveCard(fromColumnIndex, toColumnIndex, cardIndex) {
            const card = board.columns[fromColumnIndex].cards[cardIndex];
            board.columns[fromColumnIndex].cards.splice(cardIndex, 1);
            board.columns[toColumnIndex].cards.push(card);
          }

This version works only while cards are plain strings. As soon as you add editing, descriptions, labels, comments, or modal views, the structure becomes too weak.

Better approach:

          const board = {
            columnsById: {
              "column-1": {
                id: "column-1",
                title: "To Do",
                cardIds: ["card-1", "card-2"]
              },
              "column-2": {
                id: "column-2",
                title: "Done",
                cardIds: ["card-3"]
              }
            },
            cardsById: {
              "card-1": {
                id: "card-1",
                title: "Create layout",
                description: "",
                labels: []
              },
              "card-2": {
                id: "card-2",
                title: "Add drag and drop",
                description: "",
                labels: []
              },
              "card-3": {
                id: "card-3",
                title: "Create project files",
                description: "",
                labels: []
              }
            },
            columnOrder: ["column-1", "column-2"]
          };

Pay attention to: Use stable IDs for boards, columns, and cards. Store card data separately from column ordering. Columns should usually contain card IDs, not duplicated card objects. This makes drag-and-drop, editing, filtering, saving, and restoring the board much easier.

Drag-and-drop logic often requires removing a card from one list and inserting it into another. Many beginners directly mutate arrays with splice() on the existing state object. This can create hidden bugs, especially in React, because the reference to the parent object may not change. The UI may fail to re-render, or old and new state may accidentally point to the same nested data.

Problematic code:

          function onDragEnd(result) {
            const { source, destination } = result;

            if (!destination) return;

            const sourceColumn = board.columns[source.droppableId];
            const destinationColumn = board.columns[destination.droppableId];

            const [movedCard] = sourceColumn.cards.splice(source.index, 1);
            destinationColumn.cards.splice(destination.index, 0, movedCard);

            setBoard(board);
          }

The code changes the original board object. Even if it appears to work, it makes debugging harder and can break predictable state updates.

Recommended solution:

          function onDragEnd(result) {
            const { source, destination } = result;

            if (!destination) return;

            if (
              source.droppableId === destination.droppableId &&
              source.index === destination.index
            ) {
              return;
            }

            setBoard((currentBoard) => {
              const sourceColumn = currentBoard.columnsById[source.droppableId];
              const destinationColumn = currentBoard.columnsById[destination.droppableId];

              const sourceCardIds = [...sourceColumn.cardIds];
              const destinationCardIds =
                sourceColumn.id === destinationColumn.id
                  ? sourceCardIds
                  : [...destinationColumn.cardIds];

              const [movedCardId] = sourceCardIds.splice(source.index, 1);
              destinationCardIds.splice(destination.index, 0, movedCardId);

              return {
                ...currentBoard,
                columnsById: {
                  ...currentBoard.columnsById,
                  [sourceColumn.id]: {
                    ...sourceColumn,
                    cardIds: sourceCardIds
                  },
                  [destinationColumn.id]: {
                    ...destinationColumn,
                    cardIds: destinationCardIds
                  }
                }
              };
            });
          }

Pay attention to: Drag-and-drop should produce a new state object instead of modifying the old one. This keeps rendering predictable and makes it easier to add undo, autosave, optimistic updates, and server synchronization later.

Many Trello clone projects support moving cards between columns, but the columns themselves remain fixed. That makes the board feel incomplete because real boards often allow users to reorder lists such as Backlog, To Do, In Progress, Review, and Done. Even if your first version does not include full column drag-and-drop, your data model should be ready for it.

Limited structure:

          const board = {
            columnsById: {
              todo: { id: "todo", title: "To Do", cardIds: [] },
              progress: { id: "progress", title: "In Progress", cardIds: [] },
              done: { id: "done", title: "Done", cardIds: [] }
            }
          };

          const columns = Object.values(board.columnsById);

This approach depends on object iteration order. It is not clear where column ordering lives, and it is difficult to update when the user drags an entire list.

Improved structure:

          const board = {
            columnOrder: ["todo", "progress", "done"],
            columnsById: {
              todo: { id: "todo", title: "To Do", cardIds: [] },
              progress: { id: "progress", title: "In Progress", cardIds: [] },
              done: { id: "done", title: "Done", cardIds: [] }
            }
          };

          const orderedColumns = board.columnOrder.map((columnId) => {
            return board.columnsById[columnId];
          });

Column reorder example:

          function reorderColumns(startIndex, endIndex) {
            setBoard((currentBoard) => {
              const nextColumnOrder = [...currentBoard.columnOrder];
              const [movedColumnId] = nextColumnOrder.splice(startIndex, 1);

              nextColumnOrder.splice(endIndex, 0, movedColumnId);

              return {
                ...currentBoard,
                columnOrder: nextColumnOrder
              };
            });
          }

Pay attention to: Store column order explicitly. Even if your first milestone focuses only on cards, a good board architecture should make column reordering possible without rewriting the whole state structure.

A board clone should not lose all work after page refresh. At the same time, saving after every tiny state change without control can create performance issues, especially when the board grows. If you use browser storage, you need a clear save strategy. If you use an API, you need loading, error, and retry logic.

Problematic code:

          function updateCardTitle(cardId, title) {
            setBoard((board) => ({
              ...board,
              cardsById: {
                ...board.cardsById,
                [cardId]: {
                  ...board.cardsById[cardId],
                  title
                }
              }
            }));

            localStorage.setItem("board", JSON.stringify(board));
          }

This code may save the old board value because state updates are asynchronous. It also writes to storage immediately on every title change.

Better approach:

          useEffect(() => {
            const timeoutId = setTimeout(() => {
              localStorage.setItem("trello-board", JSON.stringify(board));
            }, 400);

            return () => clearTimeout(timeoutId);
          }, [board]);

Loading saved data:

          function loadInitialBoard() {
            const savedBoard = localStorage.getItem("trello-board");

            if (!savedBoard) {
              return createDefaultBoard();
            }

            try {
              return JSON.parse(savedBoard);
            } catch (error) {
              return createDefaultBoard();
            }
          }

          const [board, setBoard] = useState(loadInitialBoard);

Pay attention to: Autosave should be reliable, but not chaotic. Save from the latest state, debounce frequent changes, handle invalid saved data, and show users when changes are saved if you add a backend later.

Drag-and-drop is the central feature of a Trello-style board, but it should not be the only way to move cards. Some users navigate with a keyboard, some use touch devices, and some drag-and-drop libraries need additional accessibility work. A common mistake is making the board visually draggable but ignoring focus states, button semantics, keyboard shortcuts, and alternative controls.

Less accessible interaction:

          <div class="card" draggable="true" ondragstart="startDrag(event)">
            Fix navbar spacing
          </div>

This gives basic mouse dragging, but the card is not a proper interactive control. It has no keyboard behavior, no descriptive label, and no alternative movement action.

Improved structure:

          <article class="card" tabindex="0" aria-label="Task: Fix navbar spacing">
            <h3>Fix navbar spacing</h3>

            <div class="card-actions" aria-label="Card actions">
              <button type="button" onclick="moveCardLeft(cardId)">
                Move left
              </button>
              <button type="button" onclick="moveCardRight(cardId)">
                Move right
              </button>
              <button type="button" onclick="openCardModal(cardId)">
                Open details
              </button>
            </div>
          </article>

Useful keyboard handling:

          function handleCardKeyDown(event, cardId) {
            if (event.key === "Enter") {
              openCardModal(cardId);
            }

            if (event.altKey && event.key === "ArrowRight") {
              moveCardToNextColumn(cardId);
            }

            if (event.altKey && event.key === "ArrowLeft") {
              moveCardToPreviousColumn(cardId);
            }
          }

Pay attention to: Drag-and-drop should feel good with a mouse, but the board should still be usable through buttons, keyboard focus, clear labels, and predictable modal behavior.