ChorusTestimonial Wall

Chorus takes a pile of customer reviews and turns them into a clean testimonial section you can paste into any website. You pick from five layouts and six themes, see a live preview at phone, tablet, or desktop width, and export the result. The main HTML export has no JavaScript in it at all.

The React export is a simplified version of the HTML one, not the same template, so the two can drift. CSS columns masonry reads top to bottom per column, which means "newest first" runs down the first column instead of across. None of this was hand-tested by real businesses. It runs, it passes its checks, and it is not battle-hardened.

This was one of the builds from the big one-shot night on September 19, when the coordinator launched parallel Claude Code builders off one shared brief. I set the scope: five layouts, a no-JS export as the headline constraint, React and JSON-LD exports next to it, and one rule I cared about most. The preview has to be the export, not a lookalike.

Claude Code wrote the core module first (wall.js), then 172 assertions against it, then the UI and the server. The first builder got cut off before it wrote anything up. A second Claude Code pass re-ran the tests, noticed both screenshots on disk were older than the code (the list counter still wrapped onto two lines), retook them one command at a time, and wrote the capture. Logged time was about 0.6 hours.

• A rotating "one at a time" spotlight does not need JavaScript. Stack every card in one grid cell, give each an animation-delay of index times six seconds, and generate one keyframe whose visible window is 100/n percent. The catch: the CSS depends on the card count, so the exporter emits per-card rules and a static fallback for a single card.
• If the preview and the export are the same string from the same function, the export cannot drift, and the tests can prove things about it, like no script tags and balanced markup in every layout.
• JSON-LD inside a script tag still needs </ escaped. The HTML parser ends the script at the first </script> no matter what the JSON quoting says, so a review that quotes HTML could break the page.
• Generated class names collide. The section got tw-marquee from the layout name, and an inner wrapper with the same class inherited its rules. It became tw-ticker, with a test that pins it.
• Multiply, round, divide is not reliable half-up rounding in floating point (2.675 becomes 2.67), so the average rating uses a small half-up helper.

This build used the pattern from projects #9 through #11: one DOM-free logic module that both the browser and verify.mjs import, so the shipped code is the tested code. It also ran on the small zero-dependency serve.mjs, here on port 5121. Headless Chrome screenshots have been touchy since #7, and this one added a new wrinkle: a loop that took both screenshots silently wrote nothing because its error output was thrown away. The fix was to run each command on its own with the output visible.

I would generate the React component from the same template as the HTML so they cannot drift, including half stars and source icons. I would also add a paste-a-Google-review parser, since retyping reviews is the real friction for the people this is for.