Tlaloc's Garden - E-Commerce IOT
Plataforma E-Commerce empresarial para venta de sistemas de riego inteligente IOT con gestión completa de inventario, BOM, pedidos y cotizaciones
Tecnologías
01. Contexto
Una empresa de sistemas de riego inteligente IOT necesitaba una plataforma E-Commerce completa que no solo permitiera ventas en línea, sino que integrara toda la gestión empresarial: control de inventario de componentes electrónicos, gestión de BOM para ensamblaje de productos, manejo de proveedores y compras, sistema de cotizaciones B2B, reportes gerenciales y soporte técnico. El sistema debía manejar productos complejos con múltiples componentes (sensores, microcontroladores, válvulas, paneles solares) cada uno con su propio inventario y proveedores.
02. Objetivo
Desarrollar una aplicación web empresarial full-stack que unificara ventas E-Commerce con gestión operativa completa: frontend en Angular 20 con arquitectura standalone moderna, backend REST API en .NET Core, autenticación JWT con refresh tokens, sistema de roles granular (Admin, Vendedor, Cliente, Soporte, Producción), gestión de productos con BOM multinivel, control de inventario por lotes, módulo de compras y proveedores, sistema de cotizaciones y conversión a pedidos, reportes ejecutivos y dashboard administrativo, todo optimizado para rendimiento con lazy loading y code splitting.
03. Mi Rol
Diseñé e implementé la arquitectura completa frontend-backend. En Angular: configuré proyecto con Standalone Components, implementé 12 módulos con lazy loading, creé sistema de autenticación con JWT interceptor funcional, desarrollé guards funcionales para protección de rutas, implementé servicios HTTP con RxJS para manejo reactivo de datos, integré Angular Material 20 con tema personalizado, configuré internacionalización con ngx-translate. En Backend: diseñé API REST en .NET Core con endpoints para todos los módulos, implementé autenticación JWT con refresh tokens, creé sistema de roles y permisos. Documenté exhaustivamente toda la arquitectura técnica del proyecto.
Arquitectura
- Frontend: Angular 20 con Standalone Components (sin NgModules), arquitectura modular por features
- Backend: API REST en .NET Core con endpoints para 12 módulos funcionales
- Autenticación: JWT con refresh tokens automáticos, localStorage para persistencia, guards funcionales
- HTTP: Interceptores funcionales para inyectar tokens, retry automático en 401, manejo centralizado de errores
- UI/UX: Angular Material 20 con tema personalizado, responsive design con FlexLayout
- Routing: Sistema de rutas con lazy loading, rutas hijas, guards de autenticación
- Estado: Servicios singleton con RxJS para manejo reactivo de estado compartido
- i18n: ngx-translate para internacionalización (Español/Inglés)
- Build: Optimizaciones de producción (tree-shaking, minificación, hashing, AOT compilation)
Decisiones Técnicas
- Elegí Angular 20 Standalone Components para arquitectura moderna sin complejidad de NgModules
- Implementé guards funcionales (CanActivateFn) en lugar de clases para código más limpio y testeable
- Utilicé interceptores funcionales (HttpInterceptorFn) con inject() para mejor inyección de dependencias
- Diseñé sistema de refresh automático de JWT que reintenta peticiones fallidas sin perder contexto
- Configuré lazy loading con loadComponent/loadChildren para bundles optimizados por módulo
- Implementé RxJS operators (map, tap, catchError, switchMap) para flujo de datos reactivo y robusto
- Utilicé @auth0/angular-jwt para decodificación de tokens y validación de expiración
- Configuré variables de entorno con import.meta.env para configuración flexible entre ambientes
- Implementé Angular Material con tema SCSS personalizado para consistencia visual empresarial
Galería del Proyecto
Impacto y Resultados
- 12 módulos funcionales implementados con lazy loading (Auth, Dashboard, Users, Products, Orders, Quotes, Inventory, Purchases, Suppliers, Reports, Support, Home)
- 5 tipos de roles con matriz granular de permisos (Admin, Vendedor, Cliente, Soporte, Producción)
- Sistema de BOM para productos IOT con gestión de materiales y costos automáticos
- Guards funcionales y interceptores HTTP para seguridad y manejo centralizado de peticiones
- Arquitectura 100% Standalone Components eliminando todos los NgModules
- Sistema de refresh automático de JWT sin interrupciones de UX
- Documentación técnica exhaustiva de 1500+ líneas con arquitectura, servicios, modelos y API endpoints
"El sistema integra perfectamente las ventas E-Commerce con toda la operación interna. La gestión de BOM nos permitió calcular costos reales de productos IOT considerando componentes importados con precios fluctuantes."
Lecciones Aprendidas
- 💡 Los Standalone Components simplifican significativamente la arquitectura Angular eliminando complejidad de módulos
- 💡 Los guards funcionales con inject() son más simples y testeables que clases con constructor injection
- 💡 El sistema de refresh automático de JWT requiere cuidadoso manejo de race conditions con switchMap
- 💡 El lazy loading efectivo puede reducir bundle inicial en >70% mejorando Time to Interactive dramáticamente
- 💡 RxJS operators bien utilizados (tap para efectos secundarios, switchMap para cancelar peticiones previas) previenen memory leaks
- 💡 La documentación técnica exhaustiva es crucial en proyectos empresariales para mantenibilidad a largo plazo
- 💡 Angular Material theming requiere comprensión profunda de SCSS y paletas de colores para personalización real
- 💡 El sistema de roles debe diseñarse desde el inicio; agregarlo después requiere refactorización masiva