CASO DE ESTUDIO · FRONTEND
Monitor de criptomonedas
Un panel cripto rápido y privado con precios en vivo, gráficos de velas, P&L de cartera y alertas de precio en todos los exchanges.
- ROL
- Desarrollador frontend
- DURACIÓN
- 6 semanas
- EQUIPO
- En solitario
- PLATAFORMA
- App web
IDENTIDAD DE PRODUCTO
ledgr
Sigue cada moneda. No te pierdas nada.
01 · RESUMEN
Resumen del proyecto
TIEMPO DE DESARROLLO
6 semanas
De la prueba de concepto a la beta pública
TAMAÑO DEL EQUIPO
En solitario
Diseño y frontend
LOGRO CLAVE
+2.400 activos
En streaming a 60 fps
EL PROBLEMA
La mayoría de trackers cripto son lentos, están llenos de anuncios y piden tus claves del exchange. Los precios van con retraso, los gráficos se atascan y los totales de cartera rara vez cuadran con el exchange.
EL ENFOQUE
Ledgr recibe los precios directamente de los WebSockets de los exchanges en un almacén en memoria, agrupa las actualizaciones en un render por frame y calcula el P&L en local, así que ninguna clave sale del navegador.
60 fps
en los gráficos con ticks en vivo
< 50 ms
de latencia del tick a la pantalla
0
claves de API guardadas en un servidor
02 · FUNCIONALIDADES
Qué hace
Precios en vivo
Feeds por WebSocket de los principales exchanges, actualizados en cada tick.
Gráficos de velas
Velas de 1H a 1A con volumen, zoom y cursor en cruz.
P&L de cartera
Ganancias realizadas y latentes calculadas en el navegador.
Alertas de precio
Avisos por precio, variación porcentual o picos de volumen.
Listas de seguimiento
Agrupa monedas y ordénalas por variación, volumen o capitalización.
Importar del exchange
Importación CSV de solo lectura desde Coinbase, Binance y Kraken.
03 · PROCESO
Cómo se hizo
SEMANA 1
Descubrir
Comparé cinco trackers en latencia, precisión y privacidad.
- Informe comparativo
- Fuentes de datos
SEMANA 2
Diseñar
Diseño tipo terminal, estados de los gráficos y flujos de alertas.
- Prototipo en Figma
- Estilos numéricos
SEMANA 3–5
Construir
Capa de sockets, renderizado de gráficos, motor de cartera y alertas.
- App web
- Almacén de streams
SEMANA 6
Lanzar
Beta pública en Vercel con monitorización de errores y rendimiento.
- Beta pública
- Presupuesto de rendimiento
04 · STACK TÉCNICO
Tecnologías
FRONTEND
- TypeScript
- React
- Zustand
GRÁFICOS
- Chart.js
- Financial plugin
- Canvas
DATOS
- WebSocket feeds
- CoinGecko API
- IndexedDB
HERRAMIENTAS
- Vite
- Vercel
- Vitest
ARQUITECTURA
App web Ledgr
React + Zustand
Almacén de streams
Batching + motor de P&L
Sockets de exchanges
Ticks en vivo
CoinGecko API
Metadatos, histórico
IndexedDB
Cartera, alertas
05 · APRENDIZAJES
Retos y aprendizajes
Miles de ticks por segundo
RETO
Renderizar cada cambio de precio congelaba la interfaz en mercados volátiles.
RESULTADO
Agrupar los ticks en una actualización del almacén por frame mantuvo la interfaz fluida.
Claves privadas
RETO
Nadie confiaría en un tracker que guarda las claves de API del exchange.
RESULTADO
La importación CSV de solo lectura y el P&L en el navegador hicieron que ni claves ni saldos llegaran nunca a un servidor.
¿Te interesa este proyecto?
Te enseño encantado el código, las decisiones que hay detrás o cómo podría funcionar algo parecido para tu equipo.