uobclaudetraining
A single-page IT project management Kanban board, built as a training exercise with
Claude Code.
▶ Open the live demo
Internal demo / training artefact. It is not an official UOB system and uses no real UOB
logo, trademark or branding — only a neutral "UOB IT PMO" text wordmark.
Running it
Either open it in the browser, or
download index.html and double-click it. That's the whole app — markup,
styles and script in one file, with no build step, no dependencies and no server.
What it does
Four fixed columns (Backlog / In Progress / Blocked / Done) with drag-and-drop between
them, plus a keyboard-accessible Move ▸ control on every card so the board works without
a mouse. Cards are colour-coded by priority, flagged when overdue, and deleted through an
inline Yes/No confirmation rather than a browser dialog. Above the board there is a live
executive KPI band and client-side filters for project, assignee and priority. Adding a
task goes through a validated form that shows inline field errors.
The board is seeded with 8 demo tasks and holds its state in memory only — no
localStorage, no cookies, no database. Refreshing the page resets it to the seed data.
That is intentional for a training demo, and the UI says so.
Email notifications (optional)
New tasks are announced by email through FormSubmit. To point it
at your own inbox, edit the one config constant near the top of the <script> block:
const FORMSUBMIT_ENDPOINT = "https://formsubmit.co/ajax/[email protected]";
FormSubmit needs a one-time activation per address: the first submission triggers a
confirmation email, and nothing is delivered until you click the link in it.
Until that is done, adding a task shows an amber "Card added locally — email notification
failed" toast. That is expected — the notification is optional and its failure never
affects the board.
Redesign
The board was reworked for a senior-management audience: a flat navy header, a slate/sky
palette where the single blue accent always means "you can act here", an executive KPI
band with a delivery-health meter, and columns rendered as white sheets with a status
rail rather than tinted wells.
The earlier interface is kept here for comparison rather than overwritten — the same
eight seeded tasks, before the redesign:
Security posture
The board takes no login and stores nothing, so the interesting boundaries are
the two places untrusted data crosses: typed text reaching the DOM, and task
data leaving for the notification endpoint.
| Control | What it covers |
|---|
escapeHtml() on every interpolated value | Script injection through any task field |
| Content Security Policy | Second layer if an escape is ever missed — default-src 'none', no external origin, connect-src limited to the one endpoint, form-action 'none', base-uri 'none' |
| Input sanitisation | Strips control characters, bidi overrides and zero-width joiners, so a name cannot be made to display as someone else's |
Allowlist re-validation in addTask() | Project, category, priority and status are re-checked at the only door into state, not merely at the form |
referrer: no-referrer + credentials: omit | The page URL and any cookies stay out of the third-party request |
| Board cap and submit interval | Bounds memory growth and stops the captcha-less endpoint being hammered |
| Request timeout | A stalled notification cannot leave the form disabled indefinitely |
frame-ancestors is declared but browsers ignore it in a <meta> tag — real
clickjacking cover needs a response header, so the page also checks at runtime
whether it has been framed by another origin and warns if so.
Repository contents
| File | |
|---|
index.html | The entire application |
404.html | Fallback page for unknown paths on the published site |
CLAUDE.md | Architecture and constraints, for working on this with Claude Code |
.github/workflows/deploy-pages.yml | Publishes the site to GitHub Pages on every push to main |
.claude/commands/ | Project slash commands for Claude Code |
.mcp.json | Registers the Playwright MCP server for browser automation |
docs/screenshot.png | The board, captured from the published site |
docs/screenshot-before-revamp.png | The interface prior to the redesign, kept for comparison |
