A professional-grade, privacy-first Password Strength Checker & Generator.
Real-time analysis · entropy & crack-time estimation · breach detection · PDF reports.
100% client-side — your password is never stored or transmitted.
- Name: SecurePass Studio
- Goal: A premium-feeling SaaS-grade tool that helps users build genuinely strong passwords and understand why a password is weak or strong.
- Stack: React 18 + TypeScript + Vite (static SPA — deploys directly to Vercel, no backend required).
- Privacy: All analysis runs in the browser. The only optional network call is an anonymised, k-anonymity breach check that the user explicitly enables.
This project was upgraded from a legacy Chrome-extension prototype (preserved in
/legacy) into a production-ready web app.
- ⚡ Real-time strength checking on every keystroke
- 🎯 5 strength levels: Very Weak → Weak → Medium → Strong → Very Strong
- 💯 Score out of 100 with an animated 5-segment meter
- 🔬 Detects: length, uppercase, lowercase, numbers, symbols, repeated characters, low unique-character ratio, common passwords, sequential patterns (
12345,abcde), keyboard walks (qwerty), and embedded years - 📐 Entropy calculation (bits) using search-space entropy
- ⏱️ Crack-time estimation across 4 realistic attack scenarios (throttled online → offline GPU fast-hash)
- 💡 Actionable improvement suggestions
- 🔒 No password storage — the raw value lives only in React state
- 🖥️ Fully client-side analysis (pure functions, no I/O)
- 🛡️ Strict Content-Security-Policy + security headers (set in
vercel.json) - 🧼 React auto-escapes all output → XSS-safe; history stores only masked values
- 🎲 Cryptographically-secure generator (
crypto.getRandomValues, rejection sampling, no modulo bias) - 📋 Copy button · 👁️ visibility toggle · 🔁 one-click "test this password"
- 🧮 Entropy & variety metrics
- 🗂️ Password history comparison (masked, metadata only, in
localStorage) - 🌐 Breach detection via Have I Been Pwned (k-anonymity — only the first 5 SHA-1 hex chars are sent)
- 📄 Download PDF report (client-side via
jsPDF)
- 🌗 Dark / Light mode with OS-preference detection + persistence
- 💎 Glassmorphism UI, animated gradient blobs, smooth transitions
- 📱 Fully responsive & mobile-friendly
- ♿ Accessible (semantic HTML, ARIA labels,
prefers-reduced-motion) - 🚀 SEO-optimised (meta, Open Graph, Twitter card, JSON-LD structured data,
robots.txt) - 📦 Code-split vendor chunks for fast initial load
This is a single-page app; all routes resolve to index.html.
| Path | Description |
|---|---|
/ |
Main application (analyzer + generator + history) |
/favicon.svg |
App icon |
/og-image.svg |
Social share image |
/robots.txt |
Crawler directives |
External API used (optional, user-initiated):
| Endpoint | Purpose | Data sent |
|---|---|---|
GET https://api.pwnedpasswords.com/range/{prefix} |
Breach check | Only first 5 hex chars of the password's SHA-1 hash |
- Data models: see
src/lib/types.ts—AnalysisResult,CharacterComposition,Detection,CrackTimeEstimate,BreachResult,HistoryEntry,GeneratorOptions. - Storage services:
- In-memory (React state) — the live password. Never persisted.
localStorage— theme preference and the masked password history (no raw passwords).
- Data flow: input →
analyzePassword()(pure) → memoisedAnalysisResult→ UI components. Breach check is debounced and runs only when enabled.
This app deploys to Vercel with zero configuration changes.
- Push this repo to GitHub (see below).
- Go to vercel.com → Add New → Project and import the repository.
- Vercel auto-detects Vite. Defaults are already correct:
- Build Command:
npm run build - Output Directory:
dist - Install Command:
npm install
- Build Command:
- Click Deploy. Done. ✅
npm i -g vercel
vercel # preview deployment
vercel --prod # production deploymentvercel.json already configures the framework, SPA rewrites, caching, and security headers (CSP, HSTS-friendly headers, etc.).
npm install # install dependencies
npm run dev # start Vite dev server (http://localhost:3000)
npm run build # type-check + production build → dist/
npm run preview # preview the production build
npm run lint # ESLint
npm run typecheck # TypeScript onlywebapp/
├── index.html # HTML entry + full SEO meta
├── vercel.json # Vercel config: framework, rewrites, headers
├── vite.config.ts # Vite build (manual vendor chunks)
├── package.json
├── tsconfig*.json # TS project references
├── .eslintrc.cjs
├── public/ # Static assets (favicon, OG image, robots)
├── src/
│ ├── main.tsx # App bootstrap + ErrorBoundary
│ ├── App.tsx # Layout & composition
│ ├── vite-env.d.ts
│ ├── lib/ # Framework-agnostic core engine
│ │ ├── types.ts # shared domain types
│ │ ├── data.ts # common passwords, sequences, levels, charsets
│ │ ├── analyzer.ts # strength scoring + detections
│ │ ├── crackTime.ts # crack-time estimation & formatting
│ │ ├── breach.ts # HIBP k-anonymity lookup
│ │ ├── generator.ts # secure password generator
│ │ ├── random.ts # crypto-secure RNG helpers
│ │ ├── format.ts # masking / id helpers
│ │ └── pdf.ts # PDF report builder
│ ├── hooks/ # useTheme · useHistory · useDebouncedValue
│ ├── components/ # Presentational + container components
│ └── styles/index.css # Design tokens, glassmorphism, responsive
└── legacy/ # Original Chrome-extension prototype (archived)
- Multi-language (i18n) support
- Passphrase (diceware) generator mode
- Configurable scoring profiles (NIST vs. corporate policy presets)
- Optional PWA / offline install
- Unit-test suite (Vitest) wired into CI
- Add a Vitest suite around
src/lib(the engine is already pure and easy to test). - Wire GitHub Actions for lint + typecheck + build on every PR.
- Add a custom domain in Vercel and update the canonical URL in
index.html.
Your password is analysed entirely inside your browser. It is never logged, stored, or sent to any server — the only exception is the optional breach check you explicitly enable, which uses k-anonymity so the full password never leaves your device.
- Platform: Vercel
- Status: ✅ Ready to deploy (build verified,
npm run buildpasses with no errors) - Tech Stack: React 18 · TypeScript 5 · Vite 5 · jsPDF
- Last Updated: 2026-06-14
Crafted with ❤️ for people who care about security.