Drag & Drop Pipeline Tool

A take‑home assignment implementing a kanban‑style pipeline with drag‑and‑drop, CRUD, and local persistence. Built with Next.js 15, TypeScript, Tailwind CSS, and @dnd-kit.

Overview

This app visualizes a simple workflow with four columns: To Do, In Progress, Review, and Done. Tasks can be created, edited, deleted, and reordered via drag‑and‑drop within and across columns. State persists to localStorage so changes survive reloads.

Features

• Drag‑and‑drop across columns powered by @dnd-kit
• CRUD for tasks: add, edit (inline), delete with confirm
• Local persistence via localStorage
• Responsive layout with scrollable columns
• Unit tests with Vitest and Testing Library

Tech Stack

• Next.js 15 (App Router)
• React 19 + TypeScript
• Tailwind CSS 4
• @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
• Vitest + @testing-library/react + @testing-library/jest-dom

Requirements Summary

From the assignment plan:

• Columns representing workflow stages
• Smooth drag‑and‑drop with visual feedback
• CRUD operations and local persistence
• Mobile‑friendly interactions
• One “twist” feature - Search by title/assignee/priority

Getting Started

Prerequisites

• Node.js >= 18
• npm (or pnpm/yarn/bun)

Install & Run

npm install
npm run dev

Open http://localhost:3000 in your browser.

Build & Start

npm run build
npm start

Usage

• Add tasks using the form at the top of the board.
• Drag tasks within a column to reorder, or across columns to change stage.
• Click the edit icon on a task to rename; Save or Cancel to finish.
• Click the delete icon; confirm to remove.

Scripts

• npm run dev — start the dev server
• npm run build — build for production
• npm start — run the built app
• npm test — run test suite once
• npm run test:watch — run tests in watch mode
• npm run lint — run ESLint

Testing

• Test runner: Vitest with jsdom environment.
• DOM helpers: Testing Library and jest-dom matchers.
• Setup file: vitest.setup.ts extends expect and cleans up after each test.

Run tests:

npm test
# or
npm run test:watch

Architecture

src/
├── app/
│   ├── page.tsx        # Renders the Board
│   └── layout.tsx      # App shell
├── components/
│   ├── Board.tsx       # DndContext + DragOverlay
│   ├── Column.tsx      # Droppable + SortableContext
│   ├── Task.tsx        # Sortable item with inline edit/delete
│   ├── TaskForm.tsx    # Add new tasks
│   ├── Task.test.tsx
│   └── TaskForm.test.tsx
├── hooks/
│   ├── useTasks.ts     # CRUD + reorder + move + persistence
│   └── useLocalStorage.ts
├── types/
│   └── index.ts        # Task, Column, Priority types
└── utils/
    ├── helpers.ts      # generateId, now
    └── helpers.test.ts

Data Model

export type Priority = 'low' | 'medium' | 'high';

export interface Task {
  id: string;
  title: string;
  description?: string;
  priority: Priority;
  assignee?: string;
  createdAt: Date;
  updatedAt: Date;
  columnId: string;
}

export interface Column {
  id: string;
  title: string;
  taskIds: string[];
}

How It Works

• Board initializes DndContext and renders columns and an overlay during drag.
• Column declares droppable area and a sortable list of task IDs.
• Task uses useSortable to enable drag and inline edit/delete operations.
• useTasks persists tasks and columns to localStorage and exposes helpers.

Development Notes

• Focused on core functionality first; UI kept intentionally simple.
• Tests cover helpers, TaskForm submission behavior, and Task edit/delete flows.
• vitest.config.ts sets jsdom env and React plugin for JSX transform.

Deployment

• Recommended: deploy to Vercel.
• Any Node host works: build with npm run build then npm start.