Nice — here’s a complete, no-fluff requirements list + full walkthrough for your product:
Prompt Catcher — Select → Save → Sync. Read it like a developer roadmap + product
handbook you can follow step-by-step.
I’ll cover:
1. Product requirements (user & business).
2. Technical requirements (frontend, extension, backend).
3. Data model & security rules.
4. UX flows (user journey with UI elements).
5. Implementation checklist (files & features).
6. Offline, sync & encryption behavior.
7. Testing, QA & launch checklist.
8. Next steps you should do right now.
1. Product requirements (what the
product must do)
Core purpose
● Let users save any selected text (or copied text) from the browser into a personal
prompt library that is synced across devices.
Non-negotiable rules
● Default: data stored in user’s cloud account (not public).
● Provide guest/local fallback (optional).
● Clear privacy messaging on first run.
● No plaintext secrets in extension code.
● Ability to export/import JSON.
● Option for client-side end-to-end encryption (E2EE).
Must-have user features
● Sign-in (Google OAuth) + “Continue as guest (local only)”.
● Library: list, search, edit, delete, pin, tag, category, copy to clipboard.
● Starter prompts (12) + Restore starter prompts.
● Floating “Save” bubble when user selects text (extension).
● Prefill flow when opening web app with selected text.
● Simple auto-categorization (keyword-based).
● Keyboard shortcuts (N, K, /, arrows, Enter, S, I).
● Export/Import + encrypted export option.
● Onboarding modal with privacy & shortcuts.
Nice-to-have
● Offline queue syncing, conflict handling (last-write or merge UI).
● Small analytics (opt-in) for product usage.
● Template marketplace (future).
2. Technical requirements (what to build)
Frontend (web app)
● SPA in plain HTML/CSS/JS or small framework. Must be mobile-first.
● Files: web/[Link], web/[Link], web/[Link],
web/[Link].
● Use Firebase client SDK (Auth + Firestore) for production MVP.
● Local fallback: IndexedDB or localStorage (guest mode / offline queue).
● UI components: header, search, list, editor modal, settings, onboarding modal.
● Fuzzy search: small tokenized scoring function in JS (no libraries).
● Export/Import: JSON file download/upload, plus AES-GCM encrypted export/import.
● Keyboard shortcuts & accessibility (ARIA roles, visible focus).
Chrome Extension
● Manifest v3 (extension/[Link]).
● [Link] (content script): selection detection, bubble UI near bounding rect,
avoid interfering with page styles.
● [Link] (service worker): open app tab with deep-link ?prefill=... OR
communicate with web app via messaging.
● [Link] + [Link] (optional): quick login link, settings, toggle encrypt before
upload.
● Security: do NOT embed API keys. Prefer deep-link approach to avoid storing
credentials in extension.
Backend (cloud)
● Firebase Auth (Google) + Firestore.
● Firestore collection layout: users/{uid}/prompts/{promptId}.
● Optional Cloud Functions for heavy processing or server-side encryption (if chosen).
● Firestore rules to restrict read/write to authenticated user only (provided separately).
3. Data model & Firestore rules
Prompt document sample
{
"id":"<uuid>",
"text":"Full saved prompt text",
"title":"Auto or custom title",
"tags":["tag1","tag2"],
"category":"Coding|YouTube|Marketing|General",
"sourceUrl":"[Link]
"sourceTitle":"Page title",
"pinned": false,
"encrypted": false, // true if stored ciphertext
"createdAt":"2025-12-04T12:00:00Z",
"updatedAt":"2025-12-04T12:00:00Z"
}
Minimal Firestore rules (concept)
● Allow read/write only if [Link] == [Link] (or
path checked).
● Limit maximum size of prompt text (e.g., < 20000 chars).
● Rate limits: deny excessive writes (optional).
(You’ll get a ready rules file from the scaffold step.)
4. UX flows — exact step-by-step user
journeys
A. First-time user (web app)
1. Visit app → onboarding modal: short privacy copy and choices (Sign in / Continue as
guest).
2. If sign-in → Google OAuth initiated.
3. After login → main library shows starter prompts and empty search.
4. User can “Restore starter prompts” (warns before overwrite).
B. Saving from any website (extension flow)
1. User selects text on any page.
2. Content script detects selection bounding rect & shows small bubble near it: “Save →
Prompt Catcher”.
○ Bubble disappears on scroll / click outside / selection change.
3. User clicks bubble:
○ Option 1 (safe & simple): extension opens a new tab to
[Link] where the web app
opens with an editor modal prefilled.
○ Option 2 (advanced): extension sends selection to background which requires
auth and writes directly to Firestore (only if extension implements secure auth
via [Link] - more complex).
4. In web app, user can edit title/tags/category and press Save. The item is saved to
their cloud library. Show toast “Saved”.
C. Local guest save (if user chooses guest mode)
● Selection → bubble → prefill web app; storing goes to IndexedDB/localStorage only.
● On sign-in, offer “Migrate local prompts to account” button.
D. E2EE option
● If user enables E2EE:
○ Prompt user for passphrase when enabling.
○ Client derives key (PBKDF2) and encrypts prompt text before upload.
○ Server stores ciphertext only — user must keep passphrase to decrypt.
5. Implementation checklist — files &
features to build
Web app files
● [Link] — includes markup + script references.
● [Link] — variables, dark/light theme, responsive.
● [Link] — core: auth, Firestore read/write, UI rendering, fuzzy search, export/import,
E2EE helpers.
● [Link] — placeholder.
Extension files
● [Link] (MV3) — permissions: activeTab, scripting, storage.
● [Link] — selection detection, bubble UI, send message to background or
open prefill URL.
● [Link] — optional advanced flow or message forwarder.
● [Link] + [Link] — sign-in link and settings.
Other docs
● [Link] — setup steps for Firebase, hosting, extension loading.
● FIREBASE_RULES.txt — exact security rules.
● deploy_notes.txt — launch considerations and costs.
6. Offline, sync & encryption behavior
(detailed)
Offline handling
● If user is offline and clicks Save:
○ Store prompt in local queue (IndexedDB).
○ Show toast “Saved locally — will sync when online”.
○ On network restore, sync queue to Firestore and mark as synced.
Conflict resolution
● Simple policy: client last-write-wins (timestamp-based).
● Advanced: show conflict UI if changes on client and server exist.
Encryption (E2EE)
● When E2EE enabled:
○ Client asks passphrase.
○ Derive key via PBKDF2 (salt per user) with 150k iterations (comment
parameter may be tuned).
○ Use AES-GCM to encrypt prompt text; upload ciphertext and metadata (IV,
salt).
○ To read: client downloads ciphertext and decrypts locally.
● Important: If passphrase lost → data irretrievable. UX must warn strongly.
7. Testing, QA & launch checklist
Functional tests (must pass)
● Sign-in (Google) results in user-scoped Firestore reads/writes.
● Guest mode stores locally and migration works.
● Extension shows bubble reliably on selection; bubble disappears correctly.
● Prefill deep-link opens and prepopulates the modal.
● Save creates document in Firestore under users/{uid}/prompts.
● Export/Import works; encrypted export decrypts correctly with passphrase.
● Search returns relevant results; fuzzy scores behave sensibly.
● Keyboard shortcuts work.
● Mobile UIs are responsive.
Security tests
● Firestore rules deny cross-user access.
● No API keys are hard-coded into extension.
● E2EE: encryption/decryption roundtrip validated.
Accessibility tests
● Tab order works; ARIA labels on interactive controls; high contrast mode okay.
Launch checklist
● Create Firebase project & enable apps/auth.
● Replace placeholder config with real keys (in web/[Link]).
● Host web app (Firebase Hosting or GitHub Pages).
● Load extension in dev mode and verify deep-link flow to hosted web URL.
● Add privacy policy / contact page.
8. Costs & operational notes
● Firebase free tier generous for early users. Text storage is cheap. Costs only scale
with active users and reads/writes.
● If you plan > 10k active users, monitor Firestore read/write costs and list index usage.
● Consider adding rate-limits or batching writes to reduce cost.
9. What you should do next (exact
immediate steps)
1. Create Firebase project and enable Auth & Firestore. Save web config.
Create a GitHub repo and folder structure:
prompt-catcher/
web/
extension/
[Link]
2.
3. Ask me: “Generate the web app files” — I will produce [Link], [Link],
[Link], and [Link] ready to paste into your web/ folder.
4. After that, ask me: “Generate extension files” — I will produce [Link],
[Link], [Link], [Link], [Link].
5. Then you will: load extension in Chrome (developer mode) and host web app.
10. Extra suggestions (product & growth)
● Prepopulate a few “prompt packs” for categories and allow users to import packs
(viral hook).
● Build a simple landing page that explains privacy and shows short demo
GIF—shares well on Product Hunt.