TaskFlow

A fast, keyboard-friendly kanban board with fluid drag & drop. Built as a frontend pet project — no backend, all state persists to localStorage.

Features

• 🖱️ Drag & drop — reorder cards and move them between columns, with a live preview and a lifted drag overlay (powered by @dnd-kit).
• ⌨️ Keyboard accessible — drag with the keyboard, ⌘/Ctrl + Enter to save, Esc to cancel.
• 🗂️ Columns — add, rename (double-click), and delete columns.
• 🏷️ Cards — title, description, priority (low → urgent) and tags.
• 🌗 Light / dark theme — respects system preference, remembers your choice.
• 💾 Offline-first — the whole board is saved locally and restored on reload.
• ✨ Smooth micro-animations via motion.

Stack

• React 19 + TypeScript
• Vite (dev server & build)
• Tailwind CSS v4 (@tailwindcss/vite)
• @dnd-kit — drag & drop
• motion — animations

Getting started

npm install
npm run dev      # start the dev server
npm run build    # production build
npm run preview  # preview the build

Project structure

src/
  components/   Board, Column, Card, CardModal, Header, icons
  lib/          seed data, theme hook
  store.ts      board state + localStorage persistence
  types.ts      data model

---

Made by Artem Yakovlev · part of my portfolio.