Nouveau

Notre espace client

Plateforme SaaS

Comment nous avons transformé un site portfolio en plateforme SaaS sécurisée : authentification, facturation Stripe, tickets support, gestion documentaire et assistant IA, sans rien céder sur la performance, la sécurité ni l'expérience utilisateur.

Vue d'ensemble

Phase 1 : nous avons construit un site qui prouve notre savoir-faire. Phase 2 : nous avons construit la plateforme qui prouve que nous savons accompagner nos clients dans la durée. À un certain niveau d'exigence, livrer un site ne suffit plus. Il faut pouvoir suivre, facturer, échanger, sécuriser, et donner à chaque client un endroit où tout converge. Cet espace client, c'est notre réponse.

Le projet

Concevoir et développer un espace client SaaS complet : authentification sécurisée, dashboard, facturation Stripe, tickets support, documents et assistant IA contextuel.

Le défi

Passer du site vitrine à la plateforme produit sans rien dégrader. Performance, accessibilité, conformité RGPD : tout devait monter d'un cran, pas redescendre.

La contrainte

Chaque module devait gagner sa place. Pas de fonctionnalité gadget. Pas d'IA décorative. Chaque écran devait répondre à un besoin client concret et mesurable.

Le résultat

Un portail unique où chaque client accède à ses documents, factures, échanges et outils en un clic, avec des scores Lighthouse au plafond et une conformité légale complète.

La meilleure preuve qu'un studio peut tenir un projet dans la durée, c'est la plateforme qu'il construit pour ses propres clients. Si nous n'utilisions pas ce standard pour notre propre relation client, sur quoi pourriez-vous juger notre exigence ?


Résultats concrets

Un portail unique, pas une mosaïque d'outils

Documents, factures, tickets, IA et offres partenaires convergent en un seul endroit. Plus d'allers-retours par e-mail, plus de pièces jointes perdues.

Une facturation Stripe sans friction

Paiements, abonnements et portail client gérés nativement via Stripe. Le client a la main sur sa facturation, nous avons la sérénité de la conformité.

Un support qui ne se perd plus en route

Système de tickets avec suivi de résolution. Chaque demande a un statut, un historique, un interlocuteur. Plus rien ne tombe entre les chaises.

Des performances qui ne fléchissent pas

Malgré Stripe, l'IA, l'analytics et la conformité RGPD, les scores Lighthouse restent entre 95 et 100. La complexité technique n'a pas dégradé l'expérience.


Avant / Après

Axe
Avant
Après
Relation client
Échanges dispersés par e-mail, factures à retrouver dans des fils, documents envoyés en pièce jointe. Aucun point central pour suivre l'historique.
Un espace client unique où chaque interaction est tracée, datée et accessible en permanence par le client comme par nous.
Facturation
Gestion manuelle des paiements et abonnements, risques d'oubli, pas de portail self-service pour le client.
Intégration Stripe complète avec portail client autonome. Le client gère ses moyens de paiement, télécharge ses factures et ajuste son abonnement.
Support
Demandes éparpillées entre e-mail, téléphone et messages directs. Aucune visibilité sur le statut d'une demande en cours.
Tickets centralisés avec statut, historique et notifications. Le client sait toujours où en est sa demande.
Conformité
Conformité légale traitée projet par projet, parfois en fin de cycle, avec le risque que ce soit incomplet ou imparfaitement intégré.
RGPD, cookies, CGU et politique de confidentialité pensés dès la conception. La conformité est une fondation, pas un correctif.

Le problème

À mesure que les missions s'enchaînent et que les clients deviennent récurrents, un constat s'impose : un site vitrine ne suffit plus à structurer la relation. Les factures se cherchent, les documents se perdent, les demandes de support s'accumulent par e-mail, et chaque client doit reconstruire mentalement où il en est à chaque échange. Ce désordre invisible coûte de la confiance.

Trois options étaient sur la table, et chacune avait son piège :

  • Empiler des outils tiers : un Notion partagé, un Stripe à part, un Helpdesk en SaaS, un Drive pour les documents. Solution rapide, mais qui transforme l'expérience client en chasse au trésor entre cinq plateformes.
  • Tout faire en e-mail : simple, familier, mais ingérable au-delà de quelques clients. Aucun historique structuré, aucune trace, aucun suivi mesurable.
  • Construire un espace client unifié : plus exigeant à concevoir, mais c'est la seule option qui correspond au standard que nous vendons à nos clients.

Le choix n'a pas été long. Le défi commençait là : comment intégrer authentification, facturation, support, documents et IA dans une plateforme qui reste rapide, sécurisée, conforme, et fidèle à l'identité visuelle du site Phase 1.

C'est le type de défi que rencontrent les entreprises qui passent du stade artisan au stade structuré. Et c'est exactement la nature d'intervention que notre studio sait mener, parce que nous venons de la mener en interne, avec les mêmes contraintes et les mêmes standards que pour nos clients.


Notre approche

Comme pour la Phase 1, nous avons traité ce projet interne avec la méthode que le studio applique à chaque mission. Six étapes, aucun raccourci.

1. Cartographier les parcours avant le moindre composant

Avant la première ligne de code, nous avons défini précisément les trois utilisateurs de la plateforme :

  • Le client final : veut accéder rapidement à ses documents, sa facturation, son support et son assistant IA.
  • L'administrateur interne : doit gérer comptes, accès, tickets et documents avec un minimum de friction.
  • Artdantech en tant qu'opérateur : doit centraliser les opérations, mesurer ce qui se passe, automatiser ce qui peut l'être.

