# Kanban Board – Product Requirements Document (PRD)

## Overview

A single-board Kanban-style task manager with a clean, modern UI and smooth drag-and-drop interactions. The application will be built using **Vite**, **dnd-kit**, **Supabase** for backend storage, and **Tailwind CSS** for styling.

---

## Goals

- Allow users to manage tasks in a single Kanban board without authentication.
- Support basic CRUD operations for columns and cards.
- Provide smooth, intuitive drag-and-drop functionality.
- Store all data persistently via Supabase.
- Ensure a responsive and mobile-friendly design.

---

## Tech Stack

- **Frontend:** Vite + React
- **Drag and Drop:** `@dnd-kit/core`, `@dnd-kit/sortable`
- **Styling:** Tailwind CSS
- **Backend/Storage:** Supabase (Database only)
- **Hosting:** TBD (e.g., Vercel, Netlify)

---

## Features

### 1. Columns
- Display multiple columns (default: "To Do", "In Progress", "Done")
- Add new columns
- Rename existing columns
- Delete columns (with confirmation)
- Reorder columns via drag-and-drop

### 2. Cards
- Display task cards within columns
- Add new cards to any column
- Edit card titles in-place
- Delete cards
- Reorder cards within a column
- Move cards between columns via drag-and-drop

### 3. Drag & Drop
- Smooth and accessible drag-and-drop interactions
- Visual indicators for drag state (e.g., shadow, highlight)

### 4. Storage
- All data (columns and cards) saved and loaded via Supabase
- Real-time sync is **not required**

### 5. Design & UX
- Responsive layout for mobile and desktop
- Clean, modern aesthetic
- Smooth UI transitions

---

## Non-Goals

- Multi-board support
- User accounts or authentication
- Real-time collaboration
- Card metadata (e.g., due dates, labels)

---

## Data Model

### Columns Table
| Field       | Type       | Notes                  |
|-------------|------------|------------------------|
| `id`        | UUID       | Primary key            |
| `title`     | Text       | Column name            |
| `order`     | Integer    | Position in the board  |
| `created_at`| Timestamp  | Auto-generated         |

### Cards Table
| Field       | Type       | Notes                        |
|-------------|------------|------------------------------|
| `id`        | UUID       | Primary key                  |
| `column_id` | UUID       | Foreign key to `columns.id`  |
| `title`     | Text       | Card title                   |
| `order`     | Integer    | Position within the column   |
| `created_at`| Timestamp  | Auto-generated               |



---

# 🛠️ Kanban Board – Development Todo List

## 1. Setup

- [ ] Initialize project with **Vite + React + TypeScript**
- [ ] Install and configure **Tailwind CSS**
- [ ] Install **dnd-kit** dependencies:
  - `@dnd-kit/core`
  - `@dnd-kit/sortable`
  - `@dnd-kit/modifiers`
- [ ] Setup project file structure (`components/`, `hooks/`, `utils/`, etc.)
- [ ] Create static Kanban layout with 3 hard-coded columns ("To Do", "In Progress", "Done")
- [ ] Implement basic card components (static titles)
- [ ] Add basic drag-and-drop functionality for cards between columns (no persistence yet)
- [ ] Implement drag-and-drop sorting within a column

---

## 2. Set Up Supabase

- [ ] Create Supabase project
- [ ] Create `columns` and `cards` tables as per the data model
- [ ] Set up Supabase client in the frontend
- [ ] Implement API utilities for:
  - Fetching columns and cards
  - Creating/updating/deleting rows
- [ ] Seed initial data (optional)

---

## 3. Basic Functionality

- [ ] Load columns and cards from Supabase
- [ ] Add ability to create a new card in any column
- [ ] Allow drag-and-drop of cards across columns and update Supabase
- [ ] Implement reordering of cards (and update `order` field in DB)

---

## 4. Column Management

- [ ] Add new column functionality
- [ ] Edit column title in-place
- [ ] Delete a column (with confirmation and optional cascading delete of its cards)
- [ ] Reorder columns with drag-and-drop and update `order` field in DB

---

## 5. Card Editing

- [ ] Edit card title in-place
- [ ] Delete card

---

## 6. UI/UX & Responsiveness

- [ ] Style layout and components with Tailwind for a clean, modern look
- [ ] Add visual feedback during drag-and-drop (e.g., drop zones, elevation)
- [ ] Ensure mobile responsiveness
- [ ] Handle loading, error, and empty states gracefully

---

## 7. Final Polish

- [ ] Clean up and optimize code
- [ ] Add utility hooks (e.g., useSortableList, useColumns)
- [ ] Confirm performance and usability
- [ ] Deploy project (e.g., Vercel or Netlify)