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.

Collecte & intégration

Enregistrer la demande avant de passer le relais.

Au départ…

Un visiteur remplit un formulaire. Une indisponibilité du service suivant ne doit pas faire disparaître sa demande ni lui imposer de recommencer.

Ce que nous avons construit

Une collecte enregistrée dans Supabase, suivie d’une notification HTTP au format stable pour un CRM ou un orchestrateur. La soumission et sa livraison sont deux sujets distincts.

Technologies et documentations officielles

Collecter, transmettre, traiter
  1. Vercel

    Formulaire

    Validation côté serveur

  2. Supabase

    Soumission conservée

    La donnée survit à une erreur aval

  3. Zapier

    Relais possible

    Qualification et routage vers le CRM

La collecte et le webhook sont documentés ; le relais Zapier est une possibilité d’intégration, à valider sur le Zap réel.

Ce que nous voulons changer

Conserver une trace fiable de la demande et permettre au métier de suivre son traitement.

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

Parcours utilisateur

  1. 01

    Valider les champs et enregistrer la soumission.

  2. 02

    Notifier le destinataire configuré avec le contexte du formulaire.

  3. 03

    Suivre séparément la livraison et le traitement métier.

Structure des données et des échanges

Entité / tableChamps clésRelations
Configuration des formulairesType · validation · destinationDéfinit le contenu envoyé
SoumissionsFormulaire · champs · date de réceptionConserve la demande initiale
Références CRM / livraisonClé de soumission · destination · résultatSuivi opérationnel proposé

Implémentation technique

  • Le code examiné écrit la demande avant la notification HTTP.
  • Le webhook conserve une forme commune entre formulaires et utilise un délai d’expiration.
  • Une boîte d’envoi persistante et un mécanisme de reprise sont une évolution recommandée pour les flux critiques, pas une garantie du mécanisme actuel.

Décision d’ingénierie

Borner la notification sans perdre la demande enregistrée

Adapté du helper webhook appelé après l’enregistrement du formulaire. La requête est interrompue après cinq secondes, les échecs HTTP et réseau sont distingués et le minuteur est toujours nettoyé. Cela ne fournit ni file de reprise durable ni preuve de traitement aval. Après un timeout, le destinataire peut avoir reçu la requête sans que sa réponse soit revenue.

TypeScriptenquiry-notification.ts31 lignes
type Delivery =  | { ok: true }  | { ok: false; reason: "disabled" | "timeout" | "http-error" | "network" };export async function notifySavedEnquiry(  configuredUrl: string | null,  payload: { form_type: string; data: Record<string, unknown> },): Promise<Delivery> {  if (!configuredUrl) return { ok: false, reason: "disabled" };  const controller = new AbortController();  const timer = setTimeout(() => controller.abort(), 5_000);  try {    const response = await fetch(configuredUrl, {      method: "POST",      headers: { "content-type": "application/json" },      body: JSON.stringify(payload),      signal: controller.signal,    });    return response.ok ? { ok: true } : { ok: false, reason: "http-error" };  } catch (error) {    return {      ok: false,      reason: error instanceof Error && error.name === "AbortError"        ? "timeout" : "network",    };  } finally {    clearTimeout(timer);  }}// URL comes from trusted server configuration, not the visitor's form.// The persisted submission remains the source of truth for follow-up.

Extrait adapté de l’implémentation

Borner la notification sans perdre la demande enregistrée

Contrôles et limites

  • Ne transmettre que les champs nécessaires au destinataire.
  • Un webhook livré ne prouve pas que le dossier a été traité.
  • Le connecteur destinataire et sa reprise doivent être validés avant mise en production.

Qui peut contribuer

  • Métier : règles de qualification et affectation.
  • Builders : formulaires et mappings approuvés.
  • Développeurs : validation, accès, livraison et reprises.

Ce qui documente ce cas

Code de collecte et de notification examiné. Le format prévoit un destinataire de type Zapier, n8n ou CRM ; aucun Zap aval n’a encore été vérifié.

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