Aller au contenu
Retour aux projets
Web | Projet personnel · 2026

Gate 🌳

Next.js 14
TypeScript
Prisma
PostgreSQL
React Flow
Stripe
NextAuth
PWA
Voir le code sur GitHub
Arbre généalogique interactif Gate avec plusieurs générations de cartes personnes reliées

Contexte

Gate est une application web full-stack de création et d'exploration d'arbres généalogiques interactifs. L'objectif est de reconstruire, visualiser et partager l'histoire familiale dans une expérience collaborative et immersive. C'est le projet phare du portfolio : il combine une visualisation de graphe avancée avec toutes les briques attendues d'une application SaaS de production.

Fonctionnalités clés

  • Arbre interactif : visualisation et navigation de l'arbre familial via un graphe React Flow.
  • Système de rôles FREE / PREMIUM / ADMIN avec gestion de profils et permissions.
  • Relations généalogiques complexes (multi-parenté, liens croisés) et rattachement d'un utilisateur à un profil existant.
  • Authentification NextAuth (adaptateur Prisma, bcryptjs), paiements et abonnements Stripe.
  • Application multilingue (FR/EN) via next-intl, routage app/[locale].
  • Import / export des données : CSV et Excel (papaparse, xlsx), génération de PDF (@react-pdf/renderer, Puppeteer).
  • Pages mémoire bilingues sur l'histoire des lieux d'origine de la famille (frise chronologique animée, photos d'archive).
  • Espace d'administration, emails transactionnels Resend et expérience installable en PWA.

L'arbre qui se construit, nœud par nœud

Relations multi-parenté comprises : un enfant peut avoir deux parents reliés séparément

Un premier profil.

Approche technique

L'application s'appuie sur Next.js 14 (App Router) et TypeScript, PostgreSQL avec Prisma pour la persistance, NextAuth pour l'authentification, React Flow pour la visualisation du graphe, et Stripe pour la gestion du premium. L'internationalisation est gérée par next-intl, l'UI par Radix UI et Tailwind CSS (approche shadcn) avec validation Zod, l'export par papaparse / xlsx / @react-pdf/renderer / Puppeteer, et les emails par Resend. Une couche PWA (next-pwa) rend l'application installable et utilisable hors-ligne.

Résultats

Gate pose la base d'un produit social tech capable de centraliser l'histoire familiale, de la rendre navigable visuellement et de faciliter la contribution collaborative autour d'un même arbre : du graphe interactif jusqu'aux pages mémoire qui racontent l'histoire des lieux d'origine.

Afouanee.dev

© 2026 Afouane MOUHAMAD