LeBoard on LaDoc

Fonctionnalités

Mon, 01 Jan 0001 00:00:00 +0000

Fonctionnalités#

Le plateau#

Canvas infini : zoom à la molette, déplacement au glisser. Chacun navigue librement sur le plateau.
283 cartes recto/verso : glisser-déposer, clic pour retourner, visualiseur plein écran pour lire confortablement une carte.
Post-its : notes libres, redimensionnables, avec choix de couleur et de taille de police.
Flèches : outil dédié pour tracer les liens entre cartes et post-its, avec plusieurs couleurs et styles, dans les deux sens. C’est le cœur de l’exercice systémique.
Annuler / refaire : historique des actions (Ctrl+Z / Ctrl+Y).

La collaboration temps réel#

Tous les participants voient les modifications des autres en direct, curseurs compris : chacun sait qui regarde quoi. La synchronisation passe par WebSocket (Socket.io), sans rechargement de page.

Stack technique

Mon, 01 Jan 0001 00:00:00 +0000

Stack technique#

Technologies#

Couche	Technologie
Framework	Next.js 16 (App Router) sur un serveur HTTP custom
Temps réel	Socket.io 4
Canvas	Konva.js / react-konva
Langage	TypeScript, React 19
Base de données	PostgreSQL 18 + Prisma 5, base partagée avec LeHub
Styles	Tailwind CSS 4
Infra	Docker, Nginx (avec support WebSocket)

La particularité de LeBoard est son serveur custom (server.ts) : au lieu du serveur intégré de Next.js, un serveur HTTP unique porte à la fois l’application Next.js et le serveur Socket.io. C’est ce qui permet de servir les WebSockets et les pages sur le même port.

Modèle de données

Mon, 01 Jan 0001 00:00:00 +0000

Modèle de données#

LeBoard n’a pas de base à lui : il travaille dans la base PostgreSQL de LeHub. Son dépôt porte son propre schéma Prisma, limité aux tables dont il a besoin, et c’est depuis ce dépôt que sont gérées les migrations des tables du plateau.

Les tables du plateau#

Modèle	Rôle
`Board`	Un plateau : jeton d’accès (l’URL `b/[token]`), atelier LeHub associé, état (verrouillage, lots distribués), marqueur d’atelier test
`CardPlacement`	Chaque carte posée : position, face visible (recto/verso), lot d’origine
`StickyNote`	Un post-it : position, taille, couleur, texte, taille de police
`BoardArrow` / `Connection`	Une flèche entre deux éléments : extrémités, style, couleur
`AnimatorSession`	Session SSO d’un animateur venu de LeHub (jeton signé, durée courte)

Les tables lues chez LeHub#

LeBoard lit aussi des tables administrées côté LeHub, sans les modifier :

Lancer en local

Mon, 01 Jan 0001 00:00:00 +0000

Lancer en local#

Prérequis#

Node.js 20 ou plus récent
Une instance PostgreSQL : celle de votre LeHub local, puisque les deux applications partagent la base

Installation#

git clone <dépôt LeBoard>
cd LeBoard

cp .env.example .env.local
# renseigner les variables ci-dessous

npm install
npx prisma migrate deploy # applique les migrations du plateau
npm run dev # serveur custom : Next.js + Socket.io, http://localhost:3000

Variables d’environnement#

Variable	Rôle
`DATABASE_URL`	Connexion PostgreSQL (la même base que LeHub)
`NEXT_PUBLIC_SOCKET_URL`	URL du serveur Socket.io (en production, l’URL publique de l’application)
`PORT`	Port d’écoute

Les images de cartes#

Les images ne sont pas dans le dépôt. Pour un plateau fonctionnel en local, déposer les fichiers dans public/cards/fr/ (et en/, es/ si besoin) au format card-NNN-recto.webp / card-NNN-verso.webp. Sans elles, l’application fonctionne mais les cartes s’affichent vides.

Déploiement

Mon, 01 Jan 0001 00:00:00 +0000

Déploiement#

Mise en production#

LeBoard se déploie par script sur le VPS, sur le même principe que les autres applications :

git pull
docker compose build
docker compose up -d
docker compose exec app npx prisma migrate deploy

Les migrations appliquées ici ne concernent que les tables du plateau (voir Modèle de données) ; celles de LeHub sont appliquées par son propre déploiement.

Nginx et les WebSockets#

Le virtual host de board.fresquesystemique.org a une exigence de plus que les autres : le support WebSocket. La configuration Nginx transmet les en-têtes de montée en version du protocole :