Trevor PaughSystems engineer
Trevor PaughProject Chronicles

Chronicles / Bopsmith

Active · Oct 2026 to present

Bopsmith

A browser music maker where every sound is made, not sampled, and a marketplace for selling what you make.

25 entries Stack Preact · Vite · PWA · Stripe · Docker · Caddy View on timeline

Bopsmith is a website for making music with tools that live on the page, paired with a marketplace where makers sell what they produce and buyers get a clear licence. The owner's pitch, on 8 October, was one sentence: a site that lets people make music with the tools placed there. Done means a product name, a matching website, a working product, and payments figured out.

Two decisions shape it. Every sound is synthesized in code from a per-user seed, so no two makers share a sample and nothing on the site can collide with a shared library. And the editor is built from sections and patterns rather than a timeline, designed for the phone first with the desktop as an equal. The plan, discovery log, and first round of mockups were finished on 9 October, the name chosen and the domain bought the same day. By 10 October every slice of version one was merged: editor, accounts, marketplace, payments, operations, search, and remixes. On 11 October the site went live on one rented server behind Cloudflare's proxy, with a final logo and payments switched off until the owner turns them on. The days after launch went to editor ergonomics on the phone and to a stranger's walkthrough of the live site, which found the store had shipped without its stylesheet and prompted a same-day hotfix. On 13 October the owner asked for continuous integration and deployment and chose a deploy button over automatic deploys; the first press went live the next day. Then, under a standing order to make progress without them, three builders ran at once on a slow-phone pass, a Spanish audit, and remix and language fixes. Over 14 and 15 October the studio gained an Advanced mode, built in slices against a hard size budget, while server-only slices hardened the money paths ahead of switching payments on. On 15 October the owner handed the deploy to the manager, which promptly found a proxy configuration that had never reached the live site, and drum accents landed with a new song format. When the hosted build allowance ran out, three slices through 18 October made the test suite fifteen times faster and stopped most runs from starting at all. On 19 October each synth engine was built once instead of twice, the build service began proving the production build plays every engine, and the work that needs no owner decision ran out.

Latest developments

Milestone

Nothing left without the owner

Two overnight slices cleared the last of the work the manager could do on its own. Each synth engine is now built once instead of twice, so the app stops caching two copies of the same sound code. And the build service now proves the production build plays every engine, through the background worker and without it. With both merged and the first live, the backlog that needs no owner decision is empty, and the manager's note to its successor is not to start product work without an answer.

Decision

Paying for CI once

The project's hosted build allowance ran out on 15 October, which turned continuous integration from a habit into a cost. Three slices followed. The server test suite boots its in-memory database once per worker instead of once per test, and runs about fifteen times faster. Pushes that touch only the manager's notes start no run at all, which had been four out of five runs. And a merge to main whose tree is identical to a pull request that already passed inherits that result instead of running again, with every doubt resolved in favour of running.

Design

Advanced mode, one slice at a time

The studio now has two modes. Basic is what shipped; Advanced adds a per-instrument effects rack with seven effects in a fixed chain, a set of new sound engines for bass, keys, lead, and drums, and a deeper mixer, all still synthesized in code from the maker's seed. It arrived as four merged slices and one in review, each built against a hard size budget for the first page load, with the engine rendering moved into a background worker so the page never stutters.

Design

Drum accents

Every drum hit can now be Soft, Normal, or Accent. In an Advanced song an Accents chip turns the drum grid into a level editor: tap a lit pad to cycle through the three, hold to clear it, drag to move it with its level intact. Accent pads get a corner mark and a bigger dot, Soft a smaller dot on a paler fill, and the desktop adds a Strength row under the selected lane. Levels are stored only on lit steps and dropped when every hit is Normal, so an old song saves byte for byte as before. The song format moved to version four to carry them.

Decision

The config that never arrived

