Demo website for a fictional violin-making workshop in Cremona. Every instrument can be heard with the spectrum of its sound, and in the listening room two instruments play the same passage: you switch between them without stopping the music. Plus an in-browser tuner, the making of a violin told as you scroll, a private area for clients and an admin panel anyone can try.
**Bottega Sonora** is a violin-making workshop in Cremona **that doesn't exist**: the luthier, Agnese Rovida, the instruments and the photos are invented, and the site says so at the top of every page. The recordings, on the other hand, are real, from freely licensed archives. It is a showcase website with four things a showcase website usually doesn't have:
- **Every instrument can be heard.** The player, built on the Web Audio API, draws the spectrum as it plays and, below it, the fingerprint: the average spectrum of the passage. In the listening room two instruments play the same passage, note for note and at the same loudness, and A and B switch between them without stopping the music. - **An in-browser tuner**, free, for violin, viola, cello and guitar. It finds the note with the McLeod method and tunes bowed strings in pure fifths, the way string players tune by ear. The sound from the microphone never leaves the phone. - **How a violin is made**, told as you scroll: ten scenes, a drawing that grows stage by stage, and photos of the work landing one on top of another, like prints on the workbench. In the last one, a tap lets you hear the violin. - **A private area for clients who commission an instrument**: a link with the stages and the photos, which the luthier can switch off or replace in two taps.
The hard parts, and how they were solved:
- **The sound.** No free archive has the same piece played on several instruments. The comparison uses 19 short passages (open strings, a scale, pizzicato) from the University of Iowa and Ircam's TinySOL, assembled note by note on a fixed grid. - **Safari on the iPhone.** The microphone stopping when the screen locks, permission denied, the page opened inside another app: the tuner recognises each case and says what to do. - **The client link.** The code sits after the “#”: it never appears in an address that reaches the server, so it never ends up in the logs either. The database keeps only its hash, and the photos of the stages open through signed addresses that expire. - **The photos**, 70 of them, generated locally with Z-Image-Turbo. The model kept drawing finished violins even halfway through the work, so the stages show the wood and the tools.
**Visitors can try the admin panel** without an account. Their changes stay in their browser, where the same server logic runs on a copy of the data; an automated test sends the same 687 requests, across all 62 routes, to the server and to the trial, and expects identical answers. The panel is designed for the phone: commissions, instruments with photos and recordings, enquiries, cookie-free visit statistics.
Stack: Vue 3 and TypeScript, shadcn-vue and Tailwind CSS, GSAP and Lenis, Fastify and MongoDB, shared Zod schemas; every change goes through 323 automated tests and reaches my server through a GitHub Action.
Design, full-stack development and deployment · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP