Envigite.dev
Menu
InicioHabilidadesProyectosTrayectoria
Frontend

Dashboard Cierre de Temporada

Plataforma de inteligencia de negocios para el sector agrícola, migrada de un MVP táctico a una arquitectura escalable en Next.js.

Rol
Product Engineer & Lead Developer
Año
2025
Stack
8+ Techs
Estado
En Producción

Stack Tecnológico

Next.js 16TypeScriptChart.jsFramer MotionTailwind CSSData VisualizationApp RouterRapid Prototyping

La Historia

Este proyecto nació en las trincheras del Área de Operaciones. Ante un cierre de temporada crítico y plazos imposibles, recibí la misión de consolidar la data productiva para la Gerencia. Mi primera decisión fue estratégica: priorizar la velocidad. Utilicé técnicas de Rapid Prototyping asistido por IA para entregar un MVP funcional que salvó la presentación y permitió la toma de decisiones basada en datos reales. Sin embargo, como ingeniero, sabía que el código de emergencia no es sostenible. Decidí realizar una reingeniería total, migrando la solución a Next.js 16 con App Router. Implementé una arquitectura modular estricta con TypeScript para blindar la lógica de cálculo (vital en métricas de mermas y rendimiento) y sustituí la deuda técnica del prototipo por patrones de diseño limpios y componentes reutilizables. El resultado es una herramienta de visualización "Premium" que no solo se ve bien, sino que es extremadamente robusta. Integré Framer Motion para micro-interacciones que guían al usuario y Chart.js para manejar grandes volúmenes de datos sin sacrificar rendimiento. Lo que comenzó como un script de supervivencia es hoy un producto digital maduro, escalable y listo para crecer.

Galería

Captura web 0
Captura web 1
Captura web 2
Captura web 3
Captura web 4
Captura web 5

El Desafío

  • Refactorizar la lógica de negocio 'hardcoded' de un MVP rápido hacia un sistema tipado y modular.
  • Garantizar la precisión decimal en cálculos de mermas y rendimiento agrícola utilizando TypeScript estricto.
  • Optimizar el renderizado de gráficos complejos (Chart.js) dentro de la arquitectura de Server Components de Next.js.
  • Diseñar una UX fluida que transforme tablas de datos áridos en insights visuales inmediatos para la gerencia.
  • Implementar un sistema de filtrado avanzado (por lote, fecha y tipo de fruto) sin comprometer la performance del cliente.

La Solución

  • Dashboard interactivo de alto rendimiento (Next.js App Router)
  • Visualización avanzada de métricas (Frutilla/Mix Berries) con Chart.js
  • Transiciones y feedback visual fluido con Framer Motion
  • Cálculo automatizado de KPIs logísticos y de despezonado
  • Arquitectura de componentes atomizada y tipada
  • Diseño UI 'Premium' enfocado en la legibilidad de datos
  • Exportación de reportes ejecutivos

Ingeniería & Arquitectura

Evolución de Arquitectura

Migración de un Monolito Frontend (Legacy) a una estructura modular basada en Next.js App Router, separando UI de la lógica de negocio.

Integridad de Datos

Uso de TypeScript estricto e interfaces compartidas para asegurar que los cálculos de mermas y proyecciones sean matemáticamente consistentes.

Visualización Performante

Implementación optimizada de librerías gráficas (Chart.js) evitando re-renders innecesarios mediante la gestión eficiente del estado.