Mobile Chat App

The system is organized into three primary layers. Frontend: A Vite‑powered React application leverages React Router (via Expo Router) and custom components (ScreenWrapper, Typo, Button) to deliver a dark‑themed, responsive UI. State management is handled with React hooks and context, enabling real‑time form validation and instant UI feedback. Rich text content is sanitized before being persisted, preventing XSS attacks.

Backend: An Express server (src/app.ts) exposes a minimal API (GET / health check and CRUD endpoints for projects, skills, messages, etc.). Middleware includes cors, express.json(), helmet, and custom rate‑limiting logic. Request bodies are validated against Joi schemas before reaching Mongoose models, guaranteeing data integrity.

Data Layer: MongoDB stores all CMS entities. Utility scripts provide automated backups of collections, and the server includes integration modules for pulling GitHub statistics and Pinterest boards, caching them for fast frontend consumption.

Security & Deployment: Environment variables (PORT, MONGO_URI, JWT_SECRET) are loaded via dotenv. The Electron packaging process bundles the frontend and backend into native installers for Windows and Linux, using IPC channels to securely exchange authentication tokens and configuration data.

Build & Tooling: TypeScript ensures type safety across the stack, while ESLint enforces code quality. The project is orchestrated with npm scripts (dev, build, start) and leverages nodemon for hot‑reloading during development.