GraphQL for the photo service, REST for Game Mate
The photo community uses GraphQL and Apollo; Game Mate uses REST and TanStack Query. How I chose their API contracts, database safeguards and tests, then added ESLint rules for code boundaries.
#react
Posts with this tag.
Bringing health-check reservations into the existing service
I brought health checks from phone inquiries into portal selection and payment. Adding them to existing programs required separate decisions for registration rights, examination choices, and returning from payment.
Tracing a Bottom Sheet drag crash with Sentry
A sheet crashed when users released a drag. Upgrading removed the failing code, but I still missed a title that scrolled away with the body.
Letting failed sections recover with Error Boundaries
One failed list query removed the menu and header too. I changed query placement along with Error Boundaries so a failed table or filter could be retried in place.
Tracing Next.js routing and cache problems
Searches left the URL unchanged, and a deployment stopped notices from closing in old tabs. Tracing routing, cookies, and form resets led me to reconsider which actions needed the server.
How I write declarative code
Some components made me read query sequencing and calculations before I could see the screen. These examples show how I separated composition from detail in review pages, filters, and coupon calculations.
The standards I developed while introducing tests
I reviewed which behaviors the tests checked and refined them against actual submission paths and server constraints.
Keeping working rules from a prototype migration
A prototype migration involved asking an agent to build similar features repeatedly. I put recurring corrections into skills, then found that short, absolute rules could produce the wrong changes too.
Handling coupon branches in payment history
Coupons made payment method alone insufficient to choose a view. Unsaved rows needed editable amounts and coupon clearing; saved rows needed to show coupon usage alongside the on-site payment.
Connecting two SSE streams to one chat interface
AI answers and counselor messages came from separate services. To put both in one conversation, I separated where messages were sent from where they were displayed.
Separating state and steps in a review form
Moving review writing to RHF and Zod also meant reconnecting treatment selection. I changed the sheet to cancel on close and write selections to the form only after confirmation.
Updating review likes in list and detail caches
A review like appears in both list and detail caches. I updated them together and restored saved snapshots when the request failed.
Moving reservation form state from Zustand to React Hook Form
Adding a family member left reservation dates behaving as if the old participant count still applied. I separated the server's family list from user selections and moved ongoing edits into React Hook Form.
Using TypeScript to catch mistakes at the call site
These are the TypeScript patterns I use to preserve inference and express relationships between values: satisfies, optional properties, generics, and mutually exclusive props.
Separating responsibilities in an Electron data-collection app
Adding a recruiting platform also copied the collection workflow. I introduced and then removed NestJS, while keeping request handling, collection order, and site-specific processing separate.