pirateswap.com

## context

Steam users trade in-game items with each other — prices, balances and order states change every second, and every change has to show up without anyone pressing refresh.

## what I did

1. 0a4b7d1init: architected the frontend from scratch
2. f3e019bstate: React Query for server state, XState for the flows
3. c0d93b8realtime: live market data & trading over websockets
4. 7e51f02perf: kept it smooth for thousands of daily users
5. 41ac7e3lead: reviews, planning, sync with the product owner

## architecture

┌───────────────┐   ws    ┌───────────────┐        ┌──────────────┐
│  market feed  │ ──────▶ │  query cache  │ ─────▶ │   React UI   │
└───────────────┘         └───────┬───────┘        └──────┬───────┘
                                  │ invalidate             │ events
                          ┌───────▼───────┐        ┌──────▼───────┐
                          │   REST / API  │ ◀───── │    XState    │
                          └───────────────┘        └──────────────┘
                                        trade · deposit · withdraw

## decisions

1. 01.md
   Server state in React Query, flows in XState — never mixed.The cache answers “what is true now”, machines answer “what can the user do next”. Each stays small and testable.
2. 02.md
   Websocket events write into the cache.Every view reads one source of truth, so a price tick updates the list, the detail and the trade dialog at once.
3. 03.md
   Flows as explicit states.Trades have many in-between states (pending, confirming, failed, retry). Making them states rather than flags removed a class of “impossible” UI bugs.

## results