pirateswap.com

## kontekst

Użytkownicy Steama handlują między sobą przedmiotami z gier — ceny, salda i stany zleceń zmieniają się co sekundę, a każda zmiana musi pojawić się bez odświeżania strony.

## co zrobiłem

1. 0a4b7d1init: zaprojektowałem frontend od zera
2. f3e019bstate: React Query dla stanu z serwera, XState dla procesów
3. c0d93b8realtime: dane rynkowe i handel na żywo przez websockety
4. 7e51f02perf: płynność dla tysięcy użytkowników dziennie
5. 41ac7e3lead: code review, planowanie, współpraca z product ownerem

## architektura

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

## decyzje

1. 01.md
   Stan z serwera w React Query, procesy w XState — nigdy razem.Cache odpowiada na pytanie „co jest prawdą teraz”, maszyny — „co użytkownik może zrobić dalej”. Każde z nich zostaje małe i testowalne.
2. 02.md
   Zdarzenia z websocketów trafiają do cache.Każdy widok czyta z jednego źródła prawdy, więc zmiana ceny aktualizuje listę, szczegóły i okno handlu jednocześnie.
3. 03.md
   Procesy jako jawne stany.Handel ma wiele stanów pośrednich (oczekuje, potwierdzanie, błąd, ponowienie). Zamiana flag na stany usunęła całą klasę „niemożliwych” błędów w UI.

## wyniki