SaaSFoundry
Production-grade Web App software engineering system implemented in TypeScript, JavaScript. Features a decoupled multi-tier architecture with validated API endpoints and resilient state processing.
Technical Architecture & Engineering Overview
Detailed system design and core implementation
Core System Architecture
The application follows a classic Model‑View‑Controller (MVC) layout. The frontend lives in a Vite‑powered React project, leveraging Shadcn UI primitives and Tiptap for rich‑text editing. State is managed with React hooks and context, while API calls are performed via fetch/axios against the Express server. The backend is an Express server (server-mvc.ts) that wires route modules (authRoutes.ts, userRoutes.ts, paymentRoutes.ts, tokenRoutes.ts, transactionRoutes.ts, supportRoutes.ts). Controllers encapsulate business logic, and services interact with MongoDB via Mongoose models. Configuration and environment handling are abstracted in a central config module.
Data Ingestion & Persistence
User‑generated content such as rich‑text posts, token purchase records, and support tickets are persisted in MongoDB collections. Input validation is enforced using Joi schemas before data reaches Mongoose models, mitigating injection risks. The payment flow integrates Razorpay: /tokens/create-order creates an order, /tokens/verify-payment validates the webhook payload (raw JSON) and updates the user's token balance. Transaction history and token statistics are stored atomically to ensure consistency.
Execution Flow & Security Guardrails
Authentication is JWT‑based with refresh tokens (/register, /login, /refresh, /logout). Protected routes employ the requireAuth middleware, while admin‑only endpoints use requireAdmin. Global error handling middleware captures exceptions, logs them, and returns sanitized JSON error responses. Additional security layers include Helmet headers, strict rate limiting, and CORS configuration. Webhook endpoints parse raw bodies to verify signatures before processing payments.
Build & Deployment Topology During development, Vite serves the React bundle with hot‑module replacement, while the Express server runs in watch mode. In production, the server serves static assets generated by Vite and runs behind a Node process manager (e.g., PM2). Environment variables configure MongoDB connections, Razorpay credentials, and Node environment flags. The codebase is TypeScript‑strict, enabling compile‑time safety across the stack.
System Diagrams & Flow Visualizations
Interactive Mermaid architecture & execution flows
Core System Features
Key capabilities & architectural features
User registration, login, JWT refresh, and logout endpoints
User registration, login, JWT refresh, and logout endpoints
Authenticated profile and settings management
Authenticated profile and settings management
Token purchase flow with Razorpay order creation and verification
Token purchase flow with Razorpay order creation and verification
Token balance retrieval, purchase history, and statistics endpoints
Token balance retrieval, purchase history, and statistics endpoints
Support ticket creation, user view, and admin management
Support ticket creation, user view, and admin management
Transaction CRUD with status updates and webhook processing
Transaction CRUD with status updates and webhook processing
Package listing and invoice download functionality
Package listing and invoice download functionality
Responsive UI with dark theme, mobile‑first layout
Responsive UI with dark theme, mobile‑first layout
Rich‑text editing and sanitisation for portfolio content
Rich‑text editing and sanitisation for portfolio content
Drag‑and‑drop reordering of items with real‑time DB sync
Drag‑and‑drop reordering of items with real‑time DB sync
Engineering Challenges & Solutions
Problem statements & resolution strategies
Balancing security (webhook verification, JWT handling) with developer ergonomics in a fast‑iteration environment
Balancing security (webhook verification, JWT handling) with developer ergonomics in a fast‑iteration environment
Ensuring atomicity of token balance updates under concurrent payment callbacks
Ensuring atomicity of token balance updates under concurrent payment callbacks
Designing a modular router structure without over‑fragmenting codebase
Designing a modular router structure without over‑fragmenting codebase
Managing raw request bodies for webhook signatures while preserving Express middleware flow
Managing raw request bodies for webhook signatures while preserving Express middleware flow
Optimising MongoDB queries for high‑read token balance checks without sacrificing write performance
Optimising MongoDB queries for high‑read token balance checks without sacrificing write performance
API Reference & Endpoints
REST API surface & route documentation
| METHOD | ENDPOINT PATH | DESCRIPTION | COPY |
|---|---|---|---|
| POST | /api/register | Endpoint defined in server/auth.ts | |
| POST | /api/login | Endpoint defined in server/auth.ts | |
| POST | /api/refresh | Endpoint defined in server/auth.ts | |
| POST | /api/logout | Endpoint defined in server/auth.ts | |
| GET | /api/user | Endpoint defined in server/auth.ts | |
| POST | /register | Endpoint defined in server/routes/authRoutes.ts | |
| POST | /login | Endpoint defined in server/routes/authRoutes.ts | |
| POST | /refresh | Endpoint defined in server/routes/authRoutes.ts | |
| POST | /logout | Endpoint defined in server/routes/authRoutes.ts | |
| GET | /user | Endpoint defined in server/routes/authRoutes.ts | |
| GET | /packages | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | /webhook | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | /create-order | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | /verify | Endpoint defined in server/routes/paymentRoutes.ts | |
| GET | /history | Endpoint defined in server/routes/paymentRoutes.ts | |
| GET | /invoice/:transactionId | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | /tokens/create-order | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | /tokens/verify-payment | Endpoint defined in server/routes/paymentRoutes.ts | |
| GET | /tokens/history | Endpoint defined in server/routes/paymentRoutes.ts | |
| POST | / | Endpoint defined in server/routes/supportRoutes.ts | |
| GET | / | Endpoint defined in server/routes/supportRoutes.ts | |
| GET | /:ticketId | Endpoint defined in server/routes/supportRoutes.ts | |
| GET | /admin/tickets | Endpoint defined in server/routes/supportRoutes.ts | |
| PUT | /admin/:ticketId/status | Endpoint defined in server/routes/supportRoutes.ts | |
| POST | /verify-payment | Endpoint defined in server/routes/tokenRoutes.ts | |
| GET | /balance | Endpoint defined in server/routes/tokenRoutes.ts | |
| GET | /stats | Endpoint defined in server/routes/tokenRoutes.ts | |
| PUT | /:transactionId/status | Endpoint defined in server/routes/transactionRoutes.ts | |
| POST | /webhook/payment | Endpoint defined in server/routes/transactionRoutes.ts | |
| GET | /profile | Endpoint defined in server/routes/userRoutes.ts | |
| PUT | /profile | Endpoint defined in server/routes/userRoutes.ts | |
| PUT | /password | Endpoint defined in server/routes/userRoutes.ts | |
| DELETE | /profile | Endpoint defined in server/routes/userRoutes.ts | |
| GET | /settings | Endpoint defined in server/routes/userRoutes.ts | |
| PUT | /settings | Endpoint defined in server/routes/userRoutes.ts | |
| GET | /api/dashboard/stats | Endpoint defined in server/routes.ts | |
| GET | /api/dashboard/activity | Endpoint defined in server/routes.ts | |
| GET | /api/tokens/packages | Endpoint defined in server/routes.ts | |
| POST | /api/tokens/create-order | Endpoint defined in server/routes.ts | |
| POST | /api/tokens/verify-payment | Endpoint defined in server/routes.ts | |
| GET | /api/profile | Endpoint defined in server/routes.ts | |
| PATCH | /api/profile | Endpoint defined in server/routes.ts | |
| GET | /api/payments | Endpoint defined in server/routes.ts | |
| GET | /api/payments/summary | Endpoint defined in server/routes.ts | |
| GET | /api/settings | Endpoint defined in server/routes.ts | |
| PATCH | /api/settings | Endpoint defined in server/routes.ts | |
| POST | /api/support/tickets | Endpoint defined in server/routes.ts | |
| GET | /api/support/tickets | Endpoint defined in server/routes.ts | |
| POST | /api/chat | Endpoint defined in server/routes.ts | |
| GET | /api/chat/history | Endpoint defined in server/routes.ts | |
| GET | /api/health | Endpoint defined in server/server-mvc.ts |
Key Code Modules & Architecture
Core file entrypoints and service responsibilities
clientModule component managing client source logic
client/srcModule component managing src source logic
client/src/componentsModule component managing components source logic
client/src/components/uiModule component managing ui source logic
client/src/hooksModule component managing hooks source logic
client/src/libModule component managing lib source logic
client/src/pagesModule component managing pages source logic
serverModule component managing server source logic
server/configModule component managing config source logic
server/controllersModule component managing controllers source logic
server/middlewareModule component managing middleware source logic
server/modelsModule component managing models source logic
server/routesModule component managing routes source logic
server/servicesModule component managing services source logic
server/utilsModule component managing utils source logic
User Journey Pipeline
- 1User accesses application user interface via browser
- 2User triggers action invoking HTTP/WebSocket API endpoints
- 3Data persisted or retrieved from database storage layer
Execution Code Flow
- 1Client or caller initiates request to application entrypoint
- 2Backend router validates request parameters and applies middleware
- 3Database ORM/client executes storage query
- 4Application serializes JSON/audio/data response back to client
System FAQ & Technical Specifications
Frequently asked questions and core architecture details
Q: What technologies are used in SaaSFoundry?
SaaSFoundry is engineered using modern full-stack frameworks.
Q: What core engineering problem does SaaSFoundry solve?
Production-grade Web App software engineering system implemented in TypeScript, JavaScript. Features a decoupled multi-tier architecture with validated API endpoints and resilient state processing.
Q: How is 'Balancing security (webhook verification, JWT handling) with developer ergonomics in a fast‑iteration environment' resolved in SaaSFoundry?
Resolved through specialized system architecture and resilient state handling.
Related Systems & Case Studies
Explore similar technical architectures and projects