How to vibe codeNordPass

Prerequisites

• Node.jsfree

  Required runtime environment for building the Next.js frontend and local build tooling.

• GitHubfree

  Source control repository and deployment hook connector.

• Cursor$20/mo

  AI code editor used to build and scaffold complex cryptographic components and extension scripts.

AI coding tools

• Cursor

  Unmatched speed for iterating on multi-file React components, crypto helper libraries, and background worker scripts.

• Claude Code

  Terminal agent capable of running long multi-file refactors across the extension and backend services.

Build guide

1. 01Project Scaffolding & Zero-Knowledge Crypto Core

   Initialize the Next.js project with Tailwind CSS and implement the client-side cryptographic engine using the Web Crypto API for master password derivation and AES-GCM vault encryption.

   Scaffold a new Next.js 16 project with TypeScript and Tailwind CSS v4. Create a dedicated client-side cryptography module in `lib/crypto.ts` that implements master password key derivation using PBKDF2 or Argon2-wasm, paired with AES-GCM-256 encryption and decryption functions. Ensure that plaintext vault items (passwords, notes, credit cards) are never serialized or sent unencrypted over the network. Write comprehensive unit tests verifying that incorrect master keys fail decryption gracefully without leaking sensitive state.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Web Vault UI & CRUD Management

   Build the secure dashboard interface allowing users to view, search, create, and edit encrypted credentials, secure notes, and credit card records.

   Build a secure dashboard layout in Next.js using Tailwind CSS that mimics a password manager vault. Implement React components for viewing, creating, and editing credential items, secure notes, and payment cards. Connect these UI forms to the client-side crypto module so that data is encrypted locally into an opaque ciphertext payload before state updates. Include a responsive sidebar for categorizing items, a robust search filter, and an automatic clipboard-clearing utility for copied passwords after 30 seconds.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Encrypted Sync Backend & Database Schema

   Set up Turso database models and API routes to store and synchronize opaque encrypted user vault blobs across multiple sessions without ever exposing plaintext data.

   Configure a Turso libSQL database schema using Drizzle ORM to store users and their encrypted vault sync blobs. Create backend API routes in Next.js that allow authenticated clients to pull and push their encrypted blob state (`POST /api/vault/sync`). Ensure the server acts strictly as a dumb storage layer, holding zero knowledge of the master password, encryption keys, or plaintext credential records. Implement simple version checking to prevent overwriting newer sync states from alternate client sessions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Password Generator & Strength Analyzer

   Implement a robust client-side password generator with customizable constraints and a password health audit scanner.

   Create a password generator utility supporting custom lengths, uppercase/lowercase letters, numbers, and symbols, alongside a memorable passphrase generator mode. Build a Password Health analysis component that evaluates stored vault items for weak, reused, or old credentials locally in the browser. Integrate a secure HaveIBeenPwned k-anonymity hash prefix check to detect if stored account emails or passwords appear in known data breaches without exposing cleartext credentials externally.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Browser Extension Scaffolding & Autofill Engine

   Develop a lightweight browser extension manifest v3 package capable of injecting script content into login forms for automated credential filling and autosaving.

   Build a Manifest V3 browser extension structure containing a background service worker, popup UI, and content script. Implement form detection heuristics in the content script to identify standard username/password input fields and submit buttons across web pages. Design an extension popup panel that communicates with the main web vault instance or local secure storage to retrieve matching domain credentials and inject them into DOM form elements securely upon user selection.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Security Hardening, Polish & Final Integration

   Add auto-lock timeout timers, clipboard wiping safeguards, biometric simulation hooks, and complete end-to-end integration testing.

   Perform a thorough security hardening pass across the entire codebase. Implement an auto-lock mechanism that wipes decrypted vault keys from memory and redirects the user to the lock screen after 5 minutes of inactivity. Ensure all local storage tokens use secure flags, add error boundaries for cryptographic decryption failures, and write end-to-end Playwright tests verifying the vault unlock, item creation, encryption round-trip, and sync persistence loop.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for NordPass