Bento Builder Studio

The system follows a single‑page application architecture where the React UI runs inside an Electron shell, communicating with a local Express API over HTTP. Data persistence is handled by MongoDB, accessed via Mongoose models that enforce schemas validated by Joi before any write operation. Rich text content created with Tiptap is sanitized and stored as HTML strings, while drag‑and‑drop ordering powered by dnd-kit updates sequence indices in real time, ensuring the UI and database stay in sync.

Security is a cornerstone: the backend applies Helmet headers, CORS policies, and rate‑limiting middleware to protect admin routes. Authentication uses JWT tokens signed with a secret, with passwords hashed via bcrypt.js. All incoming payloads are validated against strict Joi schemas, preventing malformed data from reaching the database. The Electron main process isolates privileged operations, and IPC channels are used for safe communication between the renderer and backend.

The build pipeline leverages Vite for fast hot‑module reloading during development and electron-builder for production packaging. ESLint and Prettier enforce code quality, while Vitest/Jest provide unit and integration testing. The UI components are built with Shadcn UI primitives, allowing full theming control and accessibility compliance. State management relies on React hooks and Tanstack Query for data fetching, caching, and optimistic updates, delivering a responsive experience even under rapid user interactions.

Deployment is straightforward: the Electron app bundles the Express server and MongoDB connection string, enabling offline usage with local data storage. For production environments, scripts are provided to back up MongoDB collections and migrate data, ensuring resilience and recoverability.