🏗️ Architecture
🧩 Le monorepo
LIPAIX utilise un monorepo — un seul dépôt Git qui contient plusieurs applications et packages partagés. Cela signifie que tout le code de l'application web, du bot Discord et de la documentation se trouve au même endroit, ce qui facilite le partage de code et maintient la cohérence.
lipaix/
├── apps/
│ ├── web/ # Next.js 15 + PayloadCMS 3
│ └── discord-bot/ # Bot Discord.js 14
├── shared/
│ └── common/ # Code TypeScript partagé
└── docs/
└── vitepress/ # Cette documentationLe dépôt utilise les workspaces pnpm pour gérer les dépendances de tous ces packages depuis un seul pnpm install à la racine.
🖥️ apps/web — Application web
C'est la partie la plus importante du projet. C'est une application Next.js 15 qui fait tourner trois sections distinctes dans un seul processus :
Groupes de routes
Next.js organise les routes via des groupes de routes — des dossiers entre parenthèses qui regroupent les routes liées sans affecter l'URL. L'application apps/web en possède trois :
(frontend) — Le site public
Tout ce que voient les visiteurs sur lipaix.com : la page d'accueil, les listes d'événements, les pages de détail, la page À propos, Impro, Vidéos et Amis.
(payload) — MyLipaix et l'API
L'interface MyLipaix de PayloadCMS (à /admin) et tous les endpoints API personnalisés sous /api/v1/. PayloadCMS tourne à l'intérieur de Next.js et partage le même processus.
(live) — L'affichage du live show
La page d'affichage public à /live/[eventId] utilisée pendant les spectacles Public Investigation. Elle se connecte au serveur via un flux temps réel (SSE) pour recevoir les mises à jour pendant que le coordinateur fait des changements dans l'Admin Live.
PayloadCMS
PayloadCMS est un CMS headless (Content Management System) — pensez-y comme une base de données configurable avec un panneau d'administration intégré. Dans LIPAIX, il gère :
- Le schéma de la base de données (toutes les collections sont définies en TypeScript)
- L'interface MyLipaix
- L'authentification (OAuth Discord)
- Une API REST pour les collections
La configuration de PayloadCMS se trouve dans apps/web/src/payload.config.ts.
🤖 apps/discord-bot — Bot Discord
Un service Node.js autonome construit avec Discord.js 14. Il :
- Enregistre les commandes slash auprès de Discord
- Écoute les interactions des commandes slash
- Appelle l'API
/api/v1/de l'application web pour récupérer des données - Formate la réponse et la renvoie à l'utilisateur
Il tourne comme un processus séparé, complètement indépendant de l'application web.
♻️ shared/common — Code partagé
Un package TypeScript importé par apps/web et apps/discord-bot. Il contient :
- Adaptateurs : transforme les données du format PayloadCMS en objets du domaine
- Constructeurs de messages : formate les messages Discord (publications de distribution, listes de disponibilités)
- Définitions de types : types TypeScript partagés pour les événements, joueurs, disponibilités, etc.
Cela évite de dupliquer la logique métier dans les deux applications.
🔄 Flux de données
Site public → données
Les Server Components dans le groupe de routes (frontend) appellent l'API locale de PayloadCMS directement (en-processus, sans HTTP). C'est rapide et sécurisé — pas d'aller-retour réseau nécessaire.
Bot Discord → données
Le bot appelle l'API REST de l'application web (/api/v1/) via HTTP, en s'authentifiant avec le LIPAIX_API_TOKEN.
Affichage live → données
La page /live/[eventId] s'abonne à un flux Server-Sent Events (SSE) à /api/v1/pi-session/[eventId]/stream. L'Admin Live pousse les mises à jour via ce flux en temps réel.
Site public → API locale PayloadCMS → PostgreSQL
Bot Discord → /api/v1/ (HTTP) → PostgreSQL
Affichage live → /api/v1/.../stream → PostgreSQL (SSE)🧰 Résumé des technologies
| Couche | Technologie |
|---|---|
| Framework frontend | Next.js 15 (App Router, React 19) |
| CMS & MyLipaix | PayloadCMS 3 |
| Base de données | PostgreSQL |
| Styles | TailwindCSS |
| Bot Discord | Discord.js 14 |
| Langage | TypeScript (partout) |
| Gestionnaire de paquets | pnpm workspaces |
| Hébergement | Railway |