Next.js Kanban Board

A modern, responsive Kanban board application built with Next.js, TypeScript, and Tailwind CSS.

Features

• 📱 Mobile friendly design
• 🎯 Drag and drop functionality(with dnd-kit)
• 📝 Rich card management
  • Title and description
  • Assignees
  • Tags
  • Priority levels
  • Checklists
  • Due dates
  • Image attachments
• 🏗️ Column management
  • Create, rename, and delete columns
  • Drag and drop cards between columns
• 🎨 Customizable board appearance
  • Background colors
  • Background images
• 🔄 Real-time updates

Tech Stack

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• shadcn/ui - UI components
• @dnd-kit - Drag and drop functionality
• Lucide Icons - Icons

Project Detail

Refer project

Getting Started

Prerequisites

• Node.js 20+ and pnpm 10+

Installation

1. Clone the repository:

git clone https://github.com/jjteoh-thewebdev/next-kanban.git
cd next-kanban

2. Install dependencies:

pnpm install

3. Create .env file(adjust the variables base on your need)

cp sample.env .env

4. Run the development server:

pnpm run dev

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

License

This project is licensed under the MIT License - see the LICENSE file for details.