🏗️ Architecture
Threadwp follows a modern three-tier architecture designed for scalability, maintainability, and performance.
System Overview
Architecture Diagram
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ React Frontend│ │ Socket.IO Server│ │ WordPress Plugin│
│ │◄──►│ │◄──►│ │
│ - TypeScript │ │ - Node.js │ │ - PHP Classes │
│ - Tailwind CSS │ │ - Express │ │ - REST API │
│ - Real-time UI │ │ - WebSocket │ │ - Database │
└─────────────────┘ └──────────────────┘ └─────────────────┘Components
1.WordPress Plugin
/wp-plugin/The core WordPress integration handling authentication, data persistence, and admin functionality.
PHPWordPress APIMySQL
- REST API endpoints for chat operations
- Database management and migrations
- User authentication and permissions
- Admin interface for configuration
2.Socket.IO Server
/socket-server/Real-time WebSocket server handling live communication between users.
Node.jsSocket.IOExpress
- Real-time WebSocket communication
- Event handling for messages, typing, presence
- WordPress API integration
- Connection management
3.React Frontend
/wp-plugin/app/resources/Modern chat interface providing an intuitive user experience.
ReactTypeScriptTailwind CSS
- Modern chat interface
- Real-time message handling
- Optimistic UI updates
- Connection status management
Technology Stack
Frontend
React 18TypeScriptTailwind CSSViteSocket.IO Client
Backend
Node.jsSocket.IOExpressWordPress REST API
WordPress
PHP 7.4+WordPress 5.6+MySQL/MariaDBComposer
Data Flow
Message Sending Flow
- 1User types message in React frontend
- 2Frontend emits Socket.IO event to server
- 3Socket.IO server validates and saves message via WordPress REST API
- 4Server broadcasts message to relevant connected users
- 5Frontend receives and displays message in real-time
