xPromptGallery

AI Prompt Workspace — built by xTech Devs Created by Samuel Njoroge / XammyTech

xPromptGallery is your personal command center for AI prompts. Save, organize, search, favorite, and instantly copy your best prompts for ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Microsoft Copilot, and any AI platform you use — from one polished, futuristic workspace.

One React codebase. Two products:

• 🧩 Chrome Extension (Manifest V3) — popup, right-click "Save to xPromptGallery," and Ctrl+Shift+P
• 🌐 Progressive Web App — installable, offline-capable, works anywhere

---

Getting started

npm install
npm run dev              # local dev server (PWA shell)

Build for production

npm run build:pwa        # -> dist-pwa/       (installable web app)
npm run build:extension  # -> dist-extension/ (Chrome Extension, unpacked)
npm run build:all        # builds both

Load the Chrome Extension

1. npm run build:extension
2. Open chrome://extensions
3. Enable Developer mode
4. Load unpacked → select dist-extension/

Deploy the PWA

dist-pwa/ is a static site — deploy it to Vercel, Netlify, Cloudflare Pages, or GitHub Pages. No backend, no environment variables, no monthly cost required for V1.

---

Architecture

src/
├── components/
│   ├── ui/          Button, Input, Modal, Toast, Toggle, Badge, EmptyState…
│   ├── prompts/      PromptCard, PromptGrid, PromptEditorModal, FilterBar…
│   ├── dashboard/    StatsRow, QuickActions, Section
│   ├── layout/       Sidebar, TopBar, AppShell, FloatingAddButton
│   └── extension/    PopupApp — the dedicated compact extension popup UI
├── pages/            Dashboard, Prompts, Favorites, Settings
├── hooks/            usePrompts, useSearch, useStorage, useTheme
├── contexts/         PromptContext, SettingsContext, ToastContext
├── services/         promptService, exportService, importService, optimizerService
├── storage/          StorageService + Chrome / IndexedDB / localStorage adapters
├── utils/            search, sorting, validation, formatting, categories, id
└── styles/           variables.css (design tokens), globals.css, animations.css

extension/            manifest.json, background.js (context menu, shortcut), content.js

Storage abstraction

Nothing in the app talks to chrome.storage, localStorage, or IndexedDB directly — everything goes through StorageService (src/storage/storage.js), which auto-selects the right backend:

StorageService
     │
     ├── ChromeStorageAdapter   (extension build)
     ├── IndexedDBAdapter       (PWA build, preferred)
     └── LocalStorageAdapter    (universal fallback)

This means a future cloud-sync provider (Google Drive, GitHub Gist, Dropbox, a custom backend) can be added as one more adapter without touching any UI code.

Prompt model

{
  id, title, prompt, description, category, tags,
  favorite, pinned, createdAt, updatedAt, usageCount, lastUsedAt,
  variables // reserved for the V2 {{variable}} system
}

---

V1 feature set

• Dashboard with pinned / favorites / recently used / all prompts
• Full prompt CRUD — create, edit, delete, duplicate, favorite, pin
• Instant search across title, prompt, description, category, tags
• Category management (create, rename, delete-with-safe-fallback — deleting a category never deletes prompts)
• Sorting: newest, oldest, recently edited, alphabetical, favorites, pinned, most used
• One-click copy with animated toast + usage tracking
• Export (JSON, Markdown, CSV, TXT) and import (JSON, CSV, Markdown)
• Settings: theme (dark/light/system), glass intensity, animation toggle, reduced motion, compact mode
• Chrome Extension popup, right-click "Save to xPromptGallery," Ctrl+Shift+P shortcut
• Installable PWA, fully offline-capable, no backend

V1 restrictions (by design)

No backend, accounts, authentication, cloud sync, AI APIs, payments, or collaboration in V1 — see the project brief. The architecture (storage adapters, optimizerService, variables field, import/export formats) is deliberately built so these can be added later without a rewrite.

---

Tech stack

React · Vite · React Router · Framer Motion · Lucide React · Chrome Extension Manifest V3 · vite-plugin-pwa · scoped component CSS · chrome.storage.local · IndexedDB

---

© 2026 xTech Devs. Created by Samuel Njoroge.