I Built a Full Kanban Board in Vanilla JavaScript (With Drag & Drop + Time Tracking)

Keval sindhu — Sat, 24 Jan 2026 16:59:02 +0000

🚀 Introduction

I recently finished building an open-source project called ProKanban — a modern Kanban board application built entirely with Vanilla JavaScript, HTML5, and modern CSS.

The goal was simple:

Build a real productivity-style web app without using frameworks like React.

This project helped me improve my understanding of modular JavaScript architecture, UI state management, drag-and-drop interactions, and building real-world frontend features.

✨ What is ProKanban?

ProKanban is a responsive Kanban task board where users can manage tasks across workflow stages:

To Do
In Progress
On Hold
Done

It’s designed with a clean dark UI and includes productivity-focused features beyond basic task cards.

✅ Key Features

🧲 Drag & Drop Workflow

Tasks can be moved smoothly between columns using drag-and-drop.

Touch drag support is included for mobile devices.

💾 Persistent Storage

All tasks are automatically saved using the browser’s LocalStorage, so the board stays intact even after refreshing or closing the browser.

⏱️ Task Time Tracking (Advanced Feature)

One of the most interesting parts of this project was building a timer system:

Start/Pause timer directly inside a task card
Track total time spent per task
Store multiple work sessions
Automatically stop timers when tasks move to Done or On Hold

Each task maintains a complete session history.

📜 Activity History Log

Every action is recorded:

Task creation
Task movement
Deletion
Timer events

This makes the board feel like a real productivity tool.

📤 Export / 📥 Import Support

Users can export their board data as JSON and import it later — useful for:

backups
portability
sharing workflows

📱 Fully Responsive UI

The layout adapts smoothly across devices:

Desktop: 4-column workflow
Tablet: grid layout
Mobile: stacked layout

🛠️ Tech Stack

This project is built using:

Vanilla JavaScript (ES6+)
HTML5
CSS3 (Grid, Flexbox, Variables, Glassmorphism)
LocalStorage API

Libraries used:

canvas-confetti for celebration effects
DragDropTouch for touch drag support

📂 Modular Architecture

The project is structured into separate modules:

drag.js → Drag & drop logic
timer.js → Time tracking system
storage.js → Local persistence
history.js → Activity logging
ui.js → Rendering and UI interactions

Keeping the code modular made it much easier to scale features.

🌐 Live Demo

Try it here:

🔗 https://codewithsindhu.github.io/kanban-board-js/

📌 GitHub Repository

The project is fully open-source:

⭐ https://github.com/CodeWithSindhu/kanban-board-js

Contributions, issues, and feedback are welcome.

🎯 What I Learned

Building ProKanban helped me practice:

Managing state without frameworks
Building modular JavaScript applications
Handling drag-and-drop UX properly
Implementing time tracking + logs
Writing production-quality documentation

✅ Future Improvements

Planned roadmap features:

Task filtering by priority/tags
Search support
Multi-board workflows
Cloud sync (Firebase)
React-based version

⭐ Closing

If you find this project useful, feel free to star the repo or share feedback.

Thanks for reading! 🚀

DEV Community: Keval sindhu