Checking the live site after a deploy, the manager found that a security-policy change merged nine slices earlier had never reached it. The reverse proxy reads its configuration only when its container starts, and a changed file on disk does not make the deploy script restart it. The deploy now records which configuration the proxy started with, validates a changed one in a throwaway container, and recreates the proxy only if it passes. The same evening the owner handed the deploy button itself to the manager.

Decision

The song-version guard, and analytics after all

An app build older than Advanced mode strips the new fields from a song it saves, and the stripped copy syncs back over the richer one. The fix is a version number on the song format: the server keeps fields an older client does not understand, an outdated app refuses to export, and an edit made from an old build comes back as an undo step rather than a silent overwrite. The owner confirmed those defaults and said not to hold the deploy for it. In the same week they reversed the plan's no-analytics rule.

Design

Basic or Advanced, per song

The owner asked for a basic mode and an advanced mode: basic as the studio is now, advanced opening up a much larger choice of sounds and effects, closer to a full workstation. Mockup round three draws it. The mode lives in Song settings, one per song, and every song starts in Basic. Advanced adds a Sound tab per instrument with engine, oscillators, filter, envelope, FM, and voice groups, a choice of five melodic engines and three drum kits, a seven-effect rack per instrument, and a mixer with reverb and delay sends. The product's boundary held: still no samples, uploads, recording, timeline, or automation.

Decision

Four, go

The owner accepted the designer's defaults for round three in two words rather than re-deciding each question. Advanced mode and every effect in it are free; each new engine ships with two free presets and two for Pro members. The mode is per song, Basic by default, and a Basic maker hears an Advanced song exactly as it was made, with the panels hidden. Velocity and thirty-two steps stay; the extra cells go first if anything has to. The shared delay bus is dropped. Build order: the effects rack, then the engines, then the advanced mixer.

Decision

No beacon

The site's security policy was blocking a hosting provider's analytics beacon on every page, and the brief said to allow it if the fix was a one-liner. It was, and the builder did it. The reviewer pointed out that the project's own privacy text promises no analytics or third-party tracking. The manager reverted the change and put the question to the owner. The owner chose to keep the analytics and disclose them: the privacy policy now names the cookieless analytics, the beacon is allowed, and the licensing page was brought into line with the legal redline in the same merge.

Milestone

Three slices without the owner

The owner gave the manager a standing order to make as much progress as possible alone and in parallel. The manager wrote three briefs from the plan's unkept promises and the walkthrough's leftovers: a measured pass on slow phones, an end-to-end audit of the Spanish, and fixes around remixes and the language shown at sign-in. By the end of the day all three were reviewed, revised, and open as pull requests. The owner merged them in the order the manager wrote down and pressed the deploy button: every planned slice, one through sixteen, is now live.

Decision

Which language wins

An account made on an English device carried English with it, so signing in on a Spanish phone switched the whole site to English. The brief put the account's language above the browser's; the reviewer showed that still broke the case the walkthrough had found. The manager reversed the order: the device's own choice first, then the browser's language when it is one the site speaks, and the account's only after that.

Decision

CI and a deploy button

The owner asked for continuous integration and deployment. The manager proposed checks on every pull request and push to main, and a deploy that is a button rather than something that fires on merge. The owner said go. The first press from the button went live the next day, after two snags in the runbook were found and fixed.

Milestone

A stranger walks through

A tester who had never seen the product walked the whole of it, anonymously on the live site and with test accounts locally. The worst finding: every store page on bopsmith.com had shipped without its stylesheet since launch, and nobody had opened the live store on a phone. A hotfix went out the same day. The owner took three decisions from the rest of the list, and for the first time the manager merged the pull requests rather than the owner.

Design

Hold to pick up

Dragging a note between steps worked with a mouse and failed on the owner's phone: the drag ended the instant it began, and a vertical swipe on a lit pad played the note instead of scrolling the page. The cause was how browsers hand a touch to the element under the finger. The fix is a rule: on touch, hold a lit pad for a quarter of a second to pick it up, and a swipe before that scrolls. The owner's phone test passed all three checks.

Design

Paint, copy from, and a legend

