← Back to Examples

Project Board

Kanban-style project tracker powered by html★ + Vanilla Breeze

Project Board Demo

A kanban board with task columns, list and team views, polling activity feed, and persistent filters — the canonical "you need React" app, without React.

Launch Demo →

What's Included

Board Features

  • Kanban Board — Three columns: To Do, In Progress, Done
  • List View — Task table with sortable columns
  • Team View — Team members with assigned task counts
  • Task Details — Click a card to load detail sidebar
  • Activity Feed — Auto-refreshing with 30-second polling
  • Persistent Filters — Filter preferences survive page refresh

html★ Patterns Used

Views & Navigation

  • data-push — URL updates for Board/List/Team views
  • data-cache="2m" — Cache view content for fast switching
  • data-prefetch="hover" — Preload views on hover

Real-time & Persistence

  • data-poll="30s" — Activity feed refreshes every 30 seconds
  • data-persist — Filter preferences persist across sessions
  • data-swap="prepend" — New activity items prepended to feed

Task Management

  • data-method="POST" — Create new tasks
  • data-method="PUT" — Update existing tasks
  • data-confirm — Confirmation for destructive actions

Why This Matters

A kanban board is the go-to demo for React frameworks. This version uses data-layout="grid" for responsive columns that auto-collapse on mobile, polling for live updates, and data-persist for filter preferences — all declarative HTML, under 40 lines of inline JavaScript.