Case study · Duo · 2025 — 2026
NeurOlan — SaaS Web3 d'agents IA autonomes.
SaaS Web3 d'agents IA autonomes qui combinent intelligence artificielle, blockchain Solana et automatisation social media. Auth par wallet (Solana/Phantom), calendrier éditorial Kanban drag & drop, i18n FR/EN, WebSocket temps réel pour l'orchestration des agents.
Projet en binôme. Mon rôle : Frontend lead & Product Manager — architecture UI, intégration Web3, livraison produit, pilotage sprints.
Le problème résolu
L'automatisation social media (planification, publication, analytics) est dominée par des plateformes centralisées (Buffer, Hootsuite, Sprout Social) avec un modèle d'abonnement, des limites d'API tierces, et zéro contrôle sur les données de ciblage.
NeurOlan propose une alternative décentralisée :
- Auth par wallet — pas d'email, pas de mot de passe, pas de données personnelles stockées en clair.
- Agents IA autonomes qui génèrent le contenu, décident du moment de publication, et ajustent selon l'engagement observé.
- Paiement on-chain — crédits achetés en SOL/USDC, pas d'intermédiaire bancaire, pas de KYC lourd.
Positionnement : outil pour créateurs Web3 (NFT, DeFi, DAO) qui veulent une stack cohérente avec leur écosystème.
Architecture produit
Monorepo Next.js 14 (App Router) avec trois surfaces :
- Marketing site — pages publiques SSG, contenu i18n FR/EN, conversion signup wallet.
- App authentifiée — dashboard, calendrier éditorial, configuration d'agents, historique. Rendu côté client avec cache React Query.
- API proxy — middleware Next.js qui relaye vers le backend (séparé) les appels sociaux (Twitter/X, Farcaster, Lens) et les opérations on-chain. Protège les clés API tierces et applique du rate-limiting.
WebSocket via Socket.io pour :
- Statut temps réel des agents (en cours / en attente / terminé / erreur).
- Notifications de publication (tweet posté, engagement détecté).
- Évolution des crédits on-chain sans polling.
Authentification Web3
L'auth par wallet remplace le couple email+password par une signature cryptographique. Flow :
- Utilisateur clique "Connect Phantom" → le provider wallet est détecté via
window.solana. - Le client demande une signature sur un nonce aléatoire généré par l'API (stocké en Redis avec TTL 5 min).
- Le wallet signe le nonce → la signature revient au backend.
- Le backend vérifie la signature avec
@solana/web3.js→ si OK, émet un JWT court (15 min) + refresh token long (7 jours).
Pas de mot de passe, pas de "oubli de compte", pas de données personnelles. La seule identité est la clé publique Solana.
Fallback géré : si Phantom n'est pas installé, proposition d'installer l'extension ; si wallet bloqué, message clair + retry.
Calendrier éditorial Kanban
Interface de pilotage central : un Kanban drag & drop où les posts sont déplacés entre colonnes (Idée → En revue → Programmé → Publié → Archivé). Chaque carte contient le texte, le média, les tags, le créneau de publication, et l'agent qui l'a générée.
Tech : dnd-kit (moderne, accessibilité clavier OK) plutôt que react-beautiful-dnd (déprécié). Persistance optimiste : le drag met à jour l'UI immédiatement, le backend confirme async — rollback visuel en cas d'erreur.
Collaboration : plusieurs utilisateurs (DAO) peuvent éditer le même calendrier. WebSocket broadcast les changements — pattern OT (operational transformation) léger pour éviter les conflits.
Sécurité — CSP dynamique
Un enjeu spécifique au Web3 : les wallets injectent du code dans la page (window.solana, window.phantom). Un CSP trop strict casse la connexion ; un CSP trop permissif ouvre une surface XSS.
Solution : CSP dynamique généré par le middleware Next.js, avec un nonce par requête. Les scripts inline (Next.js en a besoin pour l'hydratation) portent ce nonce. Les domaines wallet sont whitelistés (phantom.app, chrome-extension://* en dev).
Bonus : Reporting CSP via report-uri pour détecter les tentatives d'injection ou les dépendances qui violent la politique.
Défis rencontrés
- Hydratation Next.js + wallet —
window.solanan'existe pas côté serveur. Le hook de connexion doit attendreuseEffect, ce qui produit un flash "Connect" → "Connected". Mitigation : skeleton + useSyncExternalStore pour minimiser le flash. - Rate limiting social API — Twitter/X API v2 a des quotas stricts et variables. Retry exponentiel + queue Redis par utilisateur pour lisser les pics.
- WebSocket sur Vercel — l'edge runtime ne supporte pas les WebSockets longue durée. On a hébergé le service Socket.io à part (Fly.io), avec CORS strict.
- i18n FR/EN dans l'App Router — pattern
app/[lang]/avec middleware de détection Accept-Language + cookie. Keys JSON plates, namespace par feature. - UX Web3 pour non-crypto-natifs — 80 % des premiers visiteurs n'ont jamais utilisé un wallet. Flow d'onboarding avec schémas visuels + vidéos courtes pour désamorcer l'appréhension.
Apprentissages
Trois leçons fortes qui changent ma manière de développer :
- Le PM + frontend lead dans la même tête accélère énormément. Pas de briefs à écrire, pas de backlog dépriorisé, pas de "pourquoi on a fait ça ?". En binôme, on a livré 3× plus vite qu'une équipe classique à effectif équivalent. Ça ne scale pas au-delà de 4-5 personnes — mais pour un MVP, c'est imbattable.
- Le Web3 est une UX avant d'être une techno. La blockchain gère correctement ses primitives depuis longtemps ; ce qui pèche c'est l'accessibilité au grand public. Investir dans l'onboarding et la clarté des états (en attente, signé, confirmé, échoué) fait toute la différence.
- Le CSP n'est pas optionnel, même pour un MVP. Il force à penser l'architecture sécurité dès le début — et c'est bien plus facile que de la rétrofitter après une levée.