Documentation
Detailed System Architecture Design

Detailed System Architecture Design

O2O Online Streamer Advertising Project - Detailed System Architecture Design

1. System Overview

This project is an O2O platform for online personal information promotion, supporting three user roles: players, companion streamers, and administrators. It includes three main systems: Portal (marketing website), Admin (CMS management platform), and Server (backend services).

2. Overall System Architecture

graph TB
    subgraph "User Layer"
        U1[Guest Users]
        U2[Player Users]
        U3[Companion Streamers]
        U4[Administrators]
    end

    subgraph "Frontend Application Layer"
        P1[Portal Marketing Website<br/>super-game/apps/web/app/marketing]
        P2[Admin Management Platform<br/>super-game/apps/web/app/saas]
    end

    subgraph "API Gateway Layer"
        API[API Service<br/>super-game/packages/api]
    end

    subgraph "Business Service Layer"
        AUTH[Authentication Service<br/>packages/auth]
        MAIL[Email Service<br/>packages/mail]
        PAY[Payment Service<br/>packages/payments]
        STORAGE[Storage Service<br/>packages/storage]
        AI[AI Service<br/>packages/ai]
        LOGS[Logging Service<br/>packages/logs]
        UTILS[Utility Service<br/>packages/utils]
    end

    subgraph "Data Layer"
        DB[(PostgreSQL Database<br/>packages/database)]
        MINIO[(MinIO Object Storage<br/>minio/data)]
    end

    subgraph "External Services"
        STRIPE[Stripe Payment]
        TWILIO[Twilio SMS]
        GOOGLE[Google reCAPTCHA]
        SMTP[SMTP Email Service]
    end

    %% User access relationships
    U1 --> P1
    U2 --> P1
    U3 --> P1
    U2 --> P2
    U3 --> P2
    U4 --> P2

    %% Frontend to API
    P1 --> API
    P2 --> API

    %% API to business services
    API --> AUTH
    API --> MAIL
    API --> PAY
    API --> STORAGE
    API --> AI
    API --> LOGS
    API --> UTILS

    %% Business services to data layer
    AUTH --> DB
    MAIL --> DB
    PAY --> DB
    STORAGE --> DB
    STORAGE --> MINIO
    AI --> DB
    LOGS --> DB
    UTILS --> DB

    %% External service integration
    PAY --> STRIPE
    MAIL --> SMTP
    AUTH --> GOOGLE
    API --> TWILIO

    classDef userClass fill:#e1f5fe
    classDef frontendClass fill:#f3e5f5
    classDef apiClass fill:#e8f5e8
    classDef serviceClass fill:#fff3e0
    classDef dataClass fill:#fce4ec
    classDef externalClass fill:#f1f8e9

    class U1,U2,U3,U4 userClass
    class P1,P2 frontendClass
    class API apiClass
    class AUTH,MAIL,PAY,STORAGE,AI,LOGS,UTILS serviceClass
    class DB,MINIO dataClass
    class STRIPE,TWILIO,GOOGLE,SMTP externalClass

3. Technology Stack Architecture

graph LR
    subgraph "Frontend Tech Stack"
        FE1[Next.js 14]
        FE2[React 18]
        FE3[TypeScript]
        FE4[Tailwind CSS]
        FE5[React Query]
    end

    subgraph "Backend Tech Stack"
        BE1[Node.js]
        BE2[TypeScript]
        BE3[Prisma ORM]
        BE4[Express.js]
    end

    subgraph "Database"
        DB1[PostgreSQL]
        DB2[Redis Cache]
    end

    subgraph "Storage Services"
        ST1[MinIO]
        ST2[AWS S3 Compatible]
    end

    subgraph "Third-party Integration"
        TP1[Stripe Payment]
        TP2[Twilio SMS]
        TP3[SMTP Email]
        TP4[Google reCAPTCHA]
    end

    FE1 --> BE1
    BE3 --> DB1
    BE1 --> ST1
    BE1 --> TP1
    BE1 --> TP2
    BE1 --> TP3
    FE1 --> TP4

4. Deployment Architecture

