InvoiceFLOW

🔍 Overview

InvoiceFLOW es una plataforma SaaS B2B diseñada para simplificar la facturación y la gestión de clientes para autónomos y pymes. El cliente web está construido con React 19 y Next.js (App Router), integrado dentro de una arquitectura de monorrepo que permite compartir entidades de dominio y contratos de API estrictamente tipados entre el Frontend y el Backend.

🌟 Key Features

• Arquitectura Monorepo Type-Safe: Uso de paquetes compartidos (@repo/core, @repo/application) para mantener una única fuente de verdad en los tipos (TypeScript) entre toda la plataforma.
• Sistema de Plantillas Dinámicas: Renderizado de facturas en tiempo real con diferentes estilos visuales utilizando componentes de React interactivos.
• Dashboard Reactivo: Interfaz construida con Shadcn UI y Tailwind CSS, optimizada con SWR para garantizar que los datos financieros se mantengan actualizados sin recargar la página.
• Autenticación Segura: Flujo de sesión gestionado mediante NextAuth.js, con protección de rutas híbrida (Middleware y Server Components) para garantizar el aislamiento de datos (Multi-tenant).
• Procesamiento Distribuido: Backend en NestJS acoplado a colas de BullMQ y Redis para delegar la generación asíncrona de PDFs pesados mediante workers en segundo plano.

🧠 Challenges & Learnings

Gestión de Estado en App Router: El mayor reto fue encontrar el balance perfecto entre Server Components (RSC) para velocidad/Seguridad y Client Components para interactividad. Implementé SWR junto a una capa de servicios API personalizada para inyectar dinámicamente los JWTs, logrando una experiencia de usuario fluida.

Arquitectura de Colas con BullMQ: Integrar la generación masiva de PDFs en el servidor sin bloquear el Event Loop de Node.js requirió aislar los procesos mediante workers asíncronos sobre Redis, estabilizando los tiempos de respuesta de la API REST por debajo de los 150ms.

🎯 Outcome

El resultado es un cliente web altamente escalable y mantenible. Gracias a la migración a Turbopack y la separación por capas del monorepo, los tiempos de build se redujeron significativamente, y la experiencia de usuario se percibe instantánea gracias al manejo de caché de SWR.