Architecture du système

Vue d'ensemble

La plateforme Kogitec est une application web full-stack construite en TypeScript, organisée en un monorepo avec npm workspaces. L'architecture suit un modèle modulaire où chaque module encapsule ses responsabilités client, serveur et communes.

Diagramme d'architecture

graph TB
    subgraph Client["Client (React 19 + Vite 8)"]
        App["App Entry Point"]
        App --> BenevaUI["Beneva UI"]
        App --> MetalturaUI["Metaltura UI"]
        App --> KitchenUI["Kitchen UI"]
        App --> ChatUI["Chat UI"]
        App --> ConsoleUI["Console UI"]
    end

    subgraph Server["Serveur (Express 5)"]
        Express["Express Server"]
        Express --> SocketIO["Socket.io Server"]
        Express --> MongoDB["MongoDB 7"]
    end

    subgraph Platform["Modules Plateforme"]
        Core["core"]
        Schema["schema"]
        Socket["socket"]
        Doc["doc"]
        Security["security"]
        Metaltura["metaltura"]
        Console["console"]
    end

    Client <-->|WebSocket| SocketIO
    Client <-->|HTTP| Express

Graphe de dépendances des modules plateforme

graph TD
    Console["console"] --> Core["core"]
    Console --> Schema["schema"]
    Console --> Security["security"]
    Console --> Doc["doc"]
    Console --> Socket["socket"]
    Console --> Metaltura["metaltura"]

    Security --> Core
    Security --> Socket
    Security --> Doc
    Security --> Schema

    Metaltura --> Core
    Metaltura --> Socket
    Metaltura --> Doc
    Metaltura --> Schema

    Doc --> Core
    Doc --> Socket
    Doc --> Schema

    Schema --> Core
    Schema --> Socket

    Socket --> Core

Graphe de dépendances des modules application

graph TD
    App["app"] --> Core["core"]
    App --> Schema["schema"]
    App --> Socket["socket"]
    App --> Doc["doc"]
    App --> Security["security"]
    App --> Metaltura["metaltura"]
    App --> Console["console"]
    App --> Members["members"]
    App --> Chat["chat"]
    App --> Kitchen["kitchen"]
    App --> Beneva["beneva"]

    Kitchen --> Members
    Kitchen --> Core
    Kitchen --> Schema
    Kitchen --> Doc
    Kitchen --> Socket

    Chat --> Core
    Chat --> Socket
    Chat --> Doc
    Chat --> Schema

    Members --> Core
    Members --> Doc
    Members --> Schema

    Beneva --> Core
    Beneva --> Doc
    Beneva --> Schema

Couches de communication

Transport WebSocket (Socket.io)

Le transport WebSocket gère les communications en temps réel entre le client et le serveur :

sequenceDiagram
    participant Client
    participant Socket.io
    participant ServerService
    participant MongoDB

    Client->>Socket.io: socket.emit('service', name, method, args)
    Socket.io->>ServerService: handleServiceCall(name, method, args)
    ServerService->>MongoDB: Query/Mutation
    MongoDB-->>ServerService: Result
    ServerService-->>Socket.io: callback({ result })
    Socket.io-->>Client: Response

Publications et souscriptions

Le système pub/sub permet aux clients de recevoir des mises à jour en temps réel :

sequenceDiagram
    participant Client
    participant SubscriptionContext
    participant ServerPubService
    participant MongoDB

    Client->>SubscriptionContext: useSubscription(definition, params)
    SubscriptionContext->>ServerPubService: subscribe(params)
    ServerPubService->>MongoDB: Watch/Query
    MongoDB-->>ServerPubService: Data
    ServerPubService-->>SubscriptionContext: pubSubMessage(data)
    SubscriptionContext-->>Client: callback(data)

Structure d'un module

Chaque module suit la même structure interne :

modules/<catégorie>/<nom>/
├── package.json          # Dépendances inter-modules uniquement
├── tsconfig.json         # Étend la config racine
└── src/
    ├── client/           # Composants React, hooks, logique côté client
    │   └── index.ts      # Export barrel public
    ├── server/           # Routes Express, services, accès BD
    │   └── index.ts      # Export barrel public
    └── common/           # Types partagés, entités, utilitaires
        └── index.ts      # Export barrel public

Flux de données

flowchart LR
    A[Composant React] -->|useService| B[Socket.io Client]
    B -->|WebSocket| C[Socket.io Server]
    C -->|ServerService| D[Service]
    D -->|ServerDocService| E[MongoDB]
    E -->|Publication| F[ServerPubService]
    F -->|pubSubMessage| B
    B -->|useSubscription| A

Déploiement

L'application est conteneurisée avec Docker et déployée via GitHub Actions :

flowchart LR
    A[Push Git] --> B[GitHub Actions]
    B --> C[Tests]
    C --> D[Build Client + Serveur]
    D --> E[Docker Build]
    E --> F[Push GHCR]
    F --> G[Docker Compose]
    G --> H[Traefik Reverse Proxy]