Four editor extras in one slice: drag across empty pads to fill them in one stroke, copy a pattern into a section from another section, a colour legend under the song's sections on the phone, and full keyboard control of the pad grid. The store's first-load budget was raised once more to fit, after the builder's own fix was reversed.

Decision

Behind the orange cloud

The owner wanted the site behind Cloudflare's proxy. That breaks two things a plain server takes for granted: knowing a visitor's real address, and renewing certificates over port 80. Slice seven made the proxy safe to switch on as an opt-in, flipped after the first deploy had worked. A wrong diagnosis along the way, a firewall lock on the origin, and a weekly watcher that alerts rather than auto-updates.

Milestone

First deploy: bopsmith.com is up

Three days after the pitch, the site is live on one rented server in Europe, with the domain, mail, media storage, and backups set up by the owner from a step-by-step guide. All three containers healthy and certificates issued on the first try. Payments stay switched off for now by the owner's decision, and the store says so rather than pretending.

Design

Sliders, not dials

After using the new editor, the owner asked for three changes: a way to clear a drum pattern, notes that can be dragged between steps, and sliders in place of the sound dials, which were hard to read. All three were built in one slice, and the first-load budget was raised once, from 45 to 48 KB, to make room.

Design

The mockup becomes the spec

The editor matched the mockup's colours and little else. The owner asked why, and the answer was that the mockups had been briefed as intent, not spec, and nobody had compared the two side by side. A dedicated slice made mockups 01 and 02 the spec: self-hosted Bricolage Grotesque and Figtree, the mockup's radii and proportions, a top transport with Play song, drag handles to reorder sections, and List for sale always in view.

Design

A logo in three rounds

Four directions, then two refined plus a hybrid, then a final. The mark is a two-by-two grid of pads, one per instrument, each carrying its instrument's colour and a cut-out shape: a square for drums, a circle for bass, a key for keys, a diamond for lead. A one-colour pad grid is the fallback, the wordmark is set in Figtree and outlined, and the favicon is redrawn on a pixel grid so it survives sixteen pixels.

Milestone

Version one, code complete in two days

Every slice of the version one roadmap is merged: the editor as an offline-capable web app, accounts, saved projects and the Pro gate, the marketplace with browse, track pages and a listing flow, checkout, payouts with a hold, tax and licences, an admin and reports layer with takedowns and backups, search, and remixes with permanent credit and a fixed split. Legal drafts and a trademark search are done. Nothing is deployed: the service accounts, live payment checks, the deploy, and a review of the legal assumptions are all in the owner's hands.

Decision

It has a name: Bopsmith

The music site is called Bopsmith. It was picked from a shortlist where every candidate had already been checked for a free domain and low trademark risk, the rule the owner set when PermitBuzz was named. The owner chose it and bought the domain the same day.

Milestone

Plan done, repository made, no code yet

The planning phase for the music site finished: a plan, a discovery log, and a first round of mockups, all in a new private repository. The owner left before the final sign-off with instructions to proceed as far as possible without them, so the manager applied the defaults: mockups accepted, roadmap approved. The first build slice, the editor core as a progressive web app, is next.

Design

Sections and patterns, no timeline

The editor has no timeline. A song is a list of sections, a section is four instrument cells, and each cell holds a sixteen-step pattern. It is designed for the phone first, with the desktop as an equal rather than the original, after the owner asked whether a better phone design was possible than the ones already out there.

Decision

Sounds made, not sampled, and how the money works

Two early decisions for the music site. Every sound is synthesized in code from a per-user seed, so each maker's audio is unique and there is no shared sample library to collide with. The business is a hybrid: free tools with limits, a commission on marketplace sales that drops for makers on a paid plan, and fixed buyer licences in two tiers. The site makes no promise that a track is claim-proof; makers warrant that their work is original.

The story, from the beginning

Sounds made, not sampled, and how the money works

