All projects

Test project 27 Jan 2024

alnitak - a kanban board and revenue dashboard rebuilt as an editorial operations console

alnitak - a kanban board and revenue dashboard rebuilt as an editorial operations console
  • Nuxt 3
  • Vue 3
  • TypeScript
  • ECharts
  • Pinia
  • Tailwind
  • Cloudflare

A single-page app with two surfaces - a localStorage-backed kanban board (stages, draggable task cards) and a Russian-language financial dashboard (total revenue, profit by product, plan versus fact on ECharts) - rebuilt end to end. The original read as a half-finished demo: placeholder copy ('Welcome, recruiter or whoever you are'), three unrelated visual languages (light kanban, dark dashboard, bordered-tile home), stock Tailwind blue as a de-facto brand, and real defects underneath. Those went first: the chart composable leaked an ECharts instance on every visit and re-initialised on the same node instead of updating it; an Escape-to-go-back handler compared the wrong key string ('Esc' rather than 'Escape') so the shortcut was dead; a task card nested a delete button and an edit link inside an outer button, which is invalid HTML; millisecond-resolution IDs collided on rapid adds; task-create validation fell through and saved empty-title tasks; and a stage field was a stale one-time snapshot. On top of that sits one bespoke system: a warm-paper OKLCH palette with tinted neutrals and a single clay accent, Fraunces for display and Inter Tight with tabular figures for data, a recurring 'ledger rule' accent cap as the signature, and the ECharts theme rebuilt from default blue/cyan to a harmonised clay/sage/slate palette resolved to rgb so strokes and area fills actually render and never blur out on hover. Accessibility is a real floor: skip link, header/main/footer landmarks, a modal with a focus trap plus Escape and focus restore, focus-visible rings, list semantics, accessible names in Russian, and a reduced-motion guard. The layout is a genuine 390-to-1440 responsive pass with snap-scrolling columns and charts that collapse to one column, and the UX gained an onboarding empty state, skeleton loading, a branded error page, and a reset-board action. Nuxt 3 + Vue 3 + TypeScript + Pinia + ECharts + Tailwind, statically generated (SPA) and deployed on Cloudflare Pages.

Live Code