Documentation développeur

Du clone du dépôt à la mise en production : le projet AKFC expliqué pas à pas.

Cette documentation explique la conception et le développement complet d'une application réelle : le site et l'outil de gestion d'un club d'arts martiaux, en production. Chaque choix y est présenté avec ce qui a amené à lui et ce qu'il permet, puis avec le code qui l'implémente.

Les parties se lisent dans l'ordre. On commence par installer le projet et apprendre sa façon de travailler, puis on descend couche par couche jusqu'au déploiement.

Partie

Contenu

État

Démarrer
Le projet et sa carte, l’installation locale, pnpm check et la discipline de commit.
rédigée
Configuration
package.json et le monorepo ; TypeScript et ses tsconfig ; next.config.ts ; les variables d’environnement.
rédigée
Fondations front
Le routage et les layouts ; la frontière serveur / client ; les styles (Tailwind 4, thème clair et sombre, style réglable).
rédigée
Données
Prisma, en six chapitres : pourquoi le modèle d’abord, lire le schéma, le noyau membres–sessions–groupes, les relations et leurs règles de suppression, les types générés, transactions et migrations.
rédigée
Formulaires
Du <form> HTML aux server actions, en sept chapitres : React Hook Form, useActionState, le modèle hybride, ses pièges, et les trois techniques du projet.
rédigée
API
tRPC, en dix chapitres : pourquoi tRPC, la carte du système, contexte et intention, le routeur métier et ses services, fabriquer une procédure, la protéger, valider l’entrée, gérer les erreurs, maîtriser la sortie, le circuit complet.
rédigée
Authentification et droits
En dix chapitres : la chaîne et ses mécanismes, le modèle de session et son contrat, la connexion, la lecture de la session à chaque requête, la session dans le backend, sa fin, le mot de passe oublié, le navigateur et le proxy, les droits par les groupes, la vue d’ensemble et les pièges.
rédigée
Stockage et médias
En sept chapitres : un stockage objet (R2, MinIO) et le secret qui ne voyage pas ; signer un envoi (une destination plutôt qu’un chemin, les contrôles, ce que couvre la signature) ; enregistrer ce qui est arrivé (relecture chez le stockage, provenance de chaque champ) ; servir un fichier (valider sans déplacer, routes privée et publique, déclinaisons) ; un explorateur sur un sac de clés ; lire l’arbre ; modifier sans casser (déplacer, corbeille, restauration).
rédigée
Contenu éditorial
En sept chapitres : un contenu fait de blocs (contrat Zod, union discriminée, enveloppe versionnée, lecture tolérante) ; le texte riche (ce que generateHTML recopie, la liste blanche, un seul rendu) ; le registre et l’éditeur ; le rendu serveur (une requête pour tous les fichiers, l’audience des URLs) ; le recensement des fichiers ; un contenu écrit par un membre (la présentation d’instructeur) ; les réglages du site.
rédigée
Domaine du club
En quatre chapitres : ce que le club modélise (disciplines, cours, stages, événements, actualités), les conventions qui les relient (heures HHMM, dates de séance, contenus, instructeurs, publication), un modèle qui s’ouvre (origines, événements, « au moins un des trois », dossiers figés), et ce que voit le visiteur (fiches, agenda, .ics).
rédigée
Membres et collaboration
En six chapitres : le compte et le profil (un mot de passe qui ne va qu’au membre, un profil scellé, un compte qui part sans rien laisser) ; l’avatar (un circuit à part, représenter n’est pas poser, hors de la bibliothèque) ; les documents des membres (concerner et pouvoir ouvrir, lu ou non lu) ; les groupes (un arbre dont la racine ne bouge pas, des droits qui descendent) ; les espaces collaboratifs (tout se déduit du chemin, un dépôt devient document du groupe) ; les demandes.
rédigée
Légal et RGPD
En quatre chapitres : les pages légales (générées depuis les réglages, un registre décrit une seule fois) ; les données personnelles (durées tenues chaque nuit, comptes jamais supprimés sans décision, export) ; le droit à l’image (un formulaire signé hors de la bibliothèque, un statut qui en découle, une preuve gardée cinq ans) ; le consentement en ligne (le mot de passe qui vaut signature, un récapitulatif figé et versionné).
rédigée
Interface transverse
En trois chapitres : le référencement (une seule adresse, des métadonnées qui disent noindex aux brouillons, un plan du site calculé à chaque demande, un robots.txt qui laisse passer les images publiques) ; le header (une liste de liens pour deux rendus, la page courante vue et entendue, la session dès le HTML, des signaux sans badge à zéro) ; l’accessibilité (des menus au clavier, des noms pour les icônes, des animations qui s’effacent, ce qui reste à faire).
rédigée
Qualité
En quatre chapitres : la chaîne de pnpm check (des gardes rapides d’abord, trois projets TypeScript, le lint de tout le code écrit à la main, ce qu’elle ne voit pas) ; le typecheck et le lint (deux questions, le lint ramené à zéro, les règles du React Compiler) ; les gardes maison (quatre erreurs silencieuses et la recette d’une cinquième) ; tester de bout en bout (Playwright contre la construction de production, une base et un stockage réservés aux tests, six parcours sur les règles du club).
rédigée
Infrastructure et déploiement
En trois chapitres : l’image Docker (des étapes du plus stable au plus changeant, un migrateur à part, un service sans droits ni secrets) ; mettre en production (ce qui reste sur le serveur, la migration avant le conteneur, ce que le site répare en démarrant, revenir en arrière) ; la sandbox (le site entier en une commande, des services qui s’attendent, des comptes de démonstration). Les sauvegardes : à venir.
rédigée
Étude de cas
Le moteur des tutoriels interactifs, en trois chapitres : un tutoriel en données (des étapes typées, un contrat de nom data-tour, une garde qui le tient) ; le moteur (un état qui traverse les pages, un voile percé qui suit sa cible, quatre façons de passer une étape, le clavier) ; lancer, vérifier, écrire (deux portes d’entrée, un test qui suit le tuto et ce qu’il a trouvé, la recette d’un nouveau tuto).
rédigée