Tracky

The system follows a modular monolith architecture where the frontend and backend are developed in separate repositories but tightly coupled through a well‑defined REST API. The frontend is a single‑page application built with React 18 and React Router, using Tanstack Query for data fetching and caching. Rich text content is edited via Tiptap, sanitized, and persisted to MongoDB through the backend. Drag‑and‑drop ordering of items such as projects and skills is powered by dnd-kit, with state synchronization logic that updates sequence indices in the database in real time, handling rapid successive sorts.

Data ingestion occurs through Express routes protected by JWT authentication and rate‑limited via custom middleware. Incoming payloads are validated against Joi schemas before being mapped to Mongoose models, guaranteeing data integrity. The backend also implements Helmet headers and CORS policies to mitigate common web vulnerabilities. All API responses are typed using Zod schemas on the client to enforce contract safety.

The build topology utilizes Vite for fast hot‑module replacement during development and Electron Builder to produce cross‑platform installers. Linting and formatting are enforced with ESLint and Prettier, while nodemon watches server files for automatic restarts. The application stores configuration and user preferences locally via Electron's IPC mechanisms, ensuring a seamless offline experience that syncs when connectivity is restored.

Security guardrails include bcrypt password hashing, JWT token expiration, and per‑endpoint rate limiting. Database backups are scripted within the backend utilities, allowing administrators to export collections on demand. The overall design emphasizes accessibility, dark‑mode aesthetics, and extensibility, making it a robust foundation for personal branding and content publishing.