Bussiness Card Maker

The system follows a client‑server architecture where the React SPA communicates with a RESTful Express API. Data models are defined with Mongoose schemas and validated using Joi before persisting to MongoDB, ensuring strict type safety. Authentication leverages JSON Web Tokens and password hashing via bcrypt.js, while Helmet and CORS policies harden the API against common web attacks.

On the client side, React Query manages asynchronous data fetching and caching, and React Hook Form together with Zod provides real‑time form validation. Rich text content is authored with Tiptap, sanitized, and stored safely to prevent XSS. The UI employs dnd-kit for drag‑and‑drop reordering of items such as projects and skills, with state synchronization logic that updates MongoDB sequence indices instantly, even under rapid user interactions.

The application is built with Vite for fast hot‑module reloading and bundled with Electron Builder to produce cross‑platform installers. Development tooling includes ESLint, PostCSS, and Nodemon for a smooth developer experience. All UI components are unstyled primitives from Shadcn UI/Radix, allowing full customization while maintaining accessibility standards.

Security is reinforced through rate limiting, Helmet headers, and strict JWT verification on protected routes. The backend also includes utilities for MongoDB backups, enabling automated export of collections. Logging is centralized, and error handling middleware captures and reports unexpected failures, ensuring reliability in production.