Systems

How I Design Systems

I start with the problem, not the code.

I first understand the requirements, the users, and what the feature is actually solving. Then I turn that understanding into a clear technical design — mapping the user journey, sequence of interactions, UI components, APIs, database models, and the services behind them.

Problem → Requirements → User Flow → Architecture → UI → APIs → Data → Implementation

Explore the interactive diagrams to see how I break down a feature, connect the pieces, and make the technical decisions that bring it to life.

Authentication & Authorization

Secure access patterns

Who is the user, and what are they allowed to do? Pick a topic below to walk through the flow step by step.

Distributed Systems

Architecture patterns

Backend for Frontend

BFF + OIDC/OAuth PKCE via Google — Redis stores PKCE and sessions, server-side token exchange, HttpOnly cookie, Resource API proxy.

OIDC + OAuth 2.0 Auth Code + PKCE (BFF)solid = request/response · dashed = redirect · HTTPSUserBrowserBFFOAuth ClientRedisPKCE + SessionGoogleOIDC ProviderResource APIProtectedStage 1 — Start login + PKCE1. Click Login with Google2–3. Generate PKCEcode_verifier (random)challenge = BASE64URL(SHA256)4. Store code_verifier in Redis5. Redirect /authorize + PKCE params6–11. Google login + consent12. Auth code issuedredirect_uri?code=&state=13. Redirect to BFF /callback14. GET /callback?code=…PKCE params sent to Googlescope=openid email profile · response_type=code · code_challenge_method=S256SummaryBFF owns PKCE + tokens — browser only gets session cookie · Google OIDC · access token calls Resource APITokens never exposed to JavaScript — HttpOnly session, server-side Redis storeBFF stores code_verifier — only the challenge goes to Google

BFF pattern with OIDC + OAuth 2.0 authorization code and PKCE via Google. The BFF stores the code_verifier in Redis, redirects the user to Google, exchanges the auth code server-side, stores tokens in session, and sends only an HttpOnly cookie to the browser. Later requests proxy to the Resource API with the access token.

Swipe left to explore the full diagram →