Module Vedette / Chatbot Sensible au Contexte / Intégration au Portfolio
Résumé en une ligne :
Un système de chatbot robuste, modulaire et extensible pour le Portfolio Minimaliste en Verre, construit avec React Context, l'abstraction de services, et un accent mis sur la maintenabilité, l'accessibilité et une interface UI/UX avancée.
Durée du développement : Juin 2025 - Juillet 2025
Note(s) :
Clause de non-responsabilité sur l'hébergement/le code :
Le code source complet du module de chatbot est disponible sur demande. Pour des raisons de sécurité et de confidentialité, le code n'est pas publié publiquement.
Contact pour plus d'infos ou démos :
Contactez Franz Phillip G. Domingo via franzdomingo.dev.
Note sur la navigation :
Le chatbot est accessible via le bouton d'action flottant (FAB) sur le site du portfolio.
Fonctionnalités
Architecture modulaire avec composants réutilisables
Couche d'abstraction de services pour l'API/logique métier
Error boundaries et logique de tentative pour une UX robuste
Interface animée et accessible (Shadcn UI, Radix UI, Framer Motion)
Quick Actions pour des commandes rapides
Indicateur de saisie pour un retour en temps réel
Bouton d'action flottant (FAB) pour un accès facile
Conception extensible pour de nouveaux fournisseurs, prompts ou fonctionnalités
Séparation des préoccupations : UI, état, helpers, types, services
Performance optimisée : état côté client minimal, chargement dynamique, optimisation des images
Mes Contributions (Rôle et Responsabilités)
Architecture et Ingénierie :
Conception et mise en œuvre du système de chatbot modulaire, en séparant l'interface, l'état, les helpers et les services pour la maintenabilité.
Gestion d'État :
Construction de l'état de chat centralisé à l'aide de React Context et de hooks personnalisés.
Couche de Service :
Développement de l'abstraction pour l'API de chat et la logique métier, permettant une extension et des tests faciles.
UI/UX :
Création de composants animés et accessibles à l'aide de Shadcn UI, Radix UI et Framer Motion.
Gestion des Erreurs :
Mise en œuvre d'error boundaries et d'une logique de tentative pour une expérience utilisateur fluide.
Extensibilité :
Structuration de la base de code pour l'ajout facile de nouvelles fonctionnalités, fournisseurs et actions rapides.
Défis Rencontrés
Gestion du contexte :
S'assurer que l'état global du chat est fiable et extensible à travers plusieurs composants.
Gestion des erreurs :
Construction d'error boundaries robustes et d'une logique de tentative pour les réponses API imprévisibles.
Performance :
Optimisation du rendu pour les journaux de chat volumineux et les fonctionnalités d'interface dynamiques.
Accessibilité :
Rendre toutes les interactions du chatbot conviviales pour le clavier et les lecteurs d'écran.
Architecture du Projet
Style d'Architecture :
React modulaire avec une séparation claire des préoccupations (UI, état, helpers, services, types, utils).
Organisation des Composants :
components/chatbot/ : UI principale, FAB, rendu des messages, actions rapides, indicateur de saisie
components/chatbot/components/ : Mise en page, saisie, liste de messages, en-têtes, interface avancée
components/chatbot/helpers/ : Actions rapides, commandes hashtag, extraction de liens, définitions de types
components/chatbot/services/ : Abstraction du service de chat
components/chatbot/types/ : Interfaces TypeScript pour le contexte de chat et les messages
components/chatbot/utils/ : Gestion d'état, analytique, accessibilité, gestion des erreurs, etc.
Gestion d'État :
React Context et hooks personnalisés pour l'état et les opérations du chat.
Intégrations :
Framer Motion pour l'animation, Radix UI et Shadcn UI pour l'accessibilité et le design.
Aperçu de la Démo
Captures d'écran/Vidéo :
La démo en direct du chatbot est disponible sur franz-domingo.vercel.app. Ouvrez le chatbot via le bouton d'action flottant (FAB) pour interagir avec toutes les fonctionnalités en direct.
Vues Plateforme :
Web (responsive, mobile-first)
Fonctionnalités Présentées :
Bouton d'action flottant (FAB) pour l'accès au chat
Interface de chat animée et accessible
Actions rapides, indicateur de saisie, gestion des erreurs
Rendu de message modulaire et fonctionnalités sensibles au contexte
Instructions Démo :
Visitez franz-domingo.vercel.app et cliquez sur le FAB du chatbot pour lancer et interagir avec le chatbot.
Si vous avez besoin de plus de détails ou souhaitez voir la base de code, veuillez contacter directement l'auteur.
Résultat Clé : Intégration de chatbot fluide et accessible tout en maintenant un score de performance parfait de 100/100
Résumé : Un système de chatbot robuste, modulaire et extensible pour le Portfolio : Glass, construit avec React Context, une abstraction de service, et un focus sur la maintenabilité, l'accessibilité et l'UI/UX.
Le Problème
Défi : Le défi principal était d'implémenter un chatbot contextuel s'intégrant parfaitement dans une UI minimaliste "glassmorphic" sans casser l'esthétique ni les scores de performance.
Public : Recruteurs techniques, responsables d'ingénierie (ex: Trend Micro).
Contraintes : Garder les tailles de paquets réduites, maintenir le score Lighthouse à 100/100 et garantir l'accessibilité.
Approche & Décisions
Architecture : React modulaire avec séparation claire des préoccupations. Gestion d'état centralisée via React Context.
Décisions Clés :
Abstraction de Service : Couche d'abstraction pour l'API du chat, facilitant l'extension.
Primitives UI Modulaires : Séparation des composants pour éviter les structures monolithiques.
Compromis : Choix de React Context plutôt que Redux pour minimiser la taille du paquet.
Flux de Données : Les saisies utilisateur transitent par le React Context vers la couche de service abstraite.
Résultats Clés & Impact
Résultat : Un chatbot hautement accessible et performant.
Comparaison : A élevé le portfolio statique en ajoutant une interface conversationnelle dynamique.
Impact : A démontré de solides compétences en ingénierie frontend aux recruteurs.