Two early decisions for the music site. Every sound is synthesized in code from a per-user seed, so each maker's audio is unique and there is no shared sample library to collide with. The business is a hybrid: free tools with limits, a commission on marketplace sales that drops for makers on a paid plan, and fixed buyer licences in two tiers. The site makes no promise that a track is claim-proof; makers warrant that their work is original.

Read the entry
I like this.

Sections and patterns, no timeline

The editor has no timeline. A song is a list of sections, a section is four instrument cells, and each cell holds a sixteen-step pattern. It is designed for the phone first, with the desktop as an equal rather than the original, after the owner asked whether a better phone design was possible than the ones already out there.

Read the entry
I wonder if you can come up with a superior phone design.

Plan done, repository made, no code yet

The planning phase for the music site finished: a plan, a discovery log, and a first round of mockups, all in a new private repository. The owner left before the final sign-off with instructions to proceed as far as possible without them, so the manager applied the defaults: mockups accepted, roadmap approved. The first build slice, the editor core as a progressive web app, is next.

Read the entry
Proceed with as much as you can without me.

It has a name: Bopsmith

The music site is called Bopsmith. It was picked from a shortlist where every candidate had already been checked for a free domain and low trademark risk, the rule the owner set when PermitBuzz was named. The owner chose it and bought the domain the same day.

Read the entry
Let's go with Bopsmith.

Version one, code complete in two days

Every slice of the version one roadmap is merged: the editor as an offline-capable web app, accounts, saved projects and the Pro gate, the marketplace with browse, track pages and a listing flow, checkout, payouts with a hold, tax and licences, an admin and reports layer with takedowns and backups, search, and remixes with permanent credit and a fixed split. Legal drafts and a trademark search are done. Nothing is deployed: the service accounts, live payment checks, the deploy, and a review of the legal assumptions are all in the owner's hands.

Read the entry
Proceed with as much as you can without me.

A logo in three rounds

Four directions, then two refined plus a hybrid, then a final. The mark is a two-by-two grid of pads, one per instrument, each carrying its instrument's colour and a cut-out shape: a square for drums, a circle for bass, a key for keys, a diamond for lead. A one-colour pad grid is the fallback, the wordmark is set in Figtree and outlined, and the favicon is redrawn on a pixel grid so it survives sixteen pixels.

Read the entry

The mockup becomes the spec

The editor matched the mockup's colours and little else. The owner asked why, and the answer was that the mockups had been briefed as intent, not spec, and nobody had compared the two side by side. A dedicated slice made mockups 01 and 02 the spec: self-hosted Bricolage Grotesque and Figtree, the mockup's radii and proportions, a top transport with Play song, drag handles to reorder sections, and List for sale always in view.

Read the entry
The song screen after the pass, on a 375-pixel phone: wordmark and transport at the top, the open section as a card of four instrument cells, Export and List for sale fixed at the bottom.
The song screen after the pass, on a 375-pixel phone: wordmark and transport at the top, the open section as a card of four instrument cells, Export and List for sale fixed at the bottom.

Sliders, not dials

After using the new editor, the owner asked for three changes: a way to clear a drum pattern, notes that can be dragged between steps, and sliders in place of the sound dials, which were hard to read. All three were built in one slice, and the first-load budget was raised once, from 45 to 48 KB, to make room.

Read the entry
The Sound tab on a phone: each setting is a labelled horizontal slider with its value and both ends named, instead of a rotary knob.
The Sound tab on a phone: each setting is a labelled horizontal slider with its value and both ends named, instead of a rotary knob.

First deploy: bopsmith.com is up

Three days after the pitch, the site is live on one rented server in Europe, with the domain, mail, media storage, and backups set up by the owner from a step-by-step guide. All three containers healthy and certificates issued on the first try. Payments stay switched off for now by the owner's decision, and the store says so rather than pretending.

Read the entry

Behind the orange cloud

