What is a frontend platform golden path?

The blessed workflow every team follows: scaffold → lint → test → build → preview → deploy, with automated guardrails instead of manual approvals.

When should you use a monorepo?

When teams share code, need atomic refactors, and can invest in Turborepo/Nx for affected-only builds. Align with org structure — monorepo doesn't fix wrong team boundaries.

What is the internal SDK pattern?

Wrap cross-cutting concerns (auth, analytics, feature flags) in versioned @corp/* packages with semver and codemods — product teams import SDKs instead of reimplementing.

Frontend Platform & Developer Experience

Monorepo, CI/CD golden path, preview environments, codegen, and internal SDKs for platform engineers.

Module 17 · Frontend Platform & Developer Experience

Monorepo vs polyrepo, CI/CD golden path, preview environments, codegen, lint gates, dependency policy, and internal SDK patterns for platform engineers.

Build the golden path for 30+ teams: monorepo topology, CI/CD pipelines, preview environments, API codegen, lint gates, dependency policy, and internal SDKs that wrap auth, flags, and analytics.

About this module

Frontend platform engineering is how staff-level engineers scale developer velocity across dozens of teams — not by reviewing every PR, but by building the golden path everyone ships through.

This module covers repository topology (monorepo, polyrepo, MFE), CI/CD pipelines with affected-only builds, preview environments per PR, OpenAPI/GraphQL codegen, lint gates, dependency policy, and internal SDK patterns.

You will learn to design self-service platforms with guardrails: bundle size gates, Lighthouse CI, merge queues, and adoption metrics that prove platform ROI.

Staff track module — complete Senior Track (Modules 1–15) and Staff Frontend System Design (Module 16) first.

Why this matters

Staff and principal interviews increasingly test platform thinking — how you scale developer velocity without becoming an approval bottleneck. Golden path CI, preview envs, and internal SDKs are the patterns that separate senior feature work from staff platform strategy.

Key topics covered

Monorepo vs Polyrepo
CI/CD Golden Path
Preview Environments
Codegen
Lint Gates
Dependency Policy
Internal SDK

Where you'll use it

Designing CI/CD for a monorepo with 50 packages
Rolling out preview environments per PR
Creating @corp/auth-sdk to eliminate duplicated token refresh
Enforcing bundle size and Lighthouse gates in CI
Choosing monorepo vs MFE based on Conway's Law

Frontend Platform & Developer Experience

The golden path that 50 teams ship through without friction.

A frontend platform is the internal product that product teams build on — app shell, design system, CI/CD, codegen, and SDKs. Staff engineers design platforms that maximize developer velocity while enforcing quality guardrails.

•Golden path — the blessed way to create, test, and deploy a feature
•Self-service with guardrails — not approval gates on every PR
•Measure DX: time-to-first-PR, deploy frequency, build time p95
•Platform team is an enabling team — success = adoption metrics

Monorepo vs Polyrepo vs MFE

Repository topology drives CI cost, dependency sharing, and team autonomy.

Model	Best for	Trade-off
Monorepo	Shared code, atomic refactors, one CI graph	Scale requires Turborepo/Nx; large clone
Polyrepo	Hard team boundaries, independent versioning	Duplication; cross-repo changes painful
MFE + polyrepo	Independent deploy per product surface	Runtime integration complexity
Monorepo + MFE	Shared DS/tooling + deployable remotes	Highest platform investment

Staff decision

Pick repo topology based on Conway's Law — if teams don't align to deploy boundaries, MFE won't help. Many orgs start monorepo, extract remotes later.

CI/CD Golden Path

Every team follows the same pipeline — lint, test, build, deploy.

•PR pipeline: lint → typecheck → unit tests → integration → build → preview deploy
•Main pipeline: same + E2E smoke → canary → progressive rollout
•Affected-only builds — Turborepo remote cache cuts CI minutes 60–80%
•Merge queue — serializes main merges; prevents broken main
•Artifact immutability — deploy exact build hash; rollback = redeploy previous

# Golden path template (conceptual)
on: pull_request
jobs:
  validate:
    - pnpm lint && pnpm typecheck
    - pnpm test --filter=...[origin/main]
    - pnpm build --filter=...[origin/main]
  preview:
    - deploy-preview --pr=$PR_NUMBER

Preview Environments

Every PR gets a URL — the highest-ROI platform feature.

•Vercel/Netlify preview URLs per PR — zero config for Next.js apps
•Ephemeral envs auto-destroy on merge — control cloud cost
•Seed data strategy — anonymized staging snapshot or fixtures
•Auth in previews — SSO test realm or magic-link bypass for QA
•Comment bot posts preview URL on PR — designers review without deploy access

Concern	Pattern
Cost	Cap concurrent previews; TTL 7 days
Secrets	Non-prod keys only; never prod DB
MFE previews	Shell loads remote from preview URL via manifest override

Codegen & API Contracts

Generated types eliminate client-server drift.

•OpenAPI → orval/openapi-typescript for REST clients
•GraphQL → graphql-codegen for hooks and types
•Codegen runs in CI — PR fails if schema changed without regen
•Internal SDK packages wrap generated clients with auth + retry
•Staff depth: consumer-driven contract tests (Pact) before breaking API

// Generated hook pattern
import { useGetUser } from "@corp/api-client";

function Profile({ id }: { id: string }) {
  const { data, error, isLoading } = useGetUser(id);
  // Types match OpenAPI schema — drift fails CI
}

Lint Gates & Quality Bars

Automated enforcement beats documentation.

Gate	Tool	Blocks merge when
Lint + format	ESLint, Prettier	Style violations or a11y rules fail
Types	tsc --noEmit	Type errors anywhere in affected packages
Bundle size	size-limit / custom	Main chunk exceeds budget
Lighthouse CI	lhci	LCP/CLS regression vs baseline
A11y	eslint-plugin-jsx-a11y, axe in CI	Critical violations

Gradual adoption

New rules ship as warnings for 2 sprints, then errors. Provide codemods when enabling strict rules — don't block 50 teams overnight.

Dependency Policy

Control supply chain risk without blocking innovation.

•Allowlist registry — npm internal proxy; block unknown scopes
•Renovate/Dependabot with auto-merge for patch minors in devDeps
•License scan — block GPL in proprietary products if policy requires
•npm audit in CI — fail on critical; waiver process with expiry date
•Single React version — resolutions/overrides in root package.json
•New dependency RFC for packages >50kb or unmaintained >2 years

Internal SDK Pattern

Wrap cross-cutting concerns once — auth, analytics, feature flags.

Product teams import @corp/auth-sdk instead of reimplementing token refresh, analytics, or flag clients.

SDK	Encapsulates	Versioning
@corp/auth-sdk	SSO, refresh, session	Semver; shell pins minimum
@corp/analytics	Consent-gated events, PII redaction	Major = event schema change
@corp/flags	LaunchDarkly wrapper, local overrides	Patch-safe defaults
@corp/ui	Design system components	See Design Systems module

•SDKs are thin — delegate to vendor SDKs where possible
•Tree-shakeable ESM exports; document bundle cost per import
•Migration guides + codemods on major bumps
•Dogfood in platform team apps before mandating adoption

Interview Takeaways

Platform design points staff interviewers score.

•Golden path = lint → test → build → preview → canary → prod
•Monorepo + Turborepo for shared code; MFE when deploy independence required
•Preview envs per PR — highest DX ROI
•Codegen from OpenAPI/GraphQL — types drift fails CI
•Lint gates: bundle size, Lighthouse, a11y — gradual rollout
•Internal SDKs for auth, flags, analytics — semver + codemods
•Measure adoption: % teams on golden path, build time p95, deploy frequency

Frequently Asked Questions

Frontend platform and developer experience interview questions.

🧠

Quick Check

Test your understanding — 5 questions

Question 1 of 5

Multiple Choice

Product teams complain the platform team is a bottleneck: every new route needs a platform PR approval. What is the correct structural fix?

Model

Best for

Trade-off

Monorepo

Shared code, atomic refactors, one CI graph

Scale requires Turborepo/Nx; large clone

Polyrepo

Hard team boundaries, independent versioning

Duplication; cross-repo changes painful

MFE + polyrepo

Independent deploy per product surface

Runtime integration complexity

Monorepo + MFE

Shared DS/tooling + deployable remotes

Highest platform investment

# Golden path template (conceptual) on: pull_request jobs: validate: - pnpm lint && pnpm typecheck - pnpm test --filter=...[origin/main] - pnpm build --filter=...[origin/main] preview: - deploy-preview --pr=$PR_NUMBER

Concern

Pattern

Cost

Cap concurrent previews; TTL 7 days

Secrets

Non-prod keys only; never prod DB

MFE previews

Shell loads remote from preview URL via manifest override

// Generated hook pattern import { useGetUser } from "@corp/api-client"; function Profile({ id }: { id: string }) { const { data, error, isLoading } = useGetUser(id); // Types match OpenAPI schema — drift fails CI }

Gate

Tool

Blocks merge when

Lint + format

ESLint, Prettier

Style violations or a11y rules fail

Types

tsc --noEmit

Type errors anywhere in affected packages

Bundle size

size-limit / custom

Main chunk exceeds budget

Lighthouse CI

lhci

LCP/CLS regression vs baseline

A11y

eslint-plugin-jsx-a11y, axe in CI

Critical violations

SDK

Encapsulates

Versioning

@corp/auth-sdk

SSO, refresh, session

Semver; shell pins minimum

@corp/analytics

Consent-gated events, PII redaction

Major = event schema change

@corp/flags

LaunchDarkly wrapper, local overrides

Patch-safe defaults

@corp/ui

Design system components

See Design Systems module

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Frontend Platform & Developer Experience

Monorepo vs Polyrepo vs MFE

CI/CD Golden Path

Preview Environments

Codegen & API Contracts

Lint Gates & Quality Bars

Dependency Policy

Internal SDK Pattern

Interview Takeaways

Frequently Asked Questions

Quick Check

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Frontend Platform & Developer Experience

Monorepo vs Polyrepo vs MFE

CI/CD Golden Path

Preview Environments

Codegen & API Contracts

Lint Gates & Quality Bars

Dependency Policy

Internal SDK Pattern

Interview Takeaways

Frequently Asked Questions

Quick Check