LeHub on LaDoc

Fonctionnalités

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

Fonctionnalités#

LeHub couvre toute la vie de l’association : gestion des membres et de leurs parcours, organisation des ateliers, paiements, contenus éditoriaux, e-mails transactionnels et badges numériques. Ce catalogue suit le découpage de l’application en deux espaces, membres et admin.

Espace membres#

Tableau de bord#

Chaque membre arrive sur un tableau de bord personnalisé qui s’adapte à son rôle (adhérent, animateur·ice, formateur·ice) :

statut de cotisation en pastille cliquable (À jour, Expirée, Interne, Exempt), synchronisé automatiquement avec HelloAsso ;
progression dans les parcours (deux axes indépendants : animateur·ice / formateur·ice, chacun décliné citoyen·ne / pro) ;
badges Open Badges obtenus.

Profil#

Photo personnalisée ou Gravatar, bio, tagline « En une ligne », genre, localisation, téléphone, liaison LinkedIn (OAuth), changement de mot de passe et suppression de compte.

Stack technique

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

Stack technique#

Technologies#

Couche	Technologie
Framework	Next.js 16 (App Router, React Server Components)
Langage	TypeScript, React 19
Authentification	NextAuth v5 (sessions JWT, LinkedIn OAuth)
Base de données	PostgreSQL 18, ORM Prisma 5
Styles	Tailwind CSS 4, composants shadcn/ui
Paiements	HelloAsso (checkout intents et webhooks)
E-mails	Resend
Tests	Jest (environnement jsdom), Testing Library
Infra	Docker, Nginx, GitHub Actions

Structure du code#

Trois espaces de routes#

L’App Router organise l’application en espaces, chacun avec son layout.tsx qui fait le contrôle d’accès :

Modèle de données

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

Modèle de données#

Le schéma Prisma (prisma/schema.prisma) est la source de vérité : 28 modèles, que l’on peut regrouper en cinq domaines. La base est partagée avec LeBoard, qui possède ses propres tables dans le même schéma.

Les relations au cœur du système#

erDiagram
 Member ||--o{ WorkshopAnimator : anime
 Workshop ||--o{ WorkshopAnimator : "animé par (lead/co)"
 Workshop ||--o{ Registration : "reçoit"
 Participant ||--o{ Registration : "s'inscrit"
 Workshop ||--o{ WaitlistEntry : "liste d'attente"
 Workshop }o--|| Organisation : "rattaché à (optionnel)"
 Member ||--o{ OrganisationManager : "gère"
 Organisation ||--o{ OrganisationManager : "gérée par"
 Member ||--o{ CotisationPayment : "cotise"
 Member ||--o{ BadgeAssertion : "reçoit des badges"
 Workshop }o--|| WorkshopModel : "modèle de plateau"
 Workshop ||--o| Board : "plateau en ligne"

Deux entités jouent des rôles proches mais distincts :

Lancer en local

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

Lancer en local#

Prérequis#

Node.js 20 ou plus récent
Docker (pour PostgreSQL) ou une instance PostgreSQL locale

Installation#

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

cp .env.example .env.local
# remplir les variables (voir tableau ci-dessous)

npm install
npx prisma migrate dev # crée la base et applique les migrations
npm run db:seed # données de démarrage (optionnel)
npm run dev # http://localhost:3000

Variables d’environnement#

Les valeurs ne sont jamais documentées ici ; seul le nom et le rôle de chaque variable le sont. Les variables e-mail et HelloAsso peuvent aussi se configurer depuis l’admin (la valeur en base prime alors sur la variable d’environnement).

Déploiement

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

Déploiement#

Le pipeline#

Le déploiement est automatique : chaque push sur main déclenche le workflow GitHub Actions deploy.yml, qui se connecte au VPS en SSH et exécute :

git pull du dépôt
docker compose build --no-cache app
npx prisma migrate deploy sur le conteneur PostgreSQL
docker compose up -d --no-deps app
sudo systemctl reload nginx

flowchart LR
 DEV[Commit sur main] --> GH[GitHub Actions]
 GH -- SSH --> VPS[VPS]
 VPS --> B[build de l'image]
 B --> M[migrations Prisma]
 M --> U[remplacement du conteneur]
 U --> N[reload Nginx]

Si une migration échoue, le déploiement s’arrête avant le remplacement du conteneur : la version précédente continue de tourner.