Expenses Tracker

The system is divided into three primary layers: the Electron main process, the React renderer, and the Express API server. The main process bootstraps the application, sets up IPC listeners, and launches a hidden Node server that exposes RESTful endpoints such as /transactions, /profile, and /insights. The renderer consumes these endpoints via a generated TanStack Router (src/routeTree.gen.ts) and renders pages like Add, Transactions, and Profile using lazy‑loaded routes. All UI components—including a custom Carousel (src/components/ui/carousel.tsx) and rich‑text editors powered by Tiptap—are typed with code TypeScript interfaces, ensuring compile‑time safety.

Data persistence is handled by MongoDB models validated with Joi schemas before reaching Mongoose. This double‑layer validation prevents malformed payloads from corrupting the database and aligns with the security guardrails implemented via Helmet, strict rate limiting, and sanitized HTML storage for rich‑text content. The IPC bridge serializes data using JSON, and the backend enforces authentication tokens for admin routes, mitigating brute‑force attacks.

The build pipeline leverages Vite for fast HMR during development and electron‑builder for packaging. ESLint and Prettier enforce code quality, while the project’s CI (though not listed) would typically run type checks and linting. The final artifact is a cross‑platform executable that runs the bundled Node server internally, providing a native‑like experience without sacrificing the flexibility of web technologies.