Field Notes
Architecture decisions, interface work, and the moments when the browser tells the truth.
proof sheetA React wallet SDK embedded in Bootstrap, WordPress, and Tailwind sites cannot rely on ordinary CSS scoping. Shadow DOM solves the style boundary, but Radix UI portals need extra handling. This note covers the working setup.
Each note stays tied to the system it had to survive.
8 notes in view
Rillex Casino uses three state layers: the URL for shareable UI state, Zustand for client-only state, and TanStack Query for server data. This gives its 22 feature modules clear boundaries instead of one overloaded store.
I inherited a 75K-line crypto casino where three transaction hooks had grown to roughly 1,500 lines each, mixing form state, gas estimation, API calls, and execution. I split them into 21 focused hooks across 4,845 lines, so failures could be investigated in the relevant module.
HypeMint needed anti-whale vesting contracts for EVM in Solidity and Solana in Rust, despite my frontend background. I used GitHub Copilot to help draft them, then relied on a manual boundary-testing protocol to check the generated code.
EduVisa called for a one-to-one recreation of a complex Figma file, including overlapping SVG morphs, 190px blur shadows, mouse-reactive backgrounds, and eight breakpoints up to 3,840px. With no backend, the project needed a custom component and design-token system rather than an off-the-shelf library.
MemeWin's Zustand store has 32 focused slices, eight branch aggregators, and one root store. Immer handles mutable-looking updates and reselect handles memoized selectors. This structure kept a 75K-line TypeScript codebase manageable.
MemeWin has 11 colour themes, each with light and dark variants, for 22 CSS rule sets. It uses Tailwind v4 and the OKLCh colour space, switches without a reload, and lets users choose a Google Font or upload a `.ttf` or `.otf`. This note covers how the first paint stays free of a theme flash.
MemeWin's SEO metadata was spread across more than 50 files. I moved it to a backend-driven system using Prisma, a JSON-LD schema generator, server-rendered metadata, and ISR revalidation. An admin can update an SEO page in the CMS and publish the change without a frontend deployment.
Avios, SkyMiles, and MileagePlus do not carry the same value. Flynt's valuation engine converts more than 15 airline loyalty currencies into cash-equivalent values so users can compare what their points are worth. It is configuration-driven, runs on the client, and completes in under 50ms.
Notes into practice
Read the field notes alongside the production systems that shaped them.
