This project is a button-driven Kanban board app that features modularity, accessibility, and responsiveness.
Motivation
Previously, I built a drag-and-drop kanban using vanilla JavaScript and Web APIs, which offers a highly interactive and intuitive user experience, especially on desktop.
However, drag-and-drop introduces significant challenges when it comes to accessibility and mobile compatibility. It becomes difficult—or even unusable—for keyboard-only users and mobile users without touch-optimized support.
Another concern with the vanilla JS approach is maintainability. As each task card grows in complexity, developers are required to write more repetitive and boilerplate HTML, making the code harder to scale and manage. In comparison, a modern, component-based frontend framework like React offers a more structured, reusable, and maintainable solution.
Technical Highlights
-
Modular Architecture — This version of Kanban was built using a component-based design with React, promoting code reuse, separation of concerns, and scalability.
-
Accessibility — This implementation replaces drag-and-drop with button-based task movement to ensure full keyboard accessibility and improved support for assistive technologies.
-
Responsive Layout — Leverages CSS Flexbox to create a flexible, adaptive layout. For example, using
flex: 1allows the Kanban canvas to dynamically occupy remaining vertical space, ensuring consistent behavior across different viewport sizes.
Feel free to check out the GitHub repo to see the implementation in detail!