DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
← From Beginner to Expert in Fundamentals of Frontend
  • Project 1: The Performance-First Dashboard
  • Project 2: Accessible Video Player
  • Project 3: Markdown Blog Engine
  • Project 4: Browser-Based Code Editor
  • Project 5: Multi-Tab Whiteboard
  • Project 6: Infinite Scroll Image Gallery
  • Project 7: Recipe Optimizer & Converter
  • Project 8: Budget Tracker with Charts
  • Project 9: Typing Speed Test
  • Project 10: Weather App with Time-Travel
  • Project 11: CSS Grid Layout Builder
  • Project 12: Password Vault (Frontend Only)
  • Project 13: Kanban Board (Trello Clone)
  • Project 14: Quiz App with Leaderboard
  • Project 15: Habit Tracker (GitHub Style)
  • Project 16: E-commerce Product Page
  • Project 17: Unit Converter (Expert Mode)
  • Project 18: Music Visualizer
  • Project 19: Flashcard Learning App
  • Project 20: Custom Form Validator
  • Project 21: Virtual Terminal
  • Project 22: Pomodoro Timer (Focus Pro)
  • Project 23: SVG Path Editor
  • Project 24: Movie Database Matchmaker
  • Project 25: Interactive Resume / Portfolio
  • Project 26: Recipe Scraper UI
  • Project 27: Crypto Tracker (Real-Time)
  • Project 28: Find My Pet (PWA)
  • Project 29: Markdown-to-Slide Tool
  • Project 30: Browser Health Dashboard
← From Beginner to Expert in Fundamentals of Frontend

Project 12: Password Vault (Frontend Only)

40 min read
Web Crypto APIAES-GCMPBKDF2EntropyZero-KnowledgeClipboard API

📋 Project Brief

Build a client-side password manager that encrypts all data before storing it locally. This project uses the Web Crypto API for AES-GCM encryption, implements entropy-based password strength measurement, and follows a "zero-knowledge" architecture where the master password is never stored anywhere.

✅ Feature Requirements

Feature 1: Web Crypto API Encryption

Acceptance Criteria:

  • All passwords are encrypted with AES-GCM before saving to localStorage
  • The encryption key is derived from the master password using PBKDF2 (100,000 iterations minimum)
  • Each entry uses a unique Initialization Vector (IV)
  • Decryption only happens in-memory; decrypted data is never written to storage
  • If the wrong master password is entered, decryption fails gracefully with a clear error

Feature 2: Entropy-Based Strength Meter

Acceptance Criteria:

  • Measure password strength in bits of entropy, not just character rules
  • Formula: entropy = log2(pool_size ^ password_length)
  • Display: < 28 bits = Weak (red), 28-35 = Fair (orange), 36-59 = Strong (yellow), 60+ = Very Strong (green)
  • Show estimated crack time: "Would take ~X years to brute-force"

Feature 3: Auto-Clear Clipboard

Acceptance Criteria:

  • When a user copies a password, start a 30-second countdown
  • After 30 seconds, automatically clear the clipboard
  • Show a visual countdown timer next to the "Copied!" notification
  • User can manually clear earlier by clicking "Clear Now"

Feature 4: Breach Check (Simulated)

Acceptance Criteria:

  • Compare passwords against a local list of 1,000 common compromised passwords
  • If a match is found, show a warning: "This password appears in known data breaches"
  • The check must happen locally — no passwords sent over the network
  • Run the check on save and on demand via a "Check All" button

Feature 5: Zero-Knowledge Architecture

Acceptance Criteria:

  • The master password is NEVER stored — not in localStorage, not in memory after use
  • Instead, store a "verification hash" (hash of a known string encrypted with the master key)
  • On unlock, attempt to decrypt the verification hash — if it succeeds, the password is correct
  • After 5 minutes of inactivity, automatically lock the vault (clear the derived key from memory)

🔐 Security Architecture

ComponentWhat's StoredWhere
Master PasswordNEVER storedN/A
Derived KeyIn-memory only, cleared on lock/timeoutJavaScript variable
SaltRandom bytes per vaultlocalStorage (plaintext)
IV per entryRandom bytes per encryptionlocalStorage (plaintext)
Encrypted passwordsAES-GCM ciphertextlocalStorage
Verification hashEncrypted known stringlocalStorage

🧪 Testing Checklist

  • Unit test entropy calculation with known inputs
  • Unit test encryption/decryption round-trip
  • Test wrong master password rejection
  • Test auto-lock timeout behavior
  • Test clipboard auto-clear timing

🚀 Stretch Goals

  • Add a password generator with customizable rules
  • Implement categories/folders for organizing entries
  • Add biometric unlock using the Web Authentication API
  • Export encrypted vault as a backup file

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.