DEV Community

Keval sindhu
Keval sindhu

Posted on

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

#showdev #javascript #webdev #productivity

🚀 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! 🚀

Top comments (0)