Retour aux projets
Web | Projet personnel · 2026

Gate 🌳

Next.js 14
React 18
TypeScript
PostgreSQL
Prisma
NextAuth
React Flow
Stripe
next-intl
Radix UI
Tailwind CSS
Resend
papaparse
xlsx
@react-pdf/renderer
Puppeteer
Zod
PWA
Voir le code sur GitHub

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.

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