Test project · 7 Jun 2024

hadar - a Rick and Morty wiki rebuilt as a classified dossier

• Nuxt 3
• Vue 3
• TypeScript
• Tailwind
• Cloudflare

A three-section wiki over the public Rick and Morty API (characters, locations, episodes), rebuilt end to end. The original leaned on an unstyled component library and a stock dark theme; this version drops the library entirely for hand-built accessible components - a native paginator, a fieldset radio group, a custom file card - on one OKLCH design system in a deep teal-ink 'interdimensional dossier' direction, portal-green used only as the live signal, mono metadata, no pure black or white. Real defects went with it: a paginator off by one between the 1-based API and the 0-based widget, a gender filter sharing its radio name with status so the two groups fought, an episode card labelling its air date as 'type', a watchEffect that read the URL while writing it and polluted history, and the API's 404-for-no-matches surfaced to users as a scary error instead of an empty state. The layout is a genuine 390-to-1440 responsive pass - collapsible filters, a single-to-three-column grid, a sticky readout paginator - and it sits on a full accessibility floor: skip link, landmarks, one h1 with a correct heading order, accessible names, keyboard-operable cards with visible focus, and a reduced-motion guard over every animation. The signature is the character card: a redacted file that declassifies the portrait on hover, focus or tap, with a status rubber-stamp driven by the subject's state. Believable copy throughout, real loading, empty and error states, and a proper footer. Nuxt 3 + Vue 3 + TypeScript + Tailwind, statically generated and deployed on Cloudflare Pages.