The owner wanted the site behind Cloudflare's proxy. That breaks two things a plain server takes for granted: knowing a visitor's real address, and renewing certificates over port 80. Slice seven made the proxy safe to switch on as an opt-in, flipped after the first deploy had worked. A wrong diagnosis along the way, a firewall lock on the origin, and a weekly watcher that alerts rather than auto-updates.

Read the entry

Paint, copy from, and a legend

Four editor extras in one slice: drag across empty pads to fill them in one stroke, copy a pattern into a section from another section, a colour legend under the song's sections on the phone, and full keyboard control of the pad grid. The store's first-load budget was raised once more to fit, after the builder's own fix was reversed.

Read the entry
A drum pattern on a phone mid-stroke: three kick hits lit by one drag across empty pads.
A drum pattern on a phone mid-stroke: three kick hits lit by one drag across empty pads.

Hold to pick up

Dragging a note between steps worked with a mouse and failed on the owner's phone: the drag ended the instant it began, and a vertical swipe on a lit pad played the note instead of scrolling the page. The cause was how browsers hand a touch to the element under the finger. The fix is a rule: on touch, hold a lit pad for a quarter of a second to pick it up, and a swipe before that scrolls. The owner's phone test passed all three checks.

Read the entry
These all work!
A Keys pattern on a phone with a lit pad held and about to be dragged; the pad sinks slightly while the hold runs.
A Keys pattern on a phone with a lit pad held and about to be dragged; the pad sinks slightly while the hold runs.

A stranger walks through

A tester who had never seen the product walked the whole of it, anonymously on the live site and with test accounts locally. The worst finding: every store page on bopsmith.com had shipped without its stylesheet since launch, and nobody had opened the live store on a phone. A hotfix went out the same day. The owner took three decisions from the rest of the list, and for the first time the manager merged the pull requests rather than the owner.

Read the entry
Require one edit, yes to both.
The live store on a phone before the hotfix: bare links and default type, scrolling sideways, because its stylesheet never loaded.
The live store on a phone before the hotfix: bare links and default type, scrolling sideways, because its stylesheet never loaded.

CI and a deploy button

The owner asked for continuous integration and deployment. The manager proposed checks on every pull request and push to main, and a deploy that is a button rather than something that fires on merge. The owner said go. The first press from the button went live the next day, after two snags in the runbook were found and fixed.

Read the entry
Go.

Which language wins

An account made on an English device carried English with it, so signing in on a Spanish phone switched the whole site to English. The brief put the account's language above the browser's; the reviewer showed that still broke the case the walkthrough had found. The manager reversed the order: the device's own choice first, then the browser's language when it is one the site speaks, and the account's only after that.

Read the entry

Three slices without the owner

The owner gave the manager a standing order to make as much progress as possible alone and in parallel. The manager wrote three briefs from the plan's unkept promises and the walkthrough's leftovers: a measured pass on slow phones, an end-to-end audit of the Spanish, and fixes around remixes and the language shown at sign-in. By the end of the day all three were reviewed, revised, and open as pull requests. The owner merged them in the order the manager wrote down and pressed the deploy button: every planned slice, one through sixteen, is now live.

Read the entry
Do everything you can in parallel. Make as much progress on this project as you can without me.

No beacon

The site's security policy was blocking a hosting provider's analytics beacon on every page, and the brief said to allow it if the fix was a one-liner. It was, and the builder did it. The reviewer pointed out that the project's own privacy text promises no analytics or third-party tracking. The manager reverted the change and put the question to the owner. The owner chose to keep the analytics and disclose them: the privacy policy now names the cookieless analytics, the beacon is allowed, and the licensing page was brought into line with the legal redline in the same merge.

Read the entry
The licensing page after the redline: every track is made on Bopsmith, and the site relies on each maker’s promise of originality.
The licensing page after the redline: every track is made on Bopsmith, and the site relies on each maker’s promise of originality.

Four, go

The owner accepted the designer's defaults for round three in two words rather than re-deciding each question. Advanced mode and every effect in it are free; each new engine ships with two free presets and two for Pro members. The mode is per song, Basic by default, and a Basic maker hears an Advanced song exactly as it was made, with the panels hidden. Velocity and thirty-two steps stay; the extra cells go first if anything has to. The shared delay bus is dropped. Build order: the effects rack, then the engines, then the advanced mixer.

