System Designhard
Design frontend-backend contracts for authorization workflows
Design API contracts between a React frontend and backend services for policy search, policy editing, access simulation, publishing, and audit history. Cover typing, errors, optimistic updates, versioning, and security.
Asked at PlainID
Answer
Interview framing: Good frontend-backend contracts reduce ambiguity. For authorization workflows, they also prevent dangerous UI assumptions.
Contract design:
- Typed DTOs:
- Define request/response types for policies, subjects, resources, actions, simulation results, and audit entries.
- Prefer explicit enums for status/effect over loose strings.
- Include server-generated IDs, versions, timestamps, and actor metadata.
- Error model:
- Return structured errors with code, message, field errors, and retryability.
- Distinguish 401, 403, 404, validation errors, conflicts, and server failures.
- Avoid leaking sensitive policy details in errors.
- Concurrency:
- Use policy versions or ETags to avoid overwriting someone else’s change.
- Show conflict resolution UI when a draft is stale.
- Publishing flow:
- Separate draft save from publish.
- Return validation warnings and policy impact summaries before activation.
- Audit publish events with actor, diff, and timestamp.
- Optimistic updates:
- Safe for low-risk UI preferences.
- Be cautious for policy changes; prefer confirmed writes for security-sensitive state.
- Versioning:
- Keep contracts backwards-compatible across rolling deployments.
- Add fields instead of changing meaning.
- Use generated clients or schema validation when available.
Good closing: "For authorization products, the frontend can guide the workflow, but the backend contract must be explicit about decisions, errors, versions, and auditability."
Source: PlainID senior frontend job description