Concevoir et développer le portail client de Noqode, une application web sur mesure qui réunit les clients et l'équipe dans un même espace.

Noqode conçoit des sites B2B et les fait évoluer avec ses clients dans la durée. La création de sites Webflow reste notre point de départ et notre recommandation par défaut. Astro, Sanity ou Next.js prennent le relais quand un projet le demande. Une partie de notre travail dépasse aussi le site, avec des workflows IA et des automatisations reliés aux outils de nos clients.

Jusqu'en septembre 2026, le suivi de ces projets ressemblait à celui de la plupart des agences. Les validations passaient par e-mail pendant que les liens Figma et les factures circulaient chacun de leur côté. Un client devait recouper ces échanges pour savoir où en était son site, et l'équipe perdait de son côté un temps réel à retrouver la bonne information.

Nous avons préféré dessiner et développer notre propre portail plutôt que d'assembler des outils du marché. Dans ce produit maison, nos clients suivent leur projet et les heures de leur Équipe Growth. Ils y retrouvent aussi leurs factures et leur visibilité sur Google comme dans les moteurs IA, tandis que l'équipe pilote tous les comptes depuis un back-office construit sur mesure.

Cette étude de cas s'adresse aux entreprises qui envisagent un portail client ou une application métier. Elle retrace le projet depuis l'atelier de conception du 28 septembre 2026 jusqu'à la mise en ligne du 10 octobre, ainsi que les trois semaines d'évolution qui ont suivi.

Un dirigeant qui lance une refonte veut savoir où en est son site sans attendre une réunion, avec les validations qui l'attendent cette semaine et les factures qu'il lui reste à régler. Ces réponses devaient apparaître dès la connexion, sur ordinateur comme sur téléphone, pour rendre le projet lisible sans explication de notre part.

L'équipe vivait le même éparpillement de son côté. Pour un même client, l'historique commercial se trouvait dans le CRM et les paiements dans la banque, tandis que les fichiers de production et les conversations Slack complétaient le tableau. Il fallait réunir ces informations dans un seul espace de travail, avec une vue d'ensemble des comptes et une fiche par client.

Un portail client concentre aussi des données sensibles, des factures aux statistiques de trafic. Chaque client ne doit voir que son espace et les notes internes de l'équipe ne doivent jamais apparaître de son côté. La sécurité devait donc être posée dans la base de données elle-même et pas seulement dans l'interface.

L'outil devait enfin être à la hauteur de nos sites. Nos clients nous choisissent pour l'exigence de notre design, qu'une application approximative aurait contredite dès le premier écran.

Les quatre objectifs du portail sont sortis de l'atelier de conception des 28 et 29 septembre, où Amaury de Luca a défini les fonctionnalités thème par thème.

Montrer au client sa prochaine action dès la connexion

L'accueil s'adapte à l'offre signée, qu'il s'agisse d'un projet, d'une Équipe Growth, d'un accompagnement SEO et GEO ou de plusieurs à la fois. Les actions qui attendent le client s'affichent en premier, rangées par urgence et accompagnées du bouton qui permet de les traiter sur place.

Centraliser la relation client dans un seul espace

Chaque échange se rattache à son objet. Une validation se fait depuis la tâche concernée et un commentaire reste attaché au livrable qu'il vise. Les factures se règlent depuis la rubrique Facturation, tandis que Slack et l'e-mail servent seulement à prévenir la personne concernée.

Remplacer les tableurs de l'équipe par un back-office

L'équipe y retrouve ses tâches et ses clients, avec les demandes qui attendent encore leur réponse. La direction y suit le pilotage commercial et les finances de l'agence dans un espace dont l'accès lui est réservé.

Concevoir une interface au niveau de nos sites

Le portail repose sur un design system complet, avec des contrastes vérifiés selon les règles WCAG et une version mobile dessinée écran par écran. L'interface fonctionne en français et en anglais, en thème clair comme en thème sombre. Ce travail d'UX et d'UI design suit les mêmes exigences que nos sites clients.

Le projet a suivi la méthode de nos sites clients, avec un design terminé avant la première ligne de code.

Terminer le design dans Figma avant le développement

Les références d'interfaces ont été réunies sur Mobbin et rangées par famille d'écrans. Le design system part de celui de noqode.fr pour l'adapter à une application, avec des jetons de couleur déclinés en clair et en sombre à côté d'une typographie, d'espacements et de composants documentés.

Les maquettes couvrent 144 écrans et états dont 11 e-mails. Leurs déclinaisons en thème clair, en thème sombre et en anglais portent le total à 360 maquettes dans Figma. Dans tout le système, le noir sert aux actions et la couleur signale un statut ou un pôle. Chaque écran se lit ainsi en quelques secondes.

Donner au client et à l'équipe deux interfaces distinctes

Côté client, le projet, l'Équipe Growth et le suivi SEO et GEO ont chacun leur rubrique, à côté de la facturation et de l'aide. Le projet se présente en phases et en tâches. Quand une maquette ou une page en préproduction attend son avis, le client la valide ou demande une modification depuis la tâche, où ses retours restent attachés au livrable.

L'équipe dispose de sa propre interface, qui fonctionne comme un CRM sur mesure. Son tableau de bord sépare les tâches à traiter des validations qui attendent les clients, avec le nombre de jours d'attente. Chaque client a sa fiche, où ses engagements et ses utilisateurs côtoient les notes internes de l'équipe ainsi que les réunions et les échanges lus dans Attio. Avant de prévenir un client, l'équipe ouvre le mode « Voir comme le client » et retrouve son écran à l'identique.

Les propositions commerciales y sont publiées sous forme de page et acceptées en ligne. La direction dispose aussi d'un espace de pilotage alimenté par Qonto et Attio, où elle suit la trésorerie et les charges à côté des factures et des opportunités.

La navigation reste fluide d'un écran à l'autre, avec des transitions de 120 à 240 millisecondes qui se réduisent quand l'utilisateur a demandé moins d'animations. Sur mobile, une barre d'onglets flottante donne accès aux rubriques et les commandes s'agrandissent au doigt.

Développer avec Claude Code sous la direction de Noqode

Pour un site, Webflow reste notre recommandation par défaut. Un portail qui gère des comptes et des droits d'accès demande en revanche une application développée en code. Le portail a donc été développé avec Claude Code, l'agent de développement d'Anthropic, sous la direction d'Amaury de Luca. Comme les jetons du design portent le même nom dans Figma et dans le code, les maquettes se reprennent écran par écran sans rien improviser.

Écrite en TypeScript avec Next.js 16 et React 19, l'application compte 63 pages et 134 actions serveur auxquelles s'ajoutent 9 tâches planifiées. Elle est hébergée sur Vercel en région Paris et ses données vivent en Europe dans Supabase, une base Postgres, tandis que les e-mails partent par Resend. Aucune modification n'est publiée avant d'être passée par le dépôt GitHub de Noqode et par les tests.

Poser la sécurité dans la base de données

Supabase applique une sécurité ligne par ligne, si bien que chaque requête vérifie l'identité de son auteur avant de renvoyer la moindre donnée. Un client ne lit que les informations de son espace et les notes de l'équipe restent invisibles de son côté. Deux audits de sécurité menés les 10 et 16 octobre ont confirmé ce cloisonnement sans relever aucune faille critique.

Avant chaque mise en production, 1 398 tests et 491 contrôles de droits vérifient le portail. Les contrôles de droits s'assurent que chacun des trois rôles, du client à l'administrateur, ne voit que les données qui lui reviennent.

Le portail est en ligne sur app.noqode.fr depuis le 10 octobre 2026 et a connu 95 mises en production entre le 6 et le 27 octobre. Le suivi dans cet espace client fait désormais partie de nos offres de site et de l'Équipe Growth.

Pour nos clients, un projet qui se suit sans réunion

Le client sait à tout moment où en est son site et quelles actions l'attendent. Il valide ses maquettes en ligne et règle ses factures au même endroit, où il suit aussi les heures de son Équipe Growth et reçoit un bilan chaque mois. Notre suivi SEO et GEO lui montre en plus si ChatGPT, Claude et Perplexity citent sa marque, à côté des données de la Google Search Console.

Pour l'équipe, une seule source de vérité

Comme tout l'historique d'un client tient désormais sur sa fiche, l'équipe ne reconstitue plus un projet à partir des e-mails. Chaque matin, le tableau de bord lui montre les demandes qui attendent une action de sa part et celles qui attendent les clients. Elle récupère ainsi le temps qu'elle passait à chercher une information dans plusieurs outils.

La même méthode s'applique aux portails et aux applications métiers de nos clients

Le portail montre le travail de Noqode au-delà du site, avec une application web complète reliée aux outils de l'équipe et protégée par des droits d'accès contrôlés. Nous appliquons la même méthode aux portails clients et aux applications métiers, avec un design terminé avant le code et des tests à chaque mise en production.

Le choix de la technologie suit le projet. Un site éditorial reste le plus souvent sur Webflow, mais nous pouvons le développer en Astro avec Sanity comme CMS headless quand il doit se relier à des outils métier. Quand le besoin dépasse le site, ce qui était le cas de ce portail, Next.js et Claude Code prennent le relais. Notre offre de développement sur mesure détaille ces formats.