Atelier Démo : un site enfant de bout en bout

Suivez le guide — GIF via Giphy.

Atelier Démo est un studio d'impression 3D fictif — et notre laboratoire d'essai grandeur nature. Son site montre exactement ce que produit notre plateforme pour un client réel.

Ce qui a été généré

• Une vitrine complète : offres, tarifs, process en trois étapes, demande de devis
• Un thème dédié — accent cyan déclaré en une ligne, tout le site suit
• L'espace d'administration du client, avec sa propre connexion
• Le suivi de fréquentation, envoyé à l'analytique centrale

Le thème, en une ligne

« Accent cyan déclaré en une ligne » n'est pas une image. Voici la ligne :

// app.config.ts — généré pour Atelier Démo
export default defineAppConfig({
  ui: { colors: { primary: 'cyan', neutral: 'zinc' } },
})

Boutons, liens, badges, anneaux de focus : tout le site suit. C'est la force d'un design system câblé dans le socle — la personnalisation est une donnée, pas une réécriture.

Le tracking, câblé d'origine

Chaque site enfant reçoit son identifiant à la création du projet, via la variable d'environnement NUXT_PUBLIC_SITE_ID injectée automatiquement au déploiement. Le plugin embarqué dans le socle fait le reste :

// plugins/analytics.client.ts (extrait)
const siteId = useRuntimeConfig().public.siteId

router.afterEach((to) => {
  supabase.from('analytics_events').insert({
    site_id: siteId,
    type: 'pageview',
    path: to.fullPath,
    session_id: sessionId,
  })
})

Côté base, une politique de sécurité n'autorise l'insertion que pour les sites effectivement déployés : un identifiant inventé n'écrit rien. Les chiffres remontent ensuite dans l'analytique centrale de Piks-l, agrégés par jour et par page.

Le rôle du client

Le propriétaire du site retrouve tout dans son espace : son site, son statut, son administration. L'équipe Piks-l garde une vue d'ensemble — analytique multi-sites, gestion des rôles, supervision des générations.

La même mécanique s'applique à chaque nouveau projet : brief → génération → validation → mise en ligne.