Cardflow - Task Board

A modern task board application built with Next.js 14, React 18, TypeScript, Prisma, and PostgreSQL, featuring a glassmorphism UI.

Prerequisites

• Node.js 18+
• npm
• PostgreSQL database (AWS RDS or local)

Getting Started

npm install

Set up your .env file (copy the example and fill in your values):

cp .env.example .env

Then edit .env with your database credentials:

DATABASE_URL="postgresql://USER:PASSWORD@HOST:5432/DATABASE?schema=public&sslmode=require"

Run migrations and seed:

npx prisma migrate dev
npm run db:seed

Start the dev server:

npm run dev

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

Project Structure

├── app/
│   ├── layout.tsx              # Root layout with providers + Inter font
│   ├── page.tsx                # Dashboard page (fetches boards from API)
│   ├── globals.css             # Tailwind + glass utility classes
│   ├── icon.svg                # Favicon
│   ├── board/[id]/page.tsx     # Board detail page (task columns)
│   └── api/
│       ├── boards/
│       │   ├── route.ts        # GET (list) / POST (create) boards
│       │   └── [id]/route.ts   # GET (detail) / PATCH (update) / DELETE board
│       └── tasks/
│           ├── route.ts        # GET (list by boardId) / POST (create) tasks
│           └── [id]/route.ts   # PATCH (update) / DELETE task
├── components/
│   ├── ui/                     # Glass-styled UI primitives
│   ├── modals/                 # Create board/task modals
│   ├── Background.tsx          # Gradient + glow blobs background
│   ├── BoardCard.tsx           # Board card for dashboard
│   ├── EmptyState.tsx          # Empty state placeholder
│   ├── FilterSortBar.tsx       # Status filter + sort controls
│   ├── Logo.tsx                # Cardflow logo (inline SVG)
│   ├── TaskCard.tsx            # Task card with inline edit
│   └── TaskColumn.tsx          # Status column container
├── lib/
│   ├── types.ts                # TypeScript types and enums
│   ├── prisma.ts               # Prisma client singleton
│   ├── store.tsx               # React context for client-side state
│   ├── hooks/
│   │   └── usePolling.ts       # Generic polling hook (useRef + setInterval)
│   └── services/
│       ├── boardService.ts     # Board API calls (fetch-based)
│       └── taskService.ts      # Task API calls (fetch-based)
├── prisma/
│   ├── schema.prisma           # Database schema
│   ├── seed.ts                 # Seed script (3 boards, 11 tasks)
│   └── migrations/             # Migration history
└── public/
    └── images/
        └── logo-horizontal.svg

API Endpoints

Method	Endpoint	Description
GET	/api/boards	List all boards with task counts
POST	/api/boards	Create a board (requires name)
GET	/api/boards/[id]	Get board with all tasks
PATCH	/api/boards/[id]	Update board (name, description, color)
DELETE	/api/boards/[id]	Delete board + cascade tasks
GET	/api/tasks?boardId=	List tasks for a board
POST	/api/tasks	Create a task (requires boardId, title)
PATCH	/api/tasks/[id]	Update task fields
DELETE	/api/tasks/[id]	Delete a task

Scripts

Command	Description
npm run dev	Start development server
npm run build	Production build
npm run db:seed	Seed database with sample data
npm run db:migrate	Run Prisma migrations

Tech Stack

• Next.js 14 with App Router
• React 18
• TypeScript
• Prisma ORM
• PostgreSQL (AWS RDS)
• Tailwind CSS
• @dnd-kit/core (drag-and-drop)

Features

• Dashboard: View all boards with task counts, create new boards
• Board Detail: Three-column Kanban layout (To Do / In Progress / Done)
• Task Management: Create, inline edit title, change status, delete
• Filtering: Filter tasks by status (hides non-matching columns)
• Sorting: Sort by date created or priority within each column
• Glassmorphism UI: Translucent panels, backdrop blur, glow accents
• PostgreSQL: Data persists across restarts via AWS RDS
• Cascade Delete: Deleting a board removes all its tasks
• Real-Time Sync: Cross-tab updates via 5-second polling (pauses during drag)