Stratos Wallet
A production-grade frontend system built to demonstrate senior and staff-level engineering.
Stratos Wallet is a fintech application engineered to the standard expected at companies like Stripe, Coinbase, Ramp, Shopify, and Vercel, with the architectural documentation to prove every decision was intentional.
What this project demonstrates
| Capability | Demonstrated by |
|---|---|
| Vertical slice architecture | features/ directory: each slice owns its own components, hooks, queries, and tests |
| Contract-first development | GraphQL schema defined before any component; types generated by codegen |
| Ledger-first data model | Balances, history, and analytics are computed, never stored |
| Real-time reliability | WebSocket with sequence numbers, deduplication, and missed-event replay |
| Resilience engineering | 15+ chaos presets, error boundaries, retry strategy, partial failure isolation |
| Live activity feed | Real-time WS event stream with seq tracking, replayed-event badges, connection status |
| Observability | Structured logging with trace IDs, sequence gap detection, chaos-aware error messages |
| State management | React Query and Zustand for server state, optimistic mutations, and toast notifications |
| Fintech realism | Idempotency keys, pending states, transfer reviews, duplicate submission handling |
Why it's built this way
Most demo fintech apps store a balance field. Real financial systems don't. Your bank records every debit and credit, then derives your balance by summing the ledger. This project follows the same principle.
The result: balance history, spending charts, and analytics are all projections of a single append-only ledger. Add a new analytics feature and you never touch the core data. You write a new query against the same source of truth.
This is event sourcing applied to the frontend data layer, a pattern used by every major financial platform and the kind of thinking that separates a staff-level interview answer from a senior-level one.
Architecture at a glance
src/
├── features/ Vertical slices, one per business domain
│ ├── auth/ Authentication, session management
│ ├── wallets/ Wallet list, wallet creation
│ ├── accounts/ Account detail, balance display
│ ├── transactions/ Transaction feed, infinite scroll, real-time updates
│ ├── transfers/ Fund transfer flow, idempotency, optimistic UI
│ ├── activity/ Live WebSocket event feed with seq tracking
│ ├── settings/ User profile and preferences
│ └── dashboard/ Balance trend, portfolio allocation, spending breakdown
│
├── shared/ Cross-cutting concerns
│ ├── hooks/ useWebSocket (seq, dedup, replay), useTransactionSubscription
│ ├── logger.ts createLogger() for structured logging with trace IDs
│ ├── components/ Layout, ErrorCard, QueryErrorBoundary, Toast, WidgetSkeleton
│ └── utils/ formatCurrency, validators
│
├── store.ts Zustand: WS status, notifications, chaos panel state
│
├── chaos/ Chaos simulation system
│ ├── ChaosContext.tsx Config state, 15+ failure presets, sync to MSW
│ └── ChaosPanel.tsx Slide-in console, toggle from sidebar
│
├── mocks/ MSW mock layer
│ ├── data.ts Single-store ledger: wallets, accounts, computed balances
│ ├── handlers.ts GraphQL and REST handlers with chaos injection
│ └── chaos.ts applyChaos(): latency, errors, drops, partial responses
│
└── graphql/
├── schema.graphql Contract-first schema, written before any component
└── generated.ts Codegen output, never edited by hand
Engineering phases
| Phase | Name | Core skill |
|---|---|---|
| 1 | Foundation & Architecture | System design, folder structure, shared kernel |
| 2 | Domain Modeling | Ledger-first data, GraphQL schema, type generation |
| 3 | State Management | React Query, cache strategy, optimistic mutations |
| 4 | Real-Time Systems | WebSocket, sequence numbers, deduplication, replay |
| 5 | Resilience Engineering | Error boundaries, chaos simulation, retry strategy |
| 6 | Observability | Structured logging, trace IDs, performance marks |
| 7 | Accessibility & UX | ARIA, keyboard navigation, live regions, skeletons |
| 8 | Testing & Production | Vitest, Playwright, CI/CD, deployment strategy |
Start reading
- Architecture overview: how the system is structured and why
- Architecture decisions: the full record of every major decision
- Features: per-feature documentation including failure modes
- Interview prep: real-time, state, system design, behavioural questions