Reelmaker Studio

Core System Architecture The application is split into three logical layers. The frontend runs in an Electron renderer process, leveraging react-query for data fetching, react-hook-form with Zod/Joi for validation, and Tiptap for rich‑text editing. State synchronization for drag‑and‑drop ordering is handled by dnd-kit, with immediate persistence to the backend via optimistic updates.

Data Ingestion & Persistence User‑generated content—projects, skills, testimonials, and messages—is sent to the Express API where Joi schemas enforce strict payload contracts before Mongoose models persist the data in MongoDB. Rich text fields are sanitized on receipt to prevent XSS, then stored as HTML strings. Backup utilities are included to export collections for disaster recovery.

Security Guardrails Authentication relies on JWT tokens signed with a secret and passwords hashed using bcrypt.js. All admin routes are protected by middleware that validates tokens, applies Helmet headers, and enforces rate limiting to mitigate brute‑force attacks. CORS is tightly scoped to the Electron origin.

Build & Deployment Topology The development workflow uses Vite for fast HMR, while Electron Builder creates installers for Windows and Linux. Linting and formatting are enforced with ESLint and Prettier, and nodemon watches backend changes during development. The final product is a single executable delivering both UI and API without external server dependencies.