Taskboard, Team Kanban

The brief and the build

Brief: Build a kanban board that works with a mouse, a touch screen, and only a keyboard, keeps its state between visits, and needs no backend to try.

Drag and drop is the obvious interaction, but it fails on touch devices and for keyboard users. Every card also has explicit move-left, move-right, and delete buttons, and focus follows the card to its new column so you can keep moving it.

Each change is announced through a polite live region (“Moved Fix timezone bug to Done”), and state is saved to local storage so a refresh does not lose work. A tag filter narrows all columns at once.

Light is a conventional board. Dark turns the columns into horizontal swimlanes. Creative is a corkboard of sticky notes.

Results

• Problem: A team lost track of who was doing what because tasks lived in chat threads.
• Built: A kanban board that works by mouse, touch or keyboard, announces moves to screen readers, and keeps its state in local storage.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 0.9 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 8.0 KB (3.4 KB gzipped). The script alone is 5.3 KB (2.1 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs also score 100 in all four categories.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Drag and drop
• Keyboard operable
• Live-region announcements
• Persists locally