Plateforme SaaS multi-tenant développée pour un client, permettant de déployer des sites d'affiliation personnalisés sur des domaines indépendants depuis un dashboard centralisé.
Contexte
Le client avait besoin de déployer rapidement des landing pages d'affiliation pour différentes niches, chacune sur son propre domaine avec un thème personnalisé. La gestion manuelle de chaque site était devenue ingérable. Il fallait une plateforme unique pour tout piloter : création de sites, gestion des partenaires, suivi des performances.
Architecture
Application Next.js 16 unique servant plusieurs domaines via un système de proxy (remplacement du middleware Next.js). Détection automatique du domaine, injection de headers, routage conditionnel admin/public. Architecture Feature-Sliced Design côté frontend. Base de données PostgreSQL via Supabase avec Row Level Security. Fonctions RPC serveur pour les agrégations analytiques.
Stack technique
Frontend : Next.js 16 + React 19, shadcn/ui (Radix + Tailwind CSS 4), Zustand, TanStack Query v5, React Hook Form + Zod, Three.js (animations 3D), react-fast-marquee, dnd-kit (drag & drop), nuqs
Backend : Supabase (PostgreSQL + Auth + Storage), fonctions RPC serveur, Server Actions Next.js
Analytics : système cookieless avec agrégations timezone-aware (date-fns-tz), comparaison de périodes, tracking par device/bouton/carte
Fonctionnalités clés
Multi-tenancy : chaque client dispose de son propre domaine avec thème personnalisable (couleurs oklch), hero configurable, SEO metadata, contenu légal, logo/favicon. Configuration JSONB flexible sans migration de schéma.
Dashboard admin : gestion CRUD des sites et de la bibliothèque de partenaires. Associations site-partenaire avec drag & drop pour l'ordonnancement, badges personnalisés, cartes internes configurables, URLs de redirection par bouton.
Analytics cookieless : tracking RGPD-friendly sans cookies. Agrégation serveur via RPC Supabase. Statistiques par période (jour, semaine, mois, année) avec comparaison automatique. Répartition par device, taux de clic, performances par partenaire.
Animations premium : blobs morphing CSS avec accélération GPU, particules flottantes pré-calculées (zero-jank), gradients animés. Optimisation responsive (tailles réduites sur mobile).
Internationalisation : support multilingue (FR/EN) par site, détection automatique de la locale.
Résultats
Plateforme en production servant plusieurs domaines simultanément. Déploiement de nouveaux sites en minutes via le dashboard. Analytics temps réel sans dépendance externe.