Selected work
Desktop Tool · ElectronTypeScript · Electron · React 19

PRD Engine

Electron app for authoring Product Requirements Documents with live keyboard-driven editing, custom actors, and drag-to-reorder cards.

An Electron desktop app for writing Product Requirements Documents. Uses React 19 with Tailwind CSS and keyboard-first workflows to compose feature requests in a card-based interface, supporting custom actors (user, system, or any stakeholder role) and live serialization to clipboard.

Role — Solo developer
  • Electron 35.2.1
  • React 19.0.0
  • React Router DOM 7.5.2
  • Tailwind CSS 4.1
  • Vite 6.3.1
  • Electron Builder 26.0.12
  • React Transition Group 4.4.5
  • PostCSS
  • ESLint

PRD Engine is a lightweight Electron desktop application designed to streamline the authoring of Product Requirements Documents. Built with React 19, Tailwind CSS v4.1, and Vite, it provides a focused, distraction-free environment for capturing feature requests as structured cards. Each card is prefixed with an actor phrase ("As a user, I want...") that maintains consistency across requirements.

The editor supports three built-in actors (user, system, custom) plus unlimited custom actor definitions. Keyboard navigation dominates the workflow: Ctrl+Tab cycles between actors, Up/Down arrows navigate between cards, Alt+Up/Down reorders cards, and Ctrl+Shift+C copies all cards to clipboard in a formatted export. Cards are auto-numbered with FR IDs that renumber on reorder or deletion.

Tailwind CSS provides a dark-mode-first theme with semantic color coding by actor type (gray for users, amber for system, purple for custom). The app minimizes to system tray with a global hotkey (Windows+Shift+D) for rapid access. Built with Electron Builder for Windows packaging and ASAR bundling, it ships as both a portable installer and directory build.

What's notable
  • Keyboard-first UX with Ctrl+Tab actor switching, arrow navigation through cards, Alt+arrow reordering, and inline hotkey hints throughout the UI
  • Custom actor management: create, edit, or delete named actors (e.g., 'admin', 'payment system') on the fly; custom actors update all existing cards that reference them
  • Live clipboard export formatted as backtick ID plus text (FR01 text \n FR02 text), triggered by Ctrl+Shift+C
  • Drag-and-drop card reordering with visual feedback and automatic FR ID renumbering
  • System tray integration with double-click to show and global hotkey, context menu with version label