https://github.com/jjteoh-thewebdev/next-kanban
A kanban board built with Next.js
https://github.com/jjteoh-thewebdev/next-kanban
dndkit kanban nextjs tailwindcss
Last synced: about 1 month ago
JSON representation
A kanban board built with Next.js
- Host: GitHub
- URL: https://github.com/jjteoh-thewebdev/next-kanban
- Owner: jjteoh-thewebdev
- License: mit
- Created: 2025-04-08T04:09:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-29T02:45:29.000Z (about 1 year ago)
- Last Synced: 2025-04-29T03:29:08.995Z (about 1 year ago)
- Topics: dndkit, kanban, nextjs, tailwindcss
- Language: TypeScript
- Homepage: https://next-kanban-beta.vercel.app
- Size: 3.94 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://nextjs.org/) - React framework
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Tailwind CSS](https://tailwindcss.com/) - Styling
- [shadcn/ui](https://ui.shadcn.com/) - UI components
- [@dnd-kit](https://dnd-kit.com/) - Drag and drop functionality
- [Lucide Icons](https://lucide.dev/) - Icons
## Project Detail
Refer [project](./docs/project.md)
## Getting Started
### Prerequisites
- Node.js 20+ and pnpm 10+
### Installation
1. Clone the repository:
```bash
git clone https://github.com/jjteoh-thewebdev/next-kanban.git
cd next-kanban
```
2. Install dependencies:
```bash
pnpm install
```
3. Create `.env` file(adjust the variables base on your need)
```bash
cp sample.env .env
```
4. Run the development server:
```bash
pnpm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.