🖥️ Frontend

The LIPAIX frontend is built with Next.js 15 using the App Router. This page explains how the app is structured and how its three distinct sections work.

App Router basics

Next.js App Router uses the filesystem for routing: a folder called accueil maps to the URL /accueil. Files named page.tsx inside those folders define what's displayed.

By default, components are Server Components — they run on the server, not in the browser. This means they can read from the database directly and don't send unnecessary JavaScript to the browser. Components that need interactivity (click handlers, real-time updates) are explicitly marked as Client Components with 'use client' at the top of the file.

Route groups

The app is divided into three route groups — folders in parentheses that organize routes without affecting the URL:

(frontend) — Public website

Everything at lipaix.com that visitors see:

Route	URL	What it shows
accueil/	/	Home page with upcoming shows
billetterie/	/billetterie	Full event list with booking
evenement/[eventId]/[slug]/	/evenement/...	Event detail page
qui-sommes-nous/	/qui-sommes-nous	About the group
impro/	/impro	What is improv?
videos/	/videos	Video gallery
amis/	/amis	Partner troupes

These pages are Server Components that call the PayloadCMS local API to fetch data. The local API is an in-process call — no HTTP round-trip, very fast.

Pages are statically generated at build time and cached via ISR (Incremental Static Regeneration) with a 1-hour revalidation window. Click Revalidate Cache in MyLipaix to invalidate immediately after content changes.

(payload) — MyLipaix and API

The PayloadCMS MyLipaix interface (at /admin) and all custom API endpoints (at /api/v1/). See Backend & MyLipaix for the full list of collections, views, and endpoints.

(live) — Live show display

The public display page for Public Investigation shows:

Route	URL	What it shows
live/[eventId]/	/live/[eventId]	Real-time show display

This page is a Client Component that subscribes to a Server-Sent Events (SSE) stream. As the coordinator updates the Live Admin, the stream pushes changes and the page re-renders in real time.

Double-click the page to enter fullscreen.

Styling

TailwindCSS — utility classes applied directly in JSX. The design uses a custom color palette (orange primary, teal accent) defined in tailwind.config.ts.

PayloadCMS configuration

The full database schema and MyLipaix configuration lives at:

apps/web/src/payload.config.ts

Collection definitions are in apps/web/src/admin/collections/. Custom MyLipaix views are in apps/web/src/admin/views/.

Shared code

The shared/common package (shared/common/src/) is imported by both apps/web and apps/discord-bot. It exports:

• Event adapters: transforms PayloadCMS Show documents into plain domain objects
• Discord message builders: formats lineup and availability data for Discord messages
• Type definitions: shared TypeScript interfaces (Event, Player, Availability, etc.)

Import from @lipaix/common in both apps.