Test project 20 Jun 2023
dubhe - a users-and-posts board rebuilt into a card-catalog work surface
- Vue 3
- TypeScript
- Vue CLI
- SCSS
- vee-validate
- vuedraggable
- OKLCH
- Responsive
- Accessible
A Vue 3 + TypeScript (Vue CLI / webpack) test task: a single board that fetches ten authors and their posts from the JSONPlaceholder API and lets you create, edit, delete and drag posts from one author's column to another. Kept the framework and rebuilt the rest. On correctness: the add and edit forms imported a yup helper that did not exist and threw on mount so validation never ran - rewired to a correct object/string schema with translated messages; the data layer fetched authors and then each author's posts in series with no feedback - replaced with a parallel Promise.all load that resets cleanly on refetch and carries an explicit per-author status so each column shows its own loading, empty and error state; and the original mounted a separate hidden edit modal inside every post card (around a hundred instances, each its own vue-final-modal), which was collapsed into one shared edit modal driven from the board, the card just emits an edit request. Drag-and-drop between columns (vuedraggable over a shared SortableJS group) was made reliable and given a FLIP animation so the cards a moved post displaces slide up or down in place, with a keyboard 'move to author' select as a non-drag fallback. The redesign is a committed OKLCH 'Atelier Ledger' card-catalog system: a warm-paper canvas, ochre accent, Fraunces display over Inter body, columns rendered as labelled folder tabs and posts as index cards, with a canonical light theme and a polished dark variant. The whole thing is a full-height app shell - the page itself never scrolls; the column track scrolls horizontally and each column scrolls its own posts vertically, so on a 1080 screen the header, board and footer stay fixed in frame. Motion is ease-out-expo throughout: columns reveal with a stagger, the header eases in, cards lift on hover, and modals have matched enter and exit animations. Accessibility is a real floor - a skip link, landmarks and a single h1, accessible names on every icon button and the move control, focus-visible rings, an aria-live announcement region for create/edit/delete/move, and reduced-motion guards - and the layout is a genuine 390-to-1440 responsive pass that collapses the horizontal column track into a stacked single-column flow on phones. Ships with a custom card-catalog favicon (SVG, PNG sizes, web manifest). Vue 3 + TypeScript + Vue CLI + vee-validate + vuedraggable + vue-final-modal + SCSS, self-hosted on a Hetzner box behind Caddy.