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.

Key	Value	Updated
DATABASE_URL	••••••••••••••••••••	2 days ago
STRIPE_SECRET_KEY	••••••••••••••••••••	6 days ago
JWT_SIGNING_KEY	••••••••••••••••••••	3 weeks ago
AWS_ACCESS_KEY_IDLeaked	••••••••••••••••••••	1 hour ago

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.