First extraction attempt: record-collector as a standalone frontend — turso, then Supabase, then frozen
Two months after the Bolt monolith hit working-demo state, we tried to peel record-collection off into its own frontend repo. Two days, three commits, one DB swap (turso out, Supabase in), then we set it down to think harder.
Michael StatonMusic Editoraugmented with Claude Code on Claude Opus 4.7 (1M context)Why Care?
The Bolt-era monolith proved the shape of the workshop but everything was welded into one React app. The next question was: can we pull one surface off cleanly? Pick the upstream-most one — record-collection, the part that everything else depends on — extract it into its own frontend repo, run it standalone, and see what falls out.
The README on that repo, written before the first commit, says it cleanest:
"Pulls in records in any way and makes them available to State via API, meant to be a remote to a monorepo."
That sentence is now the job description of the record-collector
microfrontend in the federated rebuild. The extraction
attempt didn't finish, but the conceptual contract it surfaced did.
What's New?
(Reconstructed from mpstaton/record-collector, three commits over 2025-03-03 → 2025-03-04.)
| Commit | Date | Message | What it did |
8cb156c | 2025-03-03 | "CSV upload is now working in state" | First running version. CSV → in-memory store. |
cc87bff | 2025-03-03 | "removed turso" | DB swap mid-flight. The turso.sql schema stayed in-tree as a tombstone. |
507bc57 | 2025-03-04 | "iterating on onHover and isSelected states" | UI polish on the RecordList. Last commit before freeze. |
RecordCollector.tsx— top-level page for the standalone frontend.DataConnectModal.tsx+DataSourceConnector.tsx— wiring up external data sources.DataImportModal.tsx+DataSourceImporter.tsx— the CSV + import-source UX. The CSV path is the one that actually shipped working.RecordList.tsx— render of records pulled into local state. The hover/selection iteration in the final commit suggests we were starting to think about what record-level interaction looks like before the next pipeline stage.store/supabase.tsalongsidestore/index.ts— Supabase as the post-turso backing store.StyleX for styling (
laerdal-theme.stylex.ts,tokens.stylex.ts) — a deliberate departure from the monolith's Tailwind, exploring whether a typed-tokens approach made more sense for an independently-deployable microfrontend.
Why We Stopped
Two days in, the question shifted from "can we extract this?" to "what's the shell this gets extracted into?" Extracting one frontend without the host that loads it as a remote is a Rube Goldberg machine — you have something runnable but no contract for how it composes with anything else.
That question — what's the federation contract, what hosts the remotes,
how do shared components travel — became the focus, and stayed the focus
through April / May / June. Tanuj came in at the end of July with the
answer: a Vite host shell with @originjs/vite-plugin-federation plus a
shared packages/ui. That work made record-collector's
re-extraction trivial when it landed a few days later.
mpstaton/record-collector is preserved private; the live submodule at
lossless-group/record-collector (the one the federated workshop actually
loads) is the lineage continuation, not a literal fork.
Backfilled from the mpstaton/record-collector repository on 2026-05-12. Source commits:
8cb156c,cc87bff,507bc57.