Read the entry
4 go.

Basic or Advanced, per song

The owner asked for a basic mode and an advanced mode: basic as the studio is now, advanced opening up a much larger choice of sounds and effects, closer to a full workstation. Mockup round three draws it. The mode lives in Song settings, one per song, and every song starts in Basic. Advanced adds a Sound tab per instrument with engine, oscillators, filter, envelope, FM, and voice groups, a choice of five melodic engines and three drum kits, a seven-effect rack per instrument, and a mixer with reverb and delay sends. The product's boundary held: still no samples, uploads, recording, timeline, or automation.

Read the entry
Go.
Round three, screen nine: the mode switch in Song settings, and the Advanced Sound tab for a lead instrument.
Round three, screen nine: the mode switch in Song settings, and the Advanced Sound tab for a lead instrument.

The song-version guard, and analytics after all

An app build older than Advanced mode strips the new fields from a song it saves, and the stripped copy syncs back over the richer one. The fix is a version number on the song format: the server keeps fields an older client does not understand, an outdated app refuses to export, and an edit made from an old build comes back as an undo step rather than a silent overwrite. The owner confirmed those defaults and said not to hold the deploy for it. In the same week they reversed the plan's no-analytics rule.

Read the entry
Keep the song-version guard defaults: refuse export from an outdated app, old-build edits return as an Undo step, do not hold the deploy for it.

The config that never arrived

Checking the live site after a deploy, the manager found that a security-policy change merged nine slices earlier had never reached it. The reverse proxy reads its configuration only when its container starts, and a changed file on disk does not make the deploy script restart it. The deploy now records which configuration the proxy started with, validates a changed one in a throwaway container, and recreates the proxy only if it passes. The same evening the owner handed the deploy button itself to the manager.

Read the entry
Deploy it yourself. You don't have to keep asking me to deploy.

Drum accents

Every drum hit can now be Soft, Normal, or Accent. In an Advanced song an Accents chip turns the drum grid into a level editor: tap a lit pad to cycle through the three, hold to clear it, drag to move it with its level intact. Accent pads get a corner mark and a bigger dot, Soft a smaller dot on a paler fill, and the desktop adds a Strength row under the selected lane. Levels are stored only on lit steps and dropped when every hit is Normal, so an old song saves byte for byte as before. The song format moved to version four to carry them.

Read the entry
Go: dispatch slice 34 drum accents once slice 33 merges.

Advanced mode, one slice at a time

The studio now has two modes. Basic is what shipped; Advanced adds a per-instrument effects rack with seven effects in a fixed chain, a set of new sound engines for bass, keys, lead, and drums, and a deeper mixer, all still synthesized in code from the maker's seed. It arrived as four merged slices and one in review, each built against a hard size budget for the first page load, with the engine rendering moved into a background worker so the page never stutters.

Read the entry
Advanced mode opens up the ability to choose from large varieties of different effects and sounds... much more like a full DAW.

Paying for CI once

The project's hosted build allowance ran out on 15 October, which turned continuous integration from a habit into a cost. Three slices followed. The server test suite boots its in-memory database once per worker instead of once per test, and runs about fifteen times faster. Pushes that touch only the manager's notes start no run at all, which had been four out of five runs. And a merge to main whose tree is identical to a pull request that already passed inherits that result instead of running again, with every doubt resolved in favour of running.

Read the entry
Wait for CI to run green on PR #45, then merge.

Nothing left without the owner

Two overnight slices cleared the last of the work the manager could do on its own. Each synth engine is now built once instead of twice, so the app stops caching two copies of the same sound code. And the build service now proves the production build plays every engine, through the background worker and without it. With both merged and the first live, the backlog that needs no owner decision is empty, and the manager's note to its successor is not to start product work without an answer.

Read the entry