C2 · Conteneurs¶

Le diagramme de conteneurs (niveau 2 du modèle C4) zoome à l'intérieur du système Primatch et montre les grands blocs technologiques et leurs interactions.

Diagramme¶

C4Container
    title Conteneurs — Primatch

    Person(user, "Utilisateur", "Joueur, Organisateur ou Admin")

    Container_Boundary(primatch, "Primatch") {
        Container(frontend, "SPA React", "React 19 + TypeScript\nVite 6", "Interface utilisateur web\naccessible depuis le navigateur")
        Container(api, "API Laravel", "Laravel 12\nPHP 8.3", "API REST versionnée\n/api/v1/")
        Container(nginx, "Nginx", "Reverse Proxy", "Routage des requêtes\nSSL termination")
        ContainerDb(postgres, "PostgreSQL 16", "Base de données", "Données persistantes\n(users, matches, tournaments)")
        ContainerDb(redis, "Redis 7", "Cache / Sessions / Queues", "Cache applicatif\nQueues de jobs\nBlacklist JWT")
        Container(soketi, "Soketi", "WebSockets Server", "Notifications temps réel\nScore en direct")
    }

    System_Ext(email, "Service Email", "SMTP")

    Rel(user, nginx, "HTTPS :443 / :80")
    Rel(nginx, frontend, "Proxy :3010")
    Rel(nginx, api, "Proxy :8010")
    Rel(frontend, soketi, "WebSocket :8090")
    Rel(api, postgres, "TCP :5432")
    Rel(api, redis, "TCP :6379")
    Rel(api, soketi, "HTTP Events")
    Rel(api, email, "SMTP")

Description des conteneurs¶

Flux de données principaux¶

Authentification¶

Browser → Nginx → API Laravel → PostgreSQL (user check)
                             ← JWT token

Saisie de score en temps réel¶

Joueur A → API → Validation → PostgreSQL (score saved)
                           → Redis (job queue)
                           → Soketi (broadcast event)
                                    → Joueur B (WebSocket)