Skillkeys

The system follows a client‑server architecture where the Electron main process hosts a bundled Next.js renderer. The frontend is compiled with Vite for rapid hot‑module replacement and leverages React Server Components where appropriate. State is managed globally via a custom useStore hook, enabling seamless navigation between configuration, practice, and results pages while persisting user preferences in localStorage via a reusable hook.

Data ingestion occurs through a set of RESTful endpoints (e.g., /api/projects, /api/messages) that accept JSON payloads validated against Joi schemas before being written to MongoDB collections. Rich text content created with Tiptap is sanitized on the server to prevent XSS, then stored as HTML strings and re‑hydrated on the public portfolio without loss of formatting.

Security guardrails include Helmet headers, rate limiting middleware, and JWT‑based authentication for admin routes. All API responses are typed with TypeScript interfaces, and the backend enforces strict validation to avoid malformed data reaching the database.

The build topology uses Electron‑builder to package the app for Linux and Windows, while the web assets are output by Vite into the Electron renderer. Continuous integration scripts (not shown) handle linting with ESLint, type‑checking, and automated MongoDB backup utilities that export collections on a schedule.