2d Desktop Ai

Core System Architecture The application follows a client‑server model where the Electron‑hosted React frontend communicates over HTTPS with an Express API layer. Data is persisted in MongoDB via Mongoose models, with strict schema validation enforced by Joi before any write operation. Authentication is handled with JWT tokens signed using bcrypt‑hashed passwords, and every protected route is guarded by Helmet headers and CORS policies.

Data Ingestion & Persistence Rich text content created with the Tiptap editor is sanitized on the server side to prevent XSS, then stored as HTML strings in MongoDB. Drag‑and‑drop reordering powered by dnd‑kit updates sequence indices in a single atomic request, ensuring database consistency even under rapid user interactions. Global state is orchestrated with Tanstack Query and React Hook Form, providing instant UI feedback while keeping the cache synchronized with the backend.

Security Guardrails All admin endpoints are rate‑limited and wrapped with Helmet to mitigate common web attacks. Input validation using Joi and Zod guarantees that only well‑formed data reaches the Mongoose layer. Electron’s IPC channels are isolated and validated to prevent privilege escalation between the main and renderer processes.

Build & Deployment Topology The frontend is bundled with Vite for fast HMR during development and optimized for production with tree‑shaking. Electron Builder packages the app for Linux and Windows, while Nodemon watches backend changes in development. Linting and formatting are enforced by ESLint and PostCSS, ensuring a consistent codebase across the full stack.