How to vibe codeDashlane

Prerequisites

• Node.jsfree

  Required for running Next.js development server and building the browser extension

• GitHubfree

  Code repository hosting and deployment sync

• Cursorfree tier / $20/mo

  AI-native code editor for building and debugging the application

AI coding tools

• Claude Code

  Excellent for scaffolding complex multi-file structures like browser extension manifests and encryption modules

• Cursor

  Ideal for inspecting file diffs, editing extension content scripts, and iterating on React UI components

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, TypeScript, and set up Turso database connection for storing encrypted vault items.

   Create a new Next.js 16 application with TypeScript, Tailwind CSS, and App Router. Set up a Turso database client using `@libsql/client` with environment variables for URL and auth token. Create a database schema for users (id, email, password_hash, salt, iterations) and encrypted_vaults (id, user_id, ciphertext, iv, updated_at). Ensure all database interactions are isolated in a dedicated data access layer file. Include basic error handling and Zod validation for all inputs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Zero-Knowledge Cryptography Engine

   Implement client-side encryption utilities using the browser's native Web Crypto API for zero-knowledge master key derivation and vault encryption.

   Create a TypeScript cryptography utility module using the browser Web Crypto API (`window.crypto.subtle`). Implement functions for: 1) Deriving a master encryption key from a master password and salt using PBKDF2 with 100,000 iterations. 2) Encrypting plaintext vault JSON objects using AES-GCM, returning base64-encoded ciphertext and initialization vector (IV). 3) Decrypting ciphertext back into plaintext JSON using the derived master key and IV. Ensure that plaintext secrets never leave the client browser and are only decrypted in memory after master password confirmation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Authentication & Vault State Management

   Build user authentication using better-auth and integrate client-side session management for unlocking the local zero-knowledge vault.

   Implement authentication in Next.js using `better-auth` configured with email and password. Create an auth context provider in React that manages the user session. Add a 'Master Password Unlock' screen that prompts authenticated users for their master password upon session start, derives the local decryption key using the PBKDF2 helper from step 2, and stores the raw CryptoKey in React Context memory (never in localStorage). Create API endpoints to fetch and save encrypted vault blobs for the authenticated user.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Vault Dashboard & Item Management

   Build the core web application UI for managing logins, secure notes, and payment cards inside the encrypted vault.

   Build a responsive SaaS dashboard in Next.js App Router with Tailwind CSS for managing password manager items. Create views for 'Logins', 'Secure Notes', and 'Payment Cards'. Implement modals to add, edit, and delete items. When an item is added or edited, serialize the vault array, encrypt it using the AES-GCM crypto engine from step 2 with the user's master key, and sync the resulting ciphertext blob to the backend API. Include a password generator widget with customizable length, symbols, and numbers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Browser Extension Manifest V3 & Autofill Hook

   Develop a Chrome extension (Manifest V3) that communicates with the web vault and injects login credentials into web pages.

   Create a Chrome Extension (Manifest V3) folder structure with a background service worker, a popup UI, and a content script. The extension popup should allow the user to log in or unlock their vault using the web app's session token stored in chrome.storage. The content script should scan web pages for input fields of type 'password' or username fields with matching domain names. When triggered via shortcut or context menu, inject saved matching credentials into the DOM input fields. Ensure secure messaging between content script and background service worker.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Dark Web Breach Checking & Polish

   Integrate breach monitoring via HaveIBeenPwned k-Anonymity API and polish error handling, loading states, and UI styling.

   Implement a dark web breach checker feature in the dashboard. When a user views their saved login items or triggers a security audit, take the password or email, compute its SHA-1 hash, send the first 5 characters to the HaveIBeenPwned Pwned Passwords API (k-Anonymity model), and check if the remaining hash suffix appears in the response. Display security warnings for compromised passwords in a dedicated 'Security Dashboard' tab. Add toast notifications, loading skeletons, and clean up Tailwind styling across all components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Dashlane