SNCF SECAFI IA Reseau
Plateforme d'Assistance Intelligente pour le Réseau Ferroviaire
Aperçu
Contexte
La SNCF SECAFI avait besoin d'un outil interne intelligent pour assister dans la prise de décisions stratégiques, fournissant des estimations et prévisions sur les scénarios futurs du réseau ferroviaire via l'intelligence artificielle. Le système permet aux employés de faire des requêtes complexes et d'obtenir des analyses prédictives basées sur les données historiques et les modèles identifiés.
Solution
Système complet avec API REST robuste en NestJS et interface web moderne éditable en React. Intégration avec Chatbase AI pour le traitement de requêtes complexes et la génération d'estimations, système d'authentification JWT, et panneau administratif pour le suivi des conversations et prédictions. Interface entièrement configurable via l'API.
Mon Rôle
J'ai travaillé en tant que Full Stack Developer responsable de tout le développement du projet. J'ai développé toute l'architecture de l'API backend avec NestJS, TypeORM et MySQL, et implémenté complètement le frontend en React, incluant toutes les animations et interactions. Seul le design UI/UX a été fourni par l'équipe de House of Coding via Figma.
Stack Technique
Frontend
Backend
Projets
SNCF IA Reseau API
Backend NestJS avec Interface Éditable via API
API REST robuste développée en NestJS avec architecture modulaire. Système complet d'authentification JWT, intégration avec Chatbase AI pour le traitement de requêtes et la génération d'estimations, et interface entièrement éditable et configurable via les endpoints de l'API.
Fonctionnalités
Authentification JWT
Système complet avec register/login, refresh tokens, guards de protection et stratégie Passport
Intégration Chatbase AI
Proxy pour l'API Chatbase avec gestion des conversations, historique et rate limiting
Suivi des Conversations
Historique complet des conversations avec filtres, pagination et statistiques
API de Statistiques
Dashboard avec métriques d'utilisation, conversations par période et analyse des utilisateurs actifs
Swagger/OpenAPI
Documentation automatique et interactive de l'API avec exemples
Docker Setup
Containerisation complète avec MySQL, volumes persistants et réseau isolé
Design Patterns
Décisions Techniques
NestJS vs Express/Fastify
Structure enterprise-ready out-of-the-box, TypeScript first-class, architecture modulaire scalable, decorators pour métaprogrammation, intégration Swagger native
TypeORM vs Prisma
Decorators pour entities, migrations robustes, support multi-bases de données, pattern active record familier, meilleur pour projets NestJS complexes
JWT vs Session
Stateless, scalable horizontalement, pas de stockage serveur requis, idéal pour APIs REST, refresh tokens pour sécurité
Chatbase vs OpenAI Direct
Système de conversations géré, entraînement spécifique du modèle, rate limiting inclus, métriques intégrées, coût optimisé
Défis & Solutions
Rate Limiting Chatbase
Implémentation de file d'attente de requêtes avec retry exponentiel, cache des réponses fréquentes, messages de fallback pour timeouts
Gestion des Tokens JWT
Refresh tokens avec rotation, blacklist pour tokens révoqués, expiration configurable par environnement
Persistance des Conversations
Schéma optimisé avec index, relation User-Conversation 1:N, soft delete pour audit
Validation des Données
DTOs avec class-validator, transform pipes globaux, validateurs personnalisés pour règles métier
Développement Docker
Docker Compose avec hot-reload, volumes pour persistance MySQL, réseau isolé, variables d'environnement sécurisées
SNCF IA Reseau Front
Interface Web Moderne avec Chat Intelligent
Application React single-page avec design fourni par l'équipe House of Coding via Figma. Interface moderne avec chat en temps réel, panneau administratif complet, et système d'authentification intégré. Animations et interactions développées par moi.
Fonctionnalités
Interface de Chat
Interface conversationnelle en temps réel avec historique, indicateurs de saisie et rendu markdown
Authentification
Login/register avec validation, persistance de session, refresh automatique des tokens
Panneau Administratif
Dashboard avec statistiques, gestion des utilisateurs, visualisation des conversations et analytics
Gestion des Utilisateurs
CRUD complet, filtres avancés, rôles et permissions, export de données
Historique des Conversations
Visualisation détaillée de toutes les conversations avec filtres par date, utilisateur et contenu
Système de Notifications
Toasts avec Sonner pour feedback d'actions et erreurs
Tables Interactives
TanStack Table avec sorting, filtering, pagination et visibilité des colonnes
Formulaires Validés
React Hook Form + Zod pour validation robuste et type-safe
Animations Personnalisées
Transitions fluides, micro-interactions et loading states développés par moi
Design Responsive
Layout adaptatif pour desktop, tablette et mobile basé sur le Figma de House of Coding
Design Patterns
Décisions Techniques
React vs Next.js
SPA pure sans besoin de SSR, authentification client-side, déploiement plus simple, routing client-side suffisant
TanStack Query vs Redux
Spécialisé en server state, cache intelligent, moins de boilerplate, invalidation automatique, devtools excellents
shadcn/ui vs Material UI
Copy-paste sans dépendances lourdes, personnalisation totale via Tailwind, accessibilité Radix, composants modernes
React Hook Form + Zod
Performance supérieure (moins de re-renders), validation type-safe, intégration parfaite, bundle plus petit que Formik
Recharts vs Chart.js
Composable, déclaratif avec React, personnalisation via props, TypeScript natif, responsive out-of-the-box
Défis & Solutions
Implémentation du Design Figma
Fidélité pixel-perfect au design de House of Coding avec Tailwind, système de couleurs et espacements cohérent, composants réutilisables
Animations Personnalisées
Transitions CSS personnalisées, framer-motion pour animations complexes, loading skeletons, micro-interactions sur boutons et cards
Expérience Chat Temps Réel
Polling optimisé avec React Query, auto-scroll intelligent, indicateurs de saisie, formatage markdown
Gestion des Tokens
Intercepteur axios pour refresh automatique, retry des requêtes échouées, logout sur token expiré
Tables Performantes
Virtualisation avec TanStack Table, pagination serveur, lazy loading, mémoïsation des cellules