Chaque écran a été pensé en fonction du parcours, pas l'inverse.

2. Structurer l'architecture autour des rôles

Trois espaces applicatifs distincts, chacun avec ses contraintes :

  • app/(auth) : authentification, vérification email, récupération de mot de passe, sécurité maximale.
  • app/(client) : dashboard client, accès aux factures, documents, tickets, IA et offres.
  • app/admin : gestion interne, pilotage des comptes et du support.

Les layouts sont séparés, les permissions cloisonnées, les routes sensibles validées côté serveur.

3. Choisir Stripe parce que la confiance ne se bricole pas

Pour la facturation et les abonnements, nous avons retenu Stripe sans hésitation :

  • Portail client autonome : le client gère ses moyens de paiement et télécharge ses factures lui-même.
  • Webhooks synchronisés : chaque paiement met à jour le compte client en temps réel.
  • Conformité fiscale et bancaire : Stripe gère la complexité réglementaire qui n'a pas à devenir notre métier.

Vouloir réinventer la facturation est un piège classique. Stripe est l'outil de référence, point.

4. Intégrer l'IA avec mémoire contextuelle, pas comme un gadget

L'IA est partout aujourd'hui, mais trop souvent posée en surface sans utilité réelle. Notre assistant a été conçu autour de trois principes :

  • Onboarding contextuel : l'IA connaît le client, son contexte, ses projets en cours.
  • Mémoire persistante : elle se souvient des échanges précédents et capitalise sur eux.
  • Suggestions métier : elle propose les bons réflexes au bon moment, pas des réponses génériques.

L'IA est là pour servir, pas pour faire moderne.

5. Tenir la performance sous pression

Empiler Stripe, GA4, IA, authentification et conformité RGPD est le scénario classique où Lighthouse s'effondre. Nous avons tenu la barre :

  • Chargement différé des scripts tiers (analytics notamment) pour préserver le LCP.
  • Images WebP optimisées avec lazy loading et responsive sizing.
  • Code splitting et streaming React Server Components pour ne charger que l'essentiel.
  • Cache et compression des assets statiques.

Résultat : entre 95 et 100 sur les quatre axes Lighthouse (performance, accessibilité, SEO, best practices).

6. Construire la conformité comme fondation

RGPD, cookies, CGU, politique de confidentialité : ces sujets ne sont pas un appendice, ils sont une fondation.

  • Bannière de consentement cookies avec choix granulaire
  • Mémorisation persistante de l'acceptation des CGU côté utilisateur
  • Politique de confidentialité dédiée et accessible
  • Sécurisation serveur de toutes les opérations critiques

À chaque module ajouté, la question était la même : « Est-ce que le client comprend immédiatement ce que ça lui apporte, ou est-ce qu'on l'a fait parce qu'on pouvait le faire ? » Tout ce qui ne passait pas ce filtre est resté hors de la plateforme.


Stack technique

  • Next.js App Router (rendu hybride, Server Components, Server Actions)
  • React Server Components (streaming et performance)
  • Stripe (Customer Portal, abonnements, webhooks)
  • Authentification sécurisée (sessions, vérification email, récupération mot de passe)
  • Assistant IA conversationnel avec mémoire contextuelle
  • Tailwind CSS (design system unifié avec la Phase 1)
  • Optimisation d'images WebP automatique
  • Google Analytics 4 chargé en différé
  • Conformité RGPD native (cookies, consentements, CGU)
  • Infrastructure serverless avec CI/CD GitHub Actions
  • Tests unitaires et E2E
  • Audits Lighthouse intégrés au pipeline

Le résultat

L'espace client Artdantech n'est pas une démonstration technique. C'est la preuve que notre studio construit des produits qui tiennent dans la durée, au niveau d'exigence d'une plateforme professionnelle. Et c'est l'outil que nous mettons désormais à disposition de chaque client.

  • Un dashboard client unifié pour suivre projet, facturation et support
  • Une facturation Stripe avec portail autonome côté client
  • Un système de tickets avec suivi de résolution et historique complet
  • Une gestion documentaire centralisée et téléchargeable en un clic
  • Un assistant IA avec mémoire contextuelle utile au quotidien
  • Une administration interne pour piloter clients, documents et accès
  • Des scores Lighthouse entre 95 et 100 sur tous les axes
  • Une conformité RGPD complète intégrée dès la conception
  • Une architecture scalable pour ajouter de nouveaux modules sans dette technique

Cette plateforme va continuer à évoluer. De nouvelles automatisations, de nouveaux modules métier, de nouveaux outils IA viendront s'y greffer au fil des besoins. La fondation est posée, et elle est solide.


Ce que ce projet révèle

La Phase 1 prouvait que le studio sait construire un site qui vend. La Phase 2 prouve qu'il sait construire un produit qui dure. C'est la différence entre livrer un livrable et assumer une responsabilité dans le temps. Si vous cherchez un partenaire capable des deux, vous êtes au bon endroit.

Vous voyez cet espace client parce que c'est l'outil que notre studio utilise pour gérer ses propres clients. C'est exactement le standard de produit que nous savons construire pour vous. Si vous avez un projet de plateforme, d'espace client, de portail SaaS ou simplement un besoin de structurer votre relation client dans la durée, parlons-en.