Test project23 Jan 2024
atria - a Vue server-list test task rebuilt into a warm infrastructure-ledger control panel
Remake- Vue 3
- TypeScript
- Vite
- Tailwind CSS
- vue-router
- OKLCH
- Responsive
- Accessible
A Vue 3 + TypeScript + Vite + Tailwind test task: a single-screen master/detail surface that loads a set of generated servers (each a customer id, hostname and type of vds, hosting or dedicated), lists them on the left and edits the selected one on the right, with generate, clear, save and delete. Kept the framework and rebuilt the rest. On correctness: the list rendered its v-for with a key bound to the non-unique customer id, so editing or deleting one row made Vue reuse the wrong DOM node and the selection latched onto the wrong entry - rekeyed to the unique id; the editor's Delete and Cancel buttons carried no type inside the form, so they defaulted to submit and quietly re-ran a save on every click - made into real buttons; Clear emptied the list but left the editor bound to a now-deleted record, an unsaveable dead end - wired to clear the selection too; and the home view re-seeded a fresh random list on every mount, discarding edits whenever you navigated away and back - changed to seed once. Smaller fixes: a select cast to the wrong element type, type-only symbols imported as runtime values, and the leftover Vite title, favicon and stub pages. The redesign is a committed warm 'infrastructure ledger': instead of the default dark-ops-console reflex, a light cream-and-ink OKLCH system (with a warm-espresso dark counterpart, never blue-graphite), monospace for every machine field so identifiers read as data, a clean grotesk for labels, and a ruled rack-rail plus a left index-number gutter as the signature, so the list reads like lines in a ledger. The two-pane layout is a real 390-to-1440 responsive pass - the panes stack on mobile and the editor scrolls into view when you pick a row, so a tap is never a no-op - and accessibility is a real floor: the clickable rows are real buttons with aria-pressed, a skip link, landmarks and a single h1, focus-visible rings, per-route titles, contrast met on both themes and reduced-motion guards. It also gains the polish the scaffold lacked: a theme toggle with a no-flash pre-paint script, toast feedback and inline confirm steps on destructive actions, empty, loading and error states, a built-out About page with a type legend, and a custom rack-tile favicon (SVG, PNG sizes, web manifest). Self-hosted on a Hetzner box behind Caddy with a grey-cloud DNS record, no Cloudflare proxy.