ZeyoFlow
Un SaaS façon Webflow où une entreprise s'inscrit et construit son site à partir de blocs modulaires, avec un éditeur visuel en direct et un assistant IA. Découpé en services Fastify distincts — passerelle API, identité, gestion des locataires, catalogue et templates — chacun en architecture propre avec Inversify, adossé à Drizzle et Postgres, et un front Next.js portant l'éditeur, le tableau de bord et l'onboarding. Réalisé comme mémoire d'ingénieur (Synergistic AI).
- Mon rôle
- Développeur Full Stack
- Période
- févr. 2025 — mai 2025
- Statut
- Livré
ZeyoFlow permet à une entreprise de créer un compte, d'obtenir son propre espace de travail et d'assembler son site à partir de blocs modulaires, sans écrire de code. L'éditeur visuel répercute chaque modification sur un canvas en direct, avec des contrôles directs de typographie, d'espacement et de mise en page, et un assistant IA conversationnel génère et affine des composants d'interface par le dialogue plutôt que par configuration manuelle.
Côté architecture, la plateforme repose sur cinq microservices Fastify — passerelle API, identité, gestion des tenants, catalogue produits et service de templates — chacun structuré en clean architecture avec l'injection de dépendances Inversify et Drizzle comme couche d'accès à PostgreSQL. Une application Next.js regroupe tout ce que l'utilisateur manipule : le constructeur de pages, le tableau de bord du tenant et un parcours d'onboarding guidé. Le projet a été réalisé comme thèse d'ingénierie (Synergistic AI).
Le problème à résoudre
Un constructeur de sites concentre plusieurs problèmes difficiles dans un seul produit. Chaque tenant partage la même infrastructure tout en exigeant une séparation stricte de son identité, de son espace et de son contenu ; l'éditeur doit répercuter chaque changement de typographie, d'espacement ou de mise en page immédiatement sur un canvas en direct, sans cycle de sauvegarde-rechargement ; et l'assistant IA doit produire des composants qui s'insèrent dans le système de blocs, pas une sortie arbitraire. Tout regrouper dans un monolithe aurait entremêlé la logique multi-tenant, les données du catalogue et la gestion des templates dans une seule base de code — la séparation des responsabilités devait être posée dès le départ.
Comment cela a été construit
Le backend est découpé en cinq services Fastify derrière une passerelle API : l'identité gère l'authentification, la gestion des tenants possède les espaces de travail, et deux services distincts portent le catalogue produits et les templates. Chaque service suit la même organisation en clean architecture — domaine, cas d'usage, adaptateurs — avec Inversify pour l'injection de dépendances, ce qui garde les règles métier testables et la persistance de chaque service derrière sa propre frontière. Drizzle fournit un accès typé à PostgreSQL sur l'ensemble.
Côté front, une application Next.js unique héberge le constructeur de pages — un canvas en direct avec contrôles de typographie, d'espacement et de mise en page — aux côtés du tableau de bord tenant et de l'onboarding guidé, tandis que l'assistant IA transforme des demandes conversationnelles en composants d'interface générés puis affinés itérativement.
Ce que ça fait
Constructeur par blocs modulaires
Les pages s'assemblent à partir de blocs réutilisables sur un canvas en direct, avec des contrôles directs de typographie, d'espacement et de mise en page plutôt que du CSS écrit à la main.
Assistant IA de composants
Un assistant conversationnel génère des composants d'interface à partir de demandes en langage naturel et les affine au fil des messages, directement dans l'éditeur.
Espaces multi-tenants
Chaque entreprise opère dans son propre tenant, porté par un service dédié de gestion des tenants et administré depuis le tableau de bord.
Onboarding guidé
Un parcours pas à pas conduit une nouvelle entreprise de l'inscription à un espace configuré, prêt pour la construction du site.
Service de templates dédié
Les templates de sites vivent dans leur propre microservice, ce qui découple leur stockage et leur diffusion du constructeur et du reste de la plateforme.
Service catalogue produits
Un service de catalogue distinct gère les produits de chaque tenant derrière sa propre frontière d'API.
Construit avec
Frontend
Le constructeur, le tableau de bord et l'onboarding forment une surface React fortement interactive, et Next.js en fournit le routage, le rendu et la structure — pour un produit dont la sortie est précisément des pages web.
Un seul langage typé couvre les cinq services et le front, les types inférés par Drizzle gardant lignes de base de données, payloads d'API et état de l'éditeur alignés.
Les classes utilitaires correspondent directement aux contrôles de typographie, d'espacement et de mise en page du constructeur, gardant les styles composables et cohérents à travers les blocs générés.
Backend
Un framework HTTP léger qu'on peut instancier cinq fois — une par microservice — sans surcoût, et dont le modèle de plugins s'aligne naturellement sur les adaptateurs de la clean architecture.
Données
Tenants, utilisateurs, entrées de catalogue et templates sont des données relationnelles à contraintes d'intégrité réelles ; Postgres les fait respecter tandis que Drizzle maintient le schéma dans le code.
Store en mémoire, Redis est le complément habituel d'une pile de services Node adossée à Postgres pour le cache et l'état éphémère — des données peu coûteuses à perdre mais coûteuses à recharger.
Le modèle documentaire de MongoDB accueille du JSON imbriqué au schéma flexible qui se plie mal à des tables relationnelles figées, en complément des données strictement structurées que couvre PostgreSQL.