graph TB
    subgraph "Load Balancing Layer"
        LB[Nginx Load Balancer]
    end

    subgraph "Application Server Cluster"
        APP1[App Server 1<br/>Portal + Admin]
        APP2[App Server 2<br/>Portal + Admin]
        APP3[App Server 3<br/>Portal + Admin]
    end

    subgraph "API Server Cluster"
        API1[API Server 1]
        API2[API Server 2]
    end

    subgraph "Database Cluster"
        MASTER[(PostgreSQL Master)]
        SLAVE1[(PostgreSQL Slave 1)]
        SLAVE2[(PostgreSQL Slave 2)]
    end

    subgraph "Cache Cluster"
        REDIS1[(Redis Master Node)]
        REDIS2[(Redis Slave Node)]
    end

    subgraph "Storage Cluster"
        MINIO1[(MinIO Node 1)]
        MINIO2[(MinIO Node 2)]
        MINIO3[(MinIO Node 3)]
    end

    LB --> APP1
    LB --> APP2
    LB --> APP3

    APP1 --> API1
    APP2 --> API1
    APP3 --> API2
    APP1 --> API2
    APP2 --> API2
    APP3 --> API1

    API1 --> MASTER
    API2 --> MASTER
    API1 --> SLAVE1
    API2 --> SLAVE2

    API1 --> REDIS1
    API2 --> REDIS1
    REDIS1 --> REDIS2

    API1 --> MINIO1
    API2 --> MINIO2
    MINIO1 --> MINIO2
    MINIO2 --> MINIO3
    MINIO3 --> MINIO1

5. Security Architecture

graph TB
    subgraph "Security Protection Layer"
        WAF[Web Application Firewall]
        DDoS[DDoS Protection]
        SSL[SSL/TLS Encryption]
    end

    subgraph "Authentication & Authorization Layer"
        JWT[JWT Token Authentication]
        RBAC[Role-Based Access Control]
        OAUTH[OAuth2.0 Integration]
        RECAPTCHA[reCAPTCHA Verification]
    end

    subgraph "Data Security Layer"
        ENCRYPT[Data Encryption Storage]
        BACKUP[Data Backup]
        AUDIT[Audit Logs]
    end

    subgraph "Network Security Layer"
        VPC[Private Network]
        FIREWALL[Firewall Rules]
        VPN[VPN Access]
    end

    WAF --> JWT
    DDoS --> JWT
    SSL --> JWT
    
    JWT --> RBAC
    OAUTH --> RBAC
    RECAPTCHA --> RBAC
    
    RBAC --> ENCRYPT
    RBAC --> AUDIT
    
    ENCRYPT --> VPC
    BACKUP --> VPC
    AUDIT --> FIREWALL

6. Data Flow Architecture

flowchart TD
    subgraph "Data Input Layer"
        INPUT1[User Registration Data]
        INPUT2[Streamer Profile Data]
        INPUT3[Order Payment Data]
        INPUT4[Review Feedback Data]
    end

    subgraph "Data Processing Layer"
        VALIDATE[Data Validation]
        TRANSFORM[Data Transformation]
        ENRICH[Data Enrichment]
    end

    subgraph "Data Storage Layer"
        OLTP[(OLTP Database<br/>Real-time Transactions)]
        OLAP[(OLAP Database<br/>Analytics Reports)]
        CACHE[(Cache Layer)]
        FILES[(File Storage)]
    end

    subgraph "Data Output Layer"
        API_OUT[API Interface Output]
        REPORT[Report Output]
        NOTIFICATION[Notification Push]
        EXPORT[Data Export]
    end

    INPUT1 --> VALIDATE
    INPUT2 --> VALIDATE
    INPUT3 --> VALIDATE
    INPUT4 --> VALIDATE

    VALIDATE --> TRANSFORM
    TRANSFORM --> ENRICH

    ENRICH --> OLTP
    ENRICH --> CACHE
    ENRICH --> FILES
    OLTP --> OLAP

    OLTP --> API_OUT
    CACHE --> API_OUT
    OLAP --> REPORT
    OLTP --> NOTIFICATION
    OLAP --> EXPORT

7. Microservices Architecture Diagram

graph TB
    subgraph "User Service Domain"
        USER_SVC[User Service]
        AUTH_SVC[Authentication Service]
        PROFILE_SVC[Profile Service]
    end

    subgraph "Business Service Domain"
        ORDER_SVC[Order Service]
        PAYMENT_SVC[Payment Service]
        REVIEW_SVC[Review Service]
        FAVORITE_SVC[Favorite Service]
    end

    subgraph "Content Service Domain"
        AD_SVC[Advertisement Service]
        CONTENT_SVC[Content Service]
        MEDIA_SVC[Media Service]
    end

    subgraph "Notification Service Domain"
        EMAIL_SVC[Email Service]
        SMS_SVC[SMS Service]
        PUSH_SVC[Push Service]
    end

    subgraph "Data Service Domain"
        ANALYTICS_SVC[Analytics Service]
        REPORT_SVC[Report Service]
        LOG_SVC[Logging Service]
    end

    subgraph "Infrastructure Layer"
        CONFIG_SVC[Configuration Center]
        DISCOVERY_SVC[Service Discovery]
        GATEWAY_SVC[API Gateway]
        MONITOR_SVC[Monitoring Service]
    end

    %% Inter-service dependencies
    USER_SVC --> AUTH_SVC
    PROFILE_SVC --> USER_SVC
    ORDER_SVC --> USER_SVC
    ORDER_SVC --> PAYMENT_SVC
    REVIEW_SVC --> ORDER_SVC
    FAVORITE_SVC --> USER_SVC
    AD_SVC --> PAYMENT_SVC
    CONTENT_SVC --> MEDIA_SVC
    EMAIL_SVC --> USER_SVC
    SMS_SVC --> USER_SVC
    ANALYTICS_SVC --> ORDER_SVC
    REPORT_SVC --> ANALYTICS_SVC

    %% Infrastructure dependencies
    GATEWAY_SVC --> USER_SVC
    GATEWAY_SVC --> ORDER_SVC
    GATEWAY_SVC --> AD_SVC
    DISCOVERY_SVC --> CONFIG_SVC
    MONITOR_SVC --> LOG_SVC

8. Architecture Features

8.1 High Availability

  • Multi-instance deployment with horizontal scaling support
  • Database master-slave replication with read-write separation
  • Cache clustering for improved response speed
  • Load balancing to distribute access pressure

8.2 Security

  • JWT token authentication mechanism
  • RBAC permission control
  • Encrypted data storage
  • API access rate limiting
  • reCAPTCHA anti-bot protection

8.3 Scalability

  • Microservices architecture with independent service deployment
  • Containerized deployment supporting elastic scaling
  • Asynchronous processing with message queues
  • CDN acceleration for static resources

8.4 Maintainability

  • Unified log collection and monitoring
  • Automated deployment pipelines
  • Code version management
  • Comprehensive documentation system

9. Performance Metrics

MetricTarget ValueDescription
Response Time< 200msAverage API response time
Concurrent Users10,000+Simultaneous online users
Availability99.9%Annual system availability
Data ConsistencyStrong ConsistencyCritical business data
Storage Capacity10TB+Support for massive data storage

10. Technology Selection Rationale

10.1 Frontend Technology Selection

  • Next.js 14: Supports SSR/SSG, SEO-friendly
  • React 18: Modern UI framework with rich ecosystem
  • TypeScript: Type safety, improves code quality
  • Tailwind CSS: Atomic CSS for rapid development
  • React Query: Data fetching and cache management

10.2 Backend Technology Selection

  • Node.js: Full-stack JavaScript development
  • Prisma ORM: Type-safe database access
  • PostgreSQL: Relational database supporting complex queries
  • Redis: High-performance caching and session storage
  • MinIO: Object storage compatible with S3 API

10.3 Third-party Service Selection

  • Stripe: International payment solution
  • Twilio: Reliable SMS service
  • Google reCAPTCHA: Anti-bot verification
  • SMTP: Email delivery service

Module Dependency Diagram

Previous Page

User Access Flow Sequence Diagrams

Next Page