Trading analytics dashboard
Un panel privado para seguir y controlar mis bots de trading en varias cuentas de bróker.
Los bots corren solos y operan en varias cuentas de cTrader. Revisarlos era leer logs. Necesitaba equity, P&L diario y estado del bot en una pantalla. También poder pausar un bot sin abrir una terminal.
Tres decisiones que lo definieron.
- 01
Export estático, todos los datos se piden desde el navegador
Por qué. El panel se publica como archivos, sin un servidor Node que mantener. Cada request lleva la cookie de sesión a la API de los bots.
El costo. El guard de auth es una redirección en el cliente. La API tiene que validar todo, y cada pantalla arranca con un skeleton.
- 02
Los eventos SSE disparan refetch y el polling queda de respaldo
Por qué. Un trade cerrado o un snapshot nuevo refresca la tarjeta justa al instante. Un polling de 15 a 60 segundos cubre si se corta el stream.
El costo. Cada componente que escucha abre su propio EventSource. El resumen mantiene tres a la vez.
- 03
El reporte mensual es una hoja de estilos de impresión
Por qué. El reporte se renderiza como una página más. Una regla @page A4 apaisada y window.print() lo convierten en PDF.
El costo. No hay PDF automático. Alguien tiene que abrir la página e imprimirla.
Trading analytics dashboard
Un panel privado para seguir y controlar mis bots de trading en varias cuentas de bróker.
- Rol
- Herramienta interna: diseñada y construida para mis propios bots de trading
- Stack
- Next.js 15, React 19, TypeScript, Recharts, Tailwind CSS 4
Los bots corren solos y operan en varias cuentas de cTrader. Revisarlos era leer logs. Necesitaba equity, P&L diario y estado del bot en una pantalla. También poder pausar un bot sin abrir una terminal.
Tres decisiones que lo definieron.
Export estático, todos los datos se piden desde el navegador
Por qué. El panel se publica como archivos, sin un servidor Node que mantener. Cada request lleva la cookie de sesión a la API de los bots.
El costo. El guard de auth es una redirección en el cliente. La API tiene que validar todo, y cada pantalla arranca con un skeleton.
Los eventos SSE disparan refetch y el polling queda de respaldo
Por qué. Un trade cerrado o un snapshot nuevo refresca la tarjeta justa al instante. Un polling de 15 a 60 segundos cubre si se corta el stream.
El costo. Cada componente que escucha abre su propio EventSource. El resumen mantiene tres a la vez.
El reporte mensual es una hoja de estilos de impresión
Por qué. El reporte se renderiza como una página más. Una regla @page A4 apaisada y window.print() lo convierten en PDF.
El costo. No hay PDF automático. Alguien tiene que abrir la página e imprimirla.