Polish & Features

Drag-and-Drop Kanban

This is the feature that turns the prototype into an interactive kanban board. This tutorial uses @dnd-kit, which supports React drag-and-drop patterns and accessibility configuration; verify keyboard and pointer interactions in your implementation.

The prompt is specific about the position calculation and optimistic updates — these are the two areas where AI needs the most guidance. Here's the core logic:

function calculatePosition(
  tasks: Task[],
  overIndex: number
): number {
  // Dropping at the end of column
  if (overIndex >= tasks.length) {
    const last = tasks[tasks.length - 1];
    return last ? last.position + 1 : 1;
  }

  // Dropping at the beginning
  if (overIndex === 0) {
    return tasks[0].position / 2;
  }

  // Dropping between two tasks
  const before = tasks[overIndex - 1];
  const after = tasks[overIndex];
  return (before.position + after.position) / 2;
}

And the optimistic update pattern in the drag end handler:

function handleDragEnd(event: DragEndEvent) {
  const { active, over } = event;
  if (!over) return;

  const taskId = active.id as string;
  const newStatus = over.data.current?.status as TaskStatus;
  const overIndex = over.data.current?.index as number;

  // Get tasks in the target column
  const columnTasks = tasks
    .filter((t) => t.status === newStatus && t.id !== taskId)
    .sort((a, b) => a.position - b.position);

  const newPosition = calculatePosition(columnTasks, overIndex);

  // Optimistic update: move immediately in local state
  useProjectStore.getState().optimisticMoveTask(taskId, newStatus, newPosition);

  // Then sync with API (revert on failure)
  useProjectStore.getState().moveTask(taskId, newStatus, newPosition)
    .catch(() => {
      // Revert: re-fetch tasks from server
      useProjectStore.getState().fetchTasks(activeProjectId!);
    });
}

Filtering & Search

// FilterBar passes this to KanbanBoard
const filterTasks = useCallback(
  (tasks: Task[]) => {
    return tasks.filter((task) => {
      // Text search
      if (searchQuery && !task.title.toLowerCase().includes(searchQuery.toLowerCase())) {
        return false;
      }

      // Priority filter
      if (priorityFilter && task.priority !== priorityFilter) {
        return false;
      }

      // Assignee filter
      if (assigneeFilter && task.assignee?.toLowerCase() !== assigneeFilter.toLowerCase()) {
        return false;
      }

      return true;
    });
  },
  [searchQuery, priorityFilter, assigneeFilter]
);

// KanbanBoard applies it before distributing to columns
const filteredTasks = filterFn ? filterFn(tasks) : tasks;

Toast Notifications

Every successful action and every error needs feedback. Without toasts, the user creates a task and has no confirmation it worked. Without error toasts, API failures are silent.

import { create } from 'zustand';

interface Toast {
  id: string;
  message: string;
  type: 'success' | 'error';
}

interface ToastState {
  toasts: Toast[];
  success: (message: string) => void;
  error: (message: string) => void;
  dismiss: (id: string) => void;
}

export const useToast = create<ToastState>((set) => ({
  toasts: [],

  success: (message) => {
    const id = crypto.randomUUID();
    set((s) => ({ toasts: [...s.toasts, { id, message, type: 'success' }] }));
    setTimeout(() => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })), 3000);
  },

  error: (message) => {
    const id = crypto.randomUUID();
    set((s) => ({ toasts: [...s.toasts, { id, message, type: 'error' }] }));
    setTimeout(() => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })), 5000);
  },

  dismiss: (id) => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
}));

Then add toast.success('Task created') after successful store actions and toast.error(err.message) in relevant catch blocks. Review each action and test both success and error paths.

Responsive Design

The responsive prompt is detailed because a minimal breakpoint change may not cover real interaction needs. Specifying the layout per breakpoint gives you concrete behavior to check on narrow and wide screens.

// KanbanBoard responsive layout
<div className={`
  grid gap-4 p-4 h-full
  grid-cols-1 overflow-y-auto
  md:grid-cols-2 md:overflow-y-auto
  lg:grid-cols-4 lg:overflow-x-auto lg:overflow-y-hidden
`}>
  {COLUMNS.map((col) => (
    <Column key={col.status} {...col} tasks={columnTasks} />
  ))}
</div>

Quick Wins

With the core features implemented, consider these focused polish tasks. Choose only what you have time to implement, review, and test:

• Empty states — "No tasks yet" message in empty columns with a subtle illustration and a "Create your first task" CTA button
• Loading skeletons — Pulse animations on task cards while data loads, instead of a spinner
• Keyboard shortcuts — N to create task, Esc to close modal (modal already has this), / to focus search
• Due date highlighting — Red text if overdue, amber if due today, muted if future
• Confirm dialogs — "Are you sure?" before archiving a project or deleting a task

Each quick win still requires implementation review and interaction testing. Apply the changes that improve your prototype without crowding out verification.

The Refactor Pause

Once the build has accumulated several features, pause before testing and deployment for the refactor step from the manual.

"Fix top 5, leave the rest" is a scope constraint. Fix the most important confirmed problems, record anything deferred, and do not deploy with unresolved high-risk findings.

Jump to Any Part