app-foundation
Le socle technique de l'application : base de données, traçabilité de toutes les actions, validation des données, séparation entre interface et logique métier, environnement de développement local. Sans lui, rien ne tourne — toutes les autres briques s'appuient dessus.
Tester la chaîne action → service → audit
Saisis un prénom, vérifie le résultat et l'apparition dans /admin/audit.
Les composants techniques que ce pattern installe, expliqués simplement.
Framework React qui combine front-end et back-end dans un même projet. Le routeur des pages se calque sur la structure des dossiers `app/` — pas de config à maintenir.
app/page.tsx → / app/admin/users/page.tsx → /admin/users
Système de mise en forme par classes utilitaires. On écrit le style directement dans le HTML/JSX, pas dans un fichier CSS séparé. Plus rapide à itérer, charte tranZition posée par défaut.
<div className="bg-tz-navy text-tz-white p-4 rounded-lg">…</div>
Bibliothèque de composants UI prêts à copier dans le projet (boutons, dialogs, dropdowns…). Le code vit dans `components/ui/` — modifiable à la main, pas verrouillé par une dépendance externe.
Bibliothèque qui décrit la forme attendue des données (types + règles de validation). Tout ce qui rentre dans une server action doit passer un schéma Zod — pas de validation = pas de promesse.
z.object({ email: z.string().email(), name: z.string().optional() })Prisma traduit les requêtes DB en TypeScript typé. Le schéma vit dans `prisma/schema.prisma`, les migrations sont versionnées dans git. Postgres tourne en local via Docker (`npm run db:up`).
prisma.user.findMany({ where: { active: true } })Fonctions qui tournent côté serveur mais sont appelables directement depuis un composant React. Pas besoin d'écrire une API REST pour chaque interaction — la sécurité reste serveur, l'écriture reste front.
"use server"; export async function inviteUser(input) { … }Frontière forte entre `app/` (UI + routes), `lib/actions/` (server actions, validation), `lib/services/` (logique métier, accès DB), `lib/db/` (client Prisma). Une règle ESLint bloque les violations — Prisma n'est pas accessible depuis `app/` ou `lib/actions/`.
Toute mutation passe par `logAuditEvent({ actor, action, payload })` qui écrit en DB. Permet de répondre à "qui a fait quoi, quand" sans console.log éparpillés. Consultable sur `/admin/audit`.
Lanceur de tests rapide (alternative à Jest, compatible avec Vite). Exécute les tests unitaires des services et actions. Lancé avec `npm test`.
🔒 Activité récente visible après connexion admin.