Design engineering

Secrets dashboard

A product-UI study in the secrets-management space: environments, masked values, search, add and edit flows, copy, and a flagged leaked key. Built as a React island in TypeScript.

Secrets

Manage environment variables and keys per environment.

1 secret in Production flagged as exposed in a public commit. Rotate now.
KeyValueActions
DATABASE_URL
••••••••••••••••••••
STRIPE_SECRET_KEY
••••••••••••••••••••
JWT_SIGNING_KEY
••••••••••••••••••••
AWS_ACCESS_KEY_IDLeaked
••••••••••••••••••••

Mock UI. In production these resolve from runtime secret bindings, never bundled into the client.

How it works

A self-contained React + TypeScript island. All state lives in the browser. There is no backend. The focus is the small interaction details that make an internal tool feel trustworthy.

🗂️
Env tabs
dev / staging / prod
select
→
⚛️
React state
in-memory store
filter + mask
→
🖥️
Rendered UI
masked rows
→
Reveal / copy / edit
Leaked key → warning

Key decisions

Client-only
No network calls; state is held in React so the study stays self-contained and safe to deploy statically.
Masked by default
Values render masked with per-row reveal, the way a real secrets manager guards against shoulder-surfing.
Leaked-key state
A flagged key surfaces an inline warning, the kind of trust signal that makes an internal tool credible.
One modal, live search
Add and edit flow through a single controlled modal, with live search over the list.
Built with:ReactTypeScriptAstro island (client:load)

What this shows

A self-contained React + TypeScript island: environment tabs, masked values with per-row reveal, live search, add and edit via a modal, copy-to-clipboard, and an exposed-key warning state. The focus is the small interaction details that make an internal tool feel trustworthy.