🎯 Introducción del Proyecto

Ecosistema central interactivo y orquestador de microservicios (Frontend).

¡Te doy la bienvenida a la documentación de mi portafolio de desarrollo web!

Este proyecto actúa como un HUB central diseñado bajo una arquitectura estática y modular, sirviendo como punto de integración para cuatro microservicios independientes. Su propósito es demostrar mis capacidades en ingeniería de software, patrones de diseño y despliegues fullstack integrando múltiples tecnologías.

​

🚀 Características del Proyecto & UX Avanzada

Arquitectura Híbrida Estática

Generación de sitio estático (SSG) con Astro para asegurar tiempos de carga casi instantáneos y un rendimiento óptimo.

Islas de Interactividad

Integración de componentes dinámicos en React hidratados mediante client:load para un manejo eficiente del estado del lado del cliente.

Consumo de Microservicios

Contratos de comunicación homologados bajo versionado estricto (/api/v1/) interactuando con backends en Java y PHP.

Accesibilidad Web (a11y)

Atributos ARIA y semántica HTML nativa para soportar navegación por teclado y lectores de pantalla.

​

🛠️ Stack Tecnológico

Tecnología	Propósito en el proyecto
Astro	Generación de sitio estático (SSG), colecciones de contenido y enrutamiento
React	Componentes interactivos, hidratación y manejo de estado complejo
Tailwind CSS	Estilos globales con variables CSS puras bajo una paleta oscura
Axios	Clientes HTTP configurados con interceptores de seguridad

​

📈 Casos de Estudio Destacados

El HUB integra y orquesta múltiples microservicios (desplegados de forma independiente) en una sola interfaz fluida:

1. Sandbox Interactivo: Motor Transaccional

• Integración Viva en la Nube: Consumo de peticiones asíncronas bajo semántica REST hacia un backend robusto en Spring Boot 3 (Java 21).
• UI Reactiva Defensiva: Emite Custom Events para congelar la navegación global durante los ciclos de red activos.
• Logger de Red Integrado: Módulo de observabilidad acoplado a la interfaz que despliega visualmente el ciclo de vida completo de los intercambios HTTP.

2. Generador Dinámico de Reportes

• Consistencia de Contexto: Inyección dinámica de la zona horaria del cliente (Intl.DateTimeFormat().resolvedOptions().timeZone) hacia el motor de renderizado PHP.
• UX Perimetral: Prevención de Race Conditions interceptando códigos HTTP 429 (Rate Limiting).

3. Pipeline ETL: Ingesta Masiva

• Sincronización Inteligente de Red: Frontend defensivo que consulta activamente (polling) la salud del motor backend.
• Terminal SQL: Consola interactiva embebida que evalúa la robustez del sistema y el WAF simulado del backend.

4. Micro-Frontend: Gestión de Identidad (IAM)

• Control de Accesos: Consumo de backend en PHP (Laravel 13) evaluando roles (admin, auditor, operador).
• Cliente HTTP Inteligente: Interceptores de Axios para la inyección automática y segura de JWT.
• Experiencia Integrada: Componentes de autenticación operando como una aplicación de una sola página (SPA).

​

💻 Comandos de Desarrollo

Todos los comandos se ejecutan desde la raíz del proyecto utilizando pnpm:

# Instalar dependencias
pnpm install

# Iniciar servidor local (localhost:4321)
pnpm dev

# Compilar sitio estático optimizado para producción
pnpm build

# Previsualizar compilación localmente
pnpm preview