Skip to study
EW Studio

2021 → 2026 / Willify

A vibe is only the beginning.

An AI DJ that has to prove the song exists before it reaches your playlist.

Role
Product, design direction and engineering lead, built with Claude Code
Timeline
2021 original · rebuilt 19–25 October 2026
Stack
React 19 · TypeScript · TanStack Router · IndexedDB
Open Willify ↗View the repository ↗The shared platform →

Previews courtesy of iTunes. Listen on Apple Music Live catalogue search recording; portfolio playback is silent. No preview audio is embedded.

Capture actions, source links and limits

See the phone layoutWillify live phone interface at 390 pixels wide
14 of 16

Matches in one documented real Gemini playlist. Two suggestions were dropped; this is not a global accuracy rate.

The rebuild

Keep the spark.
Rebuild the product.

2021 → 2026

Willify started in 2021 as a Spotify player: search a song, play it in the page. Only Spotify Premium users could play anything, the client ID was hard-coded, and the login server on Heroku has been dead for years. What was worth keeping was the promise, search a song, play it instantly, and the name.

Reconstructed from the archived original source with React 18, esbuild and Dart Sass; the original CRA 4/node-sass toolchain was not rebuilt. Only the original login screen is rendered; the removed Spotify login service is not restored. Revision and substitutions

2021 source reconstruction → live 2026 product. Same 1440 × 900 viewport, uncropped. Historical layout rendered with compatibility tooling; it does not demonstrate the old services working.

Willify, live 2026 interface
2026 / live product
Willify, 2021 source reconstruction
2021 / reconstruction

The idea

A galaxy pressed into a record.

Bricolage Grotesque, violet and mint turn the galaxy into a vinyl record. Verification precedes the library; playback keeps the source credit in view.

Willify

Bricolage Grotesque / original SVG mark

Violet / #8F72FFMint / #6CF2C2

Brand colours above; text and focus accents adapt for contrast in each portfolio theme. Design source ↗

Three engineering decisions

The constraint shapes
the implementation.

Verify the catalogue, not model confidence

Constraint. The model can invent tracks or choose covers

Decision. match normalized artist/title against iTunes, reject karaoke/tribute substitutions, prefer originals, and check as output streams

Result. 14 of 16 suggestions matched in the documented real Gemini playlist; 2 dropped. Checks run three at a time.

Source and evidence limits

willify/README.md → “The AI can't add a song that doesn't exist”, naming src/lib/match.ts. This is one example, not a global accuracy rate.

Read the pinned README ↗

Make source terms and the shared budget visible

Constraint. Apple's promotional preview rules and API budget constrain both UI and traffic

Decision. direct Apple streaming, official unaltered Apple Music badge/link and iTunes credit, no Spotify/YouTube Music buttons, no audio/artwork service-worker cache; proxy JSON through one shared token bucket

Result. about 20 calls/minute, queue up to 15 seconds, then 503 music_busy; cache JSON 6–24 hours, lookup up to 50 IDs at once.

Source and evidence limits

willify/README.md → “Apple's terms shaped the interface”, “No competitor buttons”, “One iTunes budget for everyone”. Keep licensing and quota as separate parts of this decision, not proof that caching grants media reuse rights.

Read the pinned README ↗

Crossfade on real audio nodes

Constraint. Cutting between previews breaks continuity

Decision. two audio decks feed Web Audio gain nodes and one analyser

Result. a 1.5-second crossfade, with direct Apple CORS-enabled streams and Media Session controls.

Source and evidence limits

willify/README.md → “Two decks, one analyser”. This is implemented timing, not measured perceptual quality.

Read the pinned README ↗

Architecture

Follow one request.

Vibe01Server template02iTunes check03Accepted library04Two audio decks05VibeServer templateiTunes checkAccepted libraryTwo audio decks
The server suggests songs. The browser checks artist and title against iTunes, three at a time, before accepting them. A shared catalogue bucket caches JSON only. Preview streams travel directly from Apple into two browser audio decks, gain nodes and one analyser; audio and artwork are not service-worker cached.

Quality proof / evidence, with scope

Show what was checked.

App evidence

README reports mobile landing performance 0.98.

Repository report, read 26 October 2026. These app scores were not rerun for this portfolio.

Commands and evidence in the README ↗

This portfolio page

Static HTML, deferred decorative Stage, explicit media intent and complete reduced-motion content.

performance
98/100
accessibility
100/100
best practices
100/100
seo
100/100

Lighthouse mobile, light theme, cold cache, simulated throttling. Measured 2026-10-26. Gzip static export on localhost.

Eight page cases across Chromium/WebKit, phone/desktop and both themes; two axe audits with zero violations. WebKit playback and real Safari hardware remain unverified.

Read the dated portfolio check results ↗

The honest next step

What remains.

This is preview-based listening, not full-track playback. Refining the preview experience is a proposal; competitor service buttons were deliberately omitted.

Next / NatourA plan with its feet on the ground. ← Back to studio index