Conservas Demonstration project
Lata — artisan fish conservas with a build-your-own-box shop
A loud, cannery art-deco store for a small Matosinhos cannery: every product is a fully drawn SVG tin label, a box builder fills an open SVG box tin by tin with honest savings maths, each tin opens a provenance dossier over a coastline map, and a twelve-month season band explains why one tin is sold out.
feitura.pt/demo/lata — Live
A cannery in Matosinhos does short runs of premium conservas — sardine, mackerel, tuna, octopus, cod — with collectible label art, and every tin states the boat, the auction and the canning date. Half their sales are gift boxes, but their store sells tins one by one like a supermarket. They need a build-your-own-box flow that raises average order value, packaging design doing the marketing, and a way to explain seasonality so a sold-out tin reads as honesty, not failure.
What's inside
- Cannery art-deco design system — paper cream, deep marinho and five per-species label colours — with zero photography
- A label-art system in pure SVG: every tin is a drawn label with species name, fish silhouette, wave/chevron/dot patterns and scalloped frame
- Box builder with 6 or 12-tin sizes, +/− steppers and a live SVG open box that visually fills, tin by tin, with the labels you picked
- House-suggestion quick fills (Clássica / Mar Alto / Picante) that load a full box in one click
- Honest maths: live single-tin comparison that congratulates your savings — or warns when the mix would be cheaper bought loose
- Gift flow with a handwritten-postcard message (140 characters, live count) and cloth-wrap option, ending in a stamped 'SEGUE POR CORREIO' confirmation
- Provenance explorer: every tin opens a dossier — fishing art, named boat, auction, catch and same-day sealing dates — pinned on an SVG coastline map
- Twelve-month seasonality band per species with a 'now' marker, honest out-of-season copy and one genuinely sold-out tin with waitlist email capture
- Mock MB Way / card checkout, B2B gift-box request flow and factory story in four illustrated steps
- Bilingual PT/EN copy, reduced-motion support, keyboard operability and 44 px touch targets throughout
Build log
- Art direction — the label-art system: five species colours, SVG fish silhouettes, patterns, scalloped frames, cream/marinho tokens
- Hero with the tin shelf, sticky nav with box chip, info strip and the eight-tin shop grid with provenance one-liners
- Box builder — sizes, steppers, house suggestions and the live SVG box preview that fills tin by tin
- Gift flow, honest single-tin maths, mock MB Way / card checkout and the stamped confirmation state
- Provenance explorer — deterministic dossiers per tin, coastline map with auction pins, boat marker and the Iceland detour
- Season band with 'now' marker, sold-out waitlist, factory steps, B2B flow, testimonials and stockists
- Full EN pass, reduced-motion and keyboard audit, contrast check on all five label colours, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
98
Accessibility
100
Best practices
100
SEO