1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
%%{init: {'theme': 'base', 'flowchart': {'nodeSpacing': 40, 'rankSpacing': 50}}}%%
flowchart TB
subgraph infra ["Infrastructure - Docker / Traefik"]
traefik["Traefik<br/>Reverse Proxy<br/>SSL termination"]
compose["docker-compose.yml<br/>infra/"]
end
subgraph frontend ["Frontend - apps/portal"]
nextjs["Next.js 15<br/>React 19 + TypeScript"]
r3f["React Three Fiber<br/>Scenes 3D"]
tailwind["Tailwind CSS<br/>+ Radix + shadcn/ui"]
zustand["Zustand<br/>State management"]
tanstack["TanStack Query<br/>Data fetching"]
intl["next-intl<br/>i18n"]
end
subgraph backend ["Backend - services/event-hub"]
fastify["Fastify<br/>API REST + tRPC"]
socketio["Socket.IO<br/>Temps reel / WebSocket"]
zod["Zod<br/>Validation schemas"]
end
subgraph sdk ["Packages - packages/widget-sdk"]
widget_sdk["Widget SDK<br/>Embeds + iframes sandboxes"]
events["Systeme d evenements<br/>postMessage"]
end
subgraph identity ["Identite - IAM"]
keycloak["Keycloak<br/>npagnun:8080<br/>OIDC / JWT"]
end
subgraph data ["Donnees (prevu)"]
postgres["PostgreSQL<br/>Prisma ORM"]
redis["Redis<br/>Cache + sessions"]
end
subgraph monitoring ["Observabilite (prevu)"]
otel["OpenTelemetry"]
sentry["Sentry<br/>Error tracking"]
posthog["PostHog<br/>Analytics"]
end
subgraph tooling ["Tooling"]
turbo["TurboRepo<br/>Monorepo"]
pnpm["PNPM<br/>Package manager"]
end
traefik --> nextjs
traefik --> fastify
nextjs --> zustand
nextjs --> tanstack
nextjs --> r3f
nextjs --> tailwind
nextjs --> intl
tanstack -->|"API calls"| fastify
fastify --> socketio
fastify --> zod
fastify -->|"Prisma"| postgres
fastify --> redis
nextjs -->|"OIDC"| keycloak
fastify -->|"Token verify"| keycloak
widget_sdk --> events
widget_sdk -->|"iframe"| nextjs
turbo --> frontend
turbo --> backend
turbo --> sdk
classDef infraStyle fill:#2a3a4a,stroke:#6a8aaa,color:#b0d0e8
classDef feStyle fill:#1e3a5f,stroke:#4a90d9,color:#a8d0f0
classDef beStyle fill:#1e4a2e,stroke:#4a9a6a,color:#a8e0c0
classDef sdkStyle fill:#3a1e5f,stroke:#8a6ad9,color:#c8b0f0
classDef iamStyle fill:#4a1e3a,stroke:#d94a8a,color:#f0a8c8
classDef storStyle fill:#4a3a1e,stroke:#d9a84a,color:#f0d8a8
classDef dormStyle fill:#2a2a2a,stroke:#666,color:#999
classDef toolStyle fill:#3a3a1e,stroke:#9a9a4a,color:#e0e0a8
class traefik,compose infraStyle
class nextjs,r3f,tailwind,zustand,tanstack,intl feStyle
class fastify,socketio,zod beStyle
class widget_sdk,events sdkStyle
class keycloak iamStyle
class postgres,redis storStyle
class otel,sentry,posthog dormStyle
class turbo,pnpm toolStyle
style data stroke-dasharray: 5 5
style monitoring stroke-dasharray: 5 5
|
