🖥️ Frontend

Le frontend LIPAIX est construit avec Next.js 15 en utilisant l'App Router. Cette page explique comment l'application est structurée et comment fonctionnent ses trois sections distinctes.

🧱 Les bases de l'App Router

Next.js App Router utilise le système de fichiers pour le routage : un dossier appelé accueil correspond à l'URL /accueil. Les fichiers nommés page.tsx à l'intérieur de ces dossiers définissent ce qui est affiché.

Par défaut, les composants sont des Server Components — ils s'exécutent sur le serveur, pas dans le navigateur. Cela signifie qu'ils peuvent lire directement depuis la base de données et n'envoient pas de JavaScript inutile au navigateur. Les composants qui nécessitent de l'interactivité (gestionnaires de clics, mises à jour en temps réel) sont explicitement marqués comme Client Components avec 'use client' en haut du fichier.

🗺️ Groupes de routes

L'application est divisée en trois groupes de routes — des dossiers entre parenthèses qui organisent les routes sans affecter l'URL :

(frontend) — Site public

Tout ce que les visiteurs voient sur lipaix.com :

Route	URL	Ce qu'elle affiche
accueil/	/	Page d'accueil avec les prochains spectacles
billetterie/	/billetterie	Liste complète des événements avec réservation
evenement/[eventId]/[slug]/	/evenement/...	Page de détail d'un événement
qui-sommes-nous/	/qui-sommes-nous	À propos du groupe
impro/	/impro	C'est quoi l'impro ?
videos/	/videos	Galerie vidéo
amis/	/amis	Troupes partenaires

Ces pages sont des Server Components qui appellent l'API locale de PayloadCMS pour récupérer des données. L'API locale est un appel en-processus — pas d'aller-retour HTTP, très rapide.

Les pages sont générées statiquement au moment du build et mises en cache via ISR (Incremental Static Regeneration) avec une fenêtre de revalidation d'1 heure. Cliquez sur Revalider le cache dans MyLipaix pour invalider immédiatement après un changement de contenu.

(payload) — MyLipaix et API

L'interface MyLipaix de PayloadCMS (à /admin) et tous les endpoints API personnalisés (à /api/v1/). Consultez Backend & MyLipaix pour la liste complète des collections, vues et endpoints.

(live) — Affichage du live show

La page d'affichage public pour les spectacles Public Investigation :

Route	URL	Ce qu'elle affiche
live/[eventId]/	/live/[eventId]	Affichage du spectacle en temps réel

Cette page est un Client Component qui s'abonne à un flux Server-Sent Events (SSE). Quand le coordinateur met à jour l'Admin Live, le flux pousse les changements et la page se re-rend en temps réel.

Double-cliquez sur la page pour passer en plein écran.

🎨 Styles

TailwindCSS — classes utilitaires appliquées directement dans le JSX. Le design utilise une palette de couleurs personnalisée (orange primaire, accent teal) définie dans tailwind.config.ts.

⚙️ Configuration PayloadCMS

Le schéma complet de la base de données et la configuration MyLipaix se trouvent dans :

apps/web/src/payload.config.ts

Les définitions de collections se trouvent dans apps/web/src/admin/collections/. Les vues MyLipaix personnalisées se trouvent dans apps/web/src/admin/views/.

♻️ Code partagé

Le package shared/common (shared/common/src/) est importé par apps/web et apps/discord-bot. Il exporte :

• Adaptateurs d'événements : transforme les documents Show de PayloadCMS en objets du domaine
• Constructeurs de messages Discord : formate les données de distribution et de disponibilité pour les messages Discord
• Définitions de types : interfaces TypeScript partagées (Event, Player, Availability, etc.)

Importez depuis @lipaix/common dans les deux applications.