Kanban Board

Project Overview

A project clone of classic Kanban Board built with Next.js, Typescript, and TailwindCSS. Users can add/edit/delete columns, drag and drop cards from column to another column, change background appearance and etc.

Challenges

• Designing a drag and drop features to move card from column to another column
• Managing complex events overlay on each other, e.g. prevent drag-and-drop event fire when user intends to expand card detail.
• Implementing custom drawer to handle view and edit card detail
• Implementing responsive layout for different screen sizes

Future Improvements

• Support autocomplete when edit assignees field
• File upload validation with improved security
• Restructure component logic to make it backend integration ready

Reflection

This project taught me on complex user interactions(drag-and-drop) and event handling. I also explored multiple shadcn components such like toaster, avatar, badge, sheet and etc.