CryptoVault Shield — Designing and Shipping a Zero-Knowledge Password Manager
- 11implemented
- Routes
- 3dark/light/system
- Theme modes
- 6validated choices
- Accent presets
Project Overview
CryptoVault Shield is a production-deployed password manager and security intelligence interface I designed, engineered, and shipped as a full portfolio project.
The work spans product strategy, UX design, UI engineering, accessibility, frontend implementation, monorepo architecture, CI/CD configuration, and live deployment.
This case study is public-safe: sensitive implementation details, credentials, private routes, private API details, exact security internals, and vulnerable operational details are intentionally omitted or generalized.
Security Tools Often Feel Either Scary or Oversimplified
Password managers are important, but many users avoid them because they feel intimidating, overly technical, or hard to trust.
The problem was to communicate risk, safety, credential strength, and threat signals in a way that feels calm, confident, and actionable.
Goals and Success Criteria
The primary goal was to ship a production-deployed, full-featured password manager UI that demonstrates the full UX engineering workflow.
Success meant all primary routes worked, appearance settings affected real DOM state, generator and phishing scanner interactions behaved reliably, the layout was responsive, and the CI/CD pipeline passed.
Security Product Mental Models
I referenced existing password managers and security dashboards to understand how tools balance density, trust, and clarity.
A core design principle emerged: security information should be calm, confident, and scannable. The dark-first palette and green accent communicate protection without turning the interface into a threat feed.
From Figma to Production
The work moved from Figma design system to monorepo architecture, route implementation, interactive state wiring, theme and accent controls, production build debugging, and Vercel deployment.
Agentic AI helped with scaffolding, implementation support, debugging, and iteration, but I made the product, design, architecture, deployment, and quality decisions.
Security Dashboard and Vault Experience
The final product includes a dashboard, vault, generator, phishing detector, alerts, report page, and settings. A persistent sidebar communicates security status and keeps navigation predictable.
The vault uses a split-panel layout so users can scan credentials on one side and inspect details on the other. The settings page includes visual theme cards and accent color presets connected to real state.
Accessibility in a Dark-Mode Security UI
Accessibility work included semantic HTML, keyboard navigation, focus states, contrast validation across light/dark themes, responsive layout checks, and clear visual hierarchy.
The dynamic accent-color system required careful preset selection so selected colors remained usable on both dark and light surfaces.
Outcomes
CryptoVault Shield is live on a custom subdomain and demonstrates design-to-code fidelity, a functional appearance system, monorepo CI/CD, and security-focused product thinking.
Recommended future validation includes Lighthouse audits, Playwright flows, axe accessibility CI, and deeper testing for core utility packages.
What I Learned
This project taught me that security UX needs both confidence and restraint. Too little information hides risk; too much creates anxiety.
It also reinforced that agentic AI development is a skill: decomposing tasks, validating outputs, and making high-quality decisions is where the real ownership lives.