Loom — Project Management Dashboard

Overview

A complete project-management front end: full CRUD for plans, requirements and defects, reusable templates, a Gantt view and a dashboard of derived metrics, in about 1,900 lines of vanilla JavaScript with no build step, verified by an 80-plus-check Playwright suite. You can operate it live on this site.

Problem

The brief asked for a lightweight PM tool with a very specific visual language — woven thread borders, translucent panels, daylight glows, constant idle motion — and one hard rule: no static mock. Every control had to work and the data loop had to close in the browser. Heavy animation and glass panels usually fight readability, input precision and frame budget.

What I built

Modelled each module as a declarative schema (fields, validation, columns, done-states) so forms, tables, overdue logic and templates are generated instead of hand-written; kept one in-memory store with derived state (a plan's status comes from its progress); rendered every chart as SVG that patches itself in place; and constrained all motion to transform/opacity with staggered timing so a dozen breathing panels stay smooth.

Architecture

• Store — in-memory arrays with add / update / remove; language-neutral enum codes so data never depends on the UI language
• Module schemas — one object per module drives form generation, required / range / date validation, table columns and inline quick edits
• Views — dashboard (metric cards, woven ring, thread line chart, priority bars, workload heat map, solar-term calendar, overdue reminders, progress submissions), Gantt timeline, three list modules
• Rendering — skeletons mount once and data regions re-render; SVG charts update attributes in place and tween through requestAnimationFrame
• i18n — EN / 中文 dictionary with placeholders, persisted in localStorage; seed data reloads per language until the user edits
• Motion system — CSS keyframes for breathing halos, floating panels, flowing thread light, light beams, gold dust and comets, with reduced-motion and small-screen degradation

Technical highlights

• Diagnosed a Chrome hit-testing bug where buttons inside 3D-tilted panels stopped receiving clicks under prefers-reduced-motion; removing preserve-3d fixed it and a regression test guards it.
• Row click, inline status and progress editing, Delete-key bulk delete and in-form templates reduce the common operations to a single interaction.
• Three adversarial review passes — code, browser QA, visual spec — fed 25+ fixes: date-range guards, modal timer races, long-text overflow, scrollbar leaks, count-up metrics.
• 80+ headless end-to-end checks cover CRUD, validation, templates, Gantt geometry, calendar year boundaries, XSS escaping, responsive width and click hit-testing.

Impact

• Ships as a hands-on artifact: visitors operate the whole tool in the browser, in English or Chinese, with no backend.
• Its design tokens and thread motif became the visual system of this site.