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.

Rôle
Frontend Dev & PM (binôme)
Période
2025 — 2026
Statut
En ligne · neurolan.io
Stack
Next.js 14, React 18, TypeScript, TailwindCSS, Solana Web3.js, Socket.io
NeurOlan — dashboard SaaS Web3 : KPIs tweets, likes, engagement, live activity feed des agents IA, top performance, queue de publication, calendrier éditorial, autopilot core et analytics cross-agents

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 :

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 :

  1. Marketing site — pages publiques SSG, contenu i18n FR/EN, conversion signup wallet.
  2. App authentifiée — dashboard, calendrier éditorial, configuration d'agents, historique. Rendu côté client avec cache React Query.
  3. 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 :

Authentification Web3

L'auth par wallet remplace le couple email+password par une signature cryptographique. Flow :

  1. Utilisateur clique "Connect Phantom" → le provider wallet est détecté via window.solana.
  2. Le client demande une signature sur un nonce aléatoire généré par l'API (stocké en Redis avec TTL 5 min).
  3. Le wallet signe le nonce → la signature revient au backend.
  4. 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

Apprentissages

Trois leçons fortes qui changent ma manière de développer :

  1. 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.
  2. 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.
  3. 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.