Project Structure

Every Electron app has the same three big actors: a main process (Node.js), a preload script (the bridge), and a renderer (your React UI). The boilerplate enforces that split with consistent folders so AI coding tools never have to guess where things go.

Top-level tour

src/
├── main/        # Node.js — windows, native menus, file system, IPC handlers
├── preload/     # contextBridge — safely exposes IPC to renderer
├── renderer/    # Your React UI (sandboxed)
├── shared/      # Types, Zod schemas, and constants shared by main + renderer
├── features/    # One folder per screen (about, ai-demo, settings, ...)
└── logging/     # Logging engine (file + console + Sentry hooks)

Other folders you'll touch occasionally:

• docs/ — per-subsystem docs (auth, signing, security, distribution, …)
• e2e/ — Playwright end-to-end tests
• resources/ — icon.png (the source for all platform icons)
• brand/ — logos and screenshots (see Rebranding)

The "5-place IPC pattern"

When you add a new IPC channel — e.g. notes:save — code lands in five places, always the same:

1. src/shared/ipc/channels.ts — the channel name constant
2. src/shared/validation/notes.ts — Zod schema for the payload
3. src/main/ipc/notes.ts — the handler that runs the work
4. src/preload/index.ts — exposes the channel through contextBridge
5. src/renderer/hooks/useNotes.ts — typed hook your React code calls

Sound like a lot? It's one command. Plop scaffolds all five:

npm run new:ipc -- --name notes:save

Same for screens:

npm run new:feature -- --name notes

This creates src/features/notes/, registers it in the screens index, and adds a sidebar entry.

What's next

• Distribute it → Auto-update sets up the release pipeline.
• Sign it → Code-signing covers Windows + macOS.