Expertise Vercel / Supabase

Votre site peut faire partie de votre système métier.

Un catalogue qui se met à jour depuis le référentiel. Un formulaire qui rejoint le bon processus. Un back-office que l’équipe peut faire vivre. Nous relions ces pièces avec vous.

Quatre ans de construction et d’évolution d’outils au sein d’un groupe d’emploi et de formation : l’expérience de Julien Cyr, fondateur d’Ownward, nourrit ces cas anonymisés. Un même contexte métier, plusieurs produits complémentaires.

Le bon outil à chaque endroit

Un socle. Plusieurs possibilités. Données communes · Espace équipe · Site connecté

Airtable reste pratique pour les équipes qui structurent l’offre. Supabase fournit un modèle PostgreSQL, l’authentification et le stockage. Next.js sur Vercel construit l’expérience publique ou connectée autour de ces données.

Nous définissons les données maîtres, les champs diffusés et les responsabilités de chaque outil. Une copie destinée au web a un rôle clair ; elle ne devient pas un second référentiel à maintenir à la main.

Notre organisation du code · monorepo

Plusieurs applications. Un socle commun.

Un monorepo rassemble le code d’applications liées dans un même dépôt versionné. Site web, back-office et espace client peuvent partager leur design system et leurs contrats métier tout en restant des applications déployées séparément.

  • Site public
  • Back-office
  • Espace client
  • Hub d’applications

Packages partagés : marque · composants · types · accès aux données

Une cohérence qui se voit

Chez Ownward, la même palette, les polices Source Sans 3 et les composants de logo servent désormais les quatre espaces. Une évolution de marque a une source unique, puis chaque application est reconstruite et vérifiée.

Des évolutions faciles à suivre

Les workspaces pnpm relient les packages ; Turborepo coordonne les tâches dépendantes et met en cache les constructions éligibles. Changements liés, documentation et consignes pour les agents restent révisables ensemble.

Chaque application garde ses limites

Chaque application a son projet Vercel et son déploiement. Partager du code ne donne aucun accès supplémentaire : sessions, permissions, secrets et isolation des clients demandent toujours des contrôles explicites.

Pertinent quand plusieurs produits évoluent ensemble. Nous définissons la responsabilité des packages et leur compatibilité avant de mutualiser. Un retour arrière du code ne restaure pas la base de données.

Les monorepos sur Vercel

Des données au produit

Un site qui travaille avec le reste de vos outils.

Explorez le catalogue connecté, la collecte de demandes et la publication sur plusieurs sites.

Produit & gouvernance

Partager le contenu. Garder la main sur chaque site.

Au départ…

Plusieurs sites partagent une partie de leur offre et de leur contenu. Copier les pages partout rend chaque correction plus difficile à suivre.

Ce que nous avons construit

Un modèle de pages reliées aux sites : chaque site possède ses domaines, son thème et son périmètre de publication. Une page partagée conserve ses liens de diffusion.

Technologies et documentations officielles

Du contenu à ses sites de diffusion
  1. Supabase

    Contenu commun

    Pages et versions

  2. Supabase

    Périmètre de publication

    Liens page × site

  3. Vercel

    Rendu par domaine

    Thème et navigation du site

Schéma simplifié du modèle examiné.

Ce que nous voulons changer

Réutiliser le contenu tout en rendant visibles les décisions de publication site par site.

Comment c’est construitModèle de données, code, contrôles et autonomie des équipes

Parcours utilisateur

  1. 01

    Créer ou enrichir la page commune.

  2. 02

    Prévisualiser son rendu dans le contexte de chaque site.

  3. 03

    Publier la version approuvée sur les sites choisis.

Structure des données et des échanges

Entité / tableChamps clésRelations
Sites web & domainesHôte · thème · périmètreUn site → plusieurs domaines
PagesBlocs de contenu · version · statutUne page → plusieurs liens de diffusion
Liens page/siteSite · page · slug local · publiéPublication explicite par site

Implémentation technique

  • Le domaine résout le site courant ; les pages sont reliées par une table de jonction.
  • Les snapshots de préproduction et les versions publiées sont distingués.
  • Les composants partagent un contrat de données et conservent des choix de présentation par site.

Décision d’ingénierie

Publier une même page de façon sélective sur plusieurs sites

Adapté de la branche publique du résolveur multisite. Le lien site/page et le statut de la page doivent tous deux autoriser la publication ; les surcharges SEO s’appliquent à cette association. Le client utilise les politiques de lecture publique. Prévisualisation et administration sont séparées, sans booléen contrôlé par le visiteur dans cet extrait.

TypeScriptresolve-public-page.ts28 lignes
import "server-only";import { createPublicClient } from "./database";import { parsePageContent } from "./content-schema";export async function resolvePublicPage(siteId: string, localSlug: string) {  const db = await createPublicClient();  const { data: link, error } = await db.from("page_site_links")    .select(`      local_slug, is_published, seo_overrides,      pages!inner(id, title, content, seo, status)    `)    .eq("web_site_id", siteId)    .eq("local_slug", localSlug)    .maybeSingle();  if (error) throw new Error("Page lookup failed");  if (!link?.is_published) return null;  const page = link.pages;  if (!page || page.status !== "prod") return null;  return {    id: page.id,    title: page.title,    content: parsePageContent(page.content),    seo: { ...(page.seo ?? {}), ...(link.seo_overrides ?? {}) },  };}// siteId is resolved from the trusted hostname/site mapping.// Public row policies and a unique (web_site_id, local_slug) are required.

Extrait adapté de l’implémentation

Publier une même page de façon sélective sur plusieurs sites

Contrôles et limites

  • Les vérifications de périmètre sont nécessaires à chaque lecture et écriture.
  • La prévisualisation privée doit contrôler l’accès aux contenus et aux médias.
  • Rollback de code, version éditoriale et restauration de données se préparent séparément.

Qui peut contribuer

  • Communication : contenu et publication.
  • Administrateurs : sites, domaines et accès.
  • Développeurs : composants, migrations et vérifications du périmètre.

Ce qui documente ce cas

Modèle multi-site, relations de publication et parcours de préproduction examinés dans le dépôt. Ce cas décrit l’implémentation, sans prétendre à un audit de sécurité complet.

Avec Ownward

Construit ensemble. À vous de le faire grandir.

Vos équipes doivent pouvoir gérer les évolutions du quotidien. Et savoir sur qui compter lorsqu’un sujet demande une expertise technique plus poussée.

  1. 01

    Partir du travail réel

    Nous définissons le besoin, les responsabilités de chaque outil et une première version vérifiable, puis construisons le parcours avec les équipes.

  2. 02

    Apprendre sur ses propres outils

    Vos équipes apprennent sur le produit livré : configuration, suivi, diagnostic et évolutions courantes, avec la documentation et le dépôt à leur disposition.

  3. 03

    Aller plus loin, bien accompagné

    Citizen developers, développeurs et collègues qui codent avec Claude contribuent au même modèle documenté. Nous accompagnons les intégrations complexes, les revues de code et les escalades techniques dans la durée.

Le soin apporté à la livraison

Un outil livré avec tout ce qu’il faut pour le prendre en main.

Notre standard de livraison Ownward : l’aide reste disponible dans le produit, le savoir reste avec le code et les agents disposent du contexte pour contribuer.

  • Un assistant de prise en main toujours accessible

    Un parcours guidé pour comprendre les rôles, configurer les éléments essentiels et réussir la première action. Il reste accessible depuis l’aide, y compris pour accueillir de nouveaux collègues.

  • La documentation dans le dépôt livré

    Démarrage, modèle de données, configuration, intégrations, tests, publication et retour arrière : les explications évoluent avec la version du produit. Les secrets restent hors du dépôt.

  • Des consignes pour les agents codeurs

    AGENTS.md et, si utile, CLAUDE.md précisent l’architecture, les conventions, les commandes de vérification et les règles de modification. Un agent prolonge le modèle partagé ; l’équipe garde la revue et la décision de diffusion.

Voir un guide de prise en main dans une interface réelle
Déploiement, accès et évolution du produit

Nous utilisons les previews pour relire une évolution avant sa diffusion. Les règles PostgreSQL et les autorisations de l’application portent les accès ; les clés privilégiées restent côté serveur. Les vérifications doivent couvrir les accès refusés autant que les accès autorisés.

Revenir à un déploiement Vercel précédent ne restaure pas la base de données. Nous prévoyons séparément la compatibilité des migrations, les sauvegardes et la reprise.

Quelle partie de votre travail pourrait être plus simple ?

Un processus, un point de friction, une idée : partons de là.

Parlons de votre projet