Módulo Destacado / Chatbot Consciente del Contexto / Integración de Portafolio
Resumen de una línea:
Un sistema de chatbot robusto, modular y extensible para el Portafolio Glass Minimalista, construido con React Context, abstracción de servicios y un enfoque en la mantenibilidad, accesibilidad y UI/UX avanzada.
Duración del Desarrollo: Junio 2025 - Julio 2025
Nota(s):
Descargo de responsabilidad sobre hosting/disponibilidad de código:
El código fuente completo del módulo del chatbot está disponible previa solicitud. Por seguridad y privacidad, el código no se publica públicamente.
Contacto para más información o demostraciones:
Póngase en contacto con Franz Phillip G. Domingo a través de franzdomingo.dev.
Nota de navegación:
El chatbot es accesible a través del botón de acción flotante (FAB) en el sitio del portafolio.
Características
Arquitectura modular con componentes reutilizables
Gestión de estado centralizada mediante React Context
Capa de abstracción de servicios para API/lógica de negocio
Límites de error (Error boundaries) y lógica de reintento para una UX robusta
Interfaz de usuario animada y accesible (Shadcn UI, Radix UI, Framer Motion)
Acciones Rápidas para comandos veloces
Indicador de escritura para retroalimentación en tiempo real
Botón de Acción Flotante (FAB) para un fácil acceso
Diseño extensible para nuevos proveedores, prompts o características
Separación de responsabilidades: UI, estado, ayudantes, tipos, servicios
Rendimiento optimizado: estado mínimo en el lado del cliente, carga dinámica, optimización de imágenes
Mis Contribuciones (Rol y Responsabilidades)
Arquitectura e Ingeniería:
Diseñé e implementé el sistema de chatbot modular, separando la interfaz de usuario, el estado, los ayudantes y los servicios para facilitar el mantenimiento.
Gestión de Estado:
Construí el estado de chat centralizado utilizando React Context y hooks personalizados.
Capa de Servicio:
Desarrollé la abstracción para la API de chat y la lógica de negocio, permitiendo una fácil extensión y pruebas.
UI/UX:
Creé componentes animados y accesibles utilizando Shadcn UI, Radix UI y Framer Motion.
Manejo de Errores:
Implementé límites de error y lógica de reintento para una experiencia de usuario fluida.
Extensibilidad:
Estructuré el código base para añadir fácilmente nuevas características, proveedores y acciones rápidas.
Desafíos Enfrentados
Gestión del contexto:
Asegurar que el estado global del chat sea confiable y extensible a través de múltiples componentes.
Manejo de errores:
Construir límites de error robustos y lógica de reintento para respuestas de API impredecibles.
Rendimiento:
Optimizar el renderizado para registros de chat grandes y características de UI dinámicas.
Accesibilidad:
Hacer que todas las interacciones del chatbot sean amigables para el teclado y los lectores de pantalla.
Arquitectura del Proyecto
Estilo de Arquitectura:
React modular con clara separación de responsabilidades (UI, estado, ayudantes, servicios, tipos, utilidades).
Organización de Componentes:
components/chatbot/: Interfaz de usuario principal, FAB, renderizado de mensajes, acciones rápidas, indicador de escritura.
components/chatbot/components/: Diseño, entrada, lista de mensajes, encabezados, interfaz de usuario avanzada.
components/chatbot/helpers/: Acciones rápidas, comandos de hashtag, extracción de enlaces, definiciones de tipos.
components/chatbot/services/: Abstracción del servicio de chat.
components/chatbot/types/: Interfaces de TypeScript para el contexto y los mensajes del chat.
components/chatbot/utils/: Gestión de estado, analítica, accesibilidad, manejo de errores, etc.
Gestión de Estado:
React Context y hooks personalizados para el estado y las operaciones del chat.
Integraciones:
Framer Motion para animación, Radix UI y Shadcn UI para accesibilidad y diseño.
Vista Previa de la Demo
Capturas de pantalla/Video:
La demo en vivo del chatbot está disponible en franz-domingo.vercel.app. Abra el chatbot a través del botón de acción flotante (FAB) para interactuar con todas las funciones en vivo.
Vistas de Plataforma:
Web (responsivo, móvil primero)
Funcionalidad Mostrada:
Botón de acción flotante (FAB) para el acceso al chat.
Interfaz de usuario de chat animada y accesible.
Acciones rápidas, indicador de escritura, manejo de errores.
Renderizado de mensajes modular y características conscientes del contexto.
Instrucciones de la Demo:
Visite franz-domingo.vercel.app y haga clic en el FAB del chatbot para iniciar e interactuar con el chatbot.
Si necesita más detalles o desea ver el código base, póngase en contacto directamente con el autor.
\n# Chatbot (Portfolio: Glass)
Chatbot Inteligente e Integración de Portafolio
Resultado Clave: Integración fluida y accesible del chatbot manteniendo una puntuación de rendimiento perfecta de 100/100
Resumen: Un sistema de chatbot robusto, modular y extensible para el Portfolio: Glass, construido con React Context, abstracción de servicios y un enfoque en la mantenibilidad, la accesibilidad y el diseño UI/UX avanzado.
El Problema
Desafío: El desafío principal fue implementar un chatbot que se integrara perfectamente en una interfaz de cristal minimalista sin romper la estética ni las puntuaciones de rendimiento perfectas. Garantizar que el estado global fuera confiable fue un obstáculo importante.
Público: Reclutadores técnicos, líderes de ingeniería y equipos en empresas donde solicitaba prácticas (como Trend Micro).
Restricciones: Lograr una UI coherente manteniendo pequeños los tamaños de los paquetes iniciales del cliente, conservando la puntuación de Lighthouse y asegurando interacciones amigables con teclado y lectores de pantalla.
Enfoque y Decisiones
Arquitectura: React modular con clara separación de preocupaciones. Gestión de estado centralizada usando React Context para orquestar el estado conversacional sin bibliotecas pesadas.
Decisiones Clave:
Abstracción de Servicios: Se desarrolló una capa para la API de chat, permitiendo una fácil extensión y pruebas de diferentes proveedores de LLM.
Primitivas UI Modulares: Separación de componentes para evitar estructuras monolíticas.
Compensaciones: Se eligió React Context sobre Redux para minimizar el tamaño del paquete y mantener el rendimiento.
Flujo de Datos: La entrada del usuario fluye a través de componentes hacia el React Context, el cual se comunica con la capa de servicios.
Resultados Clave e Impacto
Resultado: Un chatbot altamente accesible y de gran rendimiento que enriquece la experiencia sin degradar los tiempos de carga.
Comparación: Elevó el Portfolio: Glass estático añadiendo una interfaz dinámica.
Impacto: Demostró habilidades avanzadas de ingeniería frontend a los reclutadores.
Métrica
Resultado
Rendimiento Lighthouse
Mantuvo 100/100
Accesibilidad
Compatible con teclado y lector de pantalla
Impacto en Bundle
Mínimo (Carga optimizada)
Profundización Técnica
Detalles Notables: Acciones rápidas, indicador de escritura, Botón de Acción Flotante (FAB) y arquitectura modular.
Verificación: Construido con límites de error y probado localmente usando Lighthouse.
Optimizaciones: Carga dinámica diferida y optimización de imágenes.
Calidad de Código: Controles estrictos de TypeScript.
Reflexiones
Diferente: Habría planeado la abstracción de servicios de API antes para acomodar más proveedores de LLM.
Éxitos: Construcción exitosa del estado con React Context sin bibliotecas externas.
Lecciones: Gestionar estado interactivo en un sitio estático requiere disciplina arquitectónica estricta.
Mis Contribuciones
Arquitectura: Diseño e implementación del sistema modular.
Gestión de Estado: Estado centralizado con React Context.
UI/UX: Componentes animados y accesibles.
Arquitectura del Proyecto
Este módulo sigue una arquitectura React modular con clara separación de preocupaciones.
Estructura en Capas: UI, estado, ayudantes y servicios están estrictamente separados.
Gestión de Estado: React Context y hooks personalizados.
