Thanks for your interest in improving SysPeek. This guide covers local setup and the conventions the project follows.
- Node 20.19 or newer (Node 22 recommended)
- npm
- Git
git clone https://github.com/shehari007/SysPeek-hwinfo-react-electron-app.git
cd SysPeek-hwinfo-react-electron-app
npm install
npm run devnpm run dev starts the app with hot reload for both the renderer and the main process.
| Script | Purpose |
|---|---|
npm run dev |
Development with hot reload |
npm run build |
Type check and bundle into out/ |
npm run typecheck |
Type check main, preload, and renderer |
npm run lint |
Lint with ESLint 10 |
npm run format |
Format with Prettier |
npm run build:win |
Windows installer |
npm run build:mac |
macOS dmg and zip |
npm run build:linux |
Linux AppImage and deb |
src/mainis the Electron main process. It owns all windows, the tray, the updater, the settings store, and the polling loop. This is the only placesysteminformationis used.src/preloadexposes a small typed API to the renderer throughcontextBridge. Add new capabilities here as explicit functions.src/sharedholds the IPC channel names and the TypeScript types shared by main, preload, and renderer.src/rendereris the React UI. Components read data throughsrc/renderer/src/lib/api.ts, never throughwindowor Node directly.
- Add the data gathering to
src/main(insysinfo.tsor a new module). - Add a channel name and the return type to
src/shared/ipc.ts. - Register a handler in
src/main/index.tsbehind the sender check. - Expose one function for it in
src/preload/index.tsand add it to theSysApitype. - Call it from the renderer through
sysapiinsrc/renderer/src/lib/api.ts.
Keeping this pattern is what preserves the security model. Never reach for window.require or add a generic passthrough on the bridge.
- TypeScript everywhere, with the strict compiler options already configured.
- Prettier handles formatting. Run
npm run formatbefore committing. - ESLint must pass with no errors. Warnings from the React Compiler hint rules are acceptable.
- Prefer small, focused components and typed props.
- Keep commits focused and describe the intent.
- Make sure
npm run typecheck,npm run lint, andnpm run buildall pass before opening a pull request.npm run verifyruns all three in order.