TradingView Gratis 📈
Una alternativa open-source y 100% gratis a TradingView Pro, pensada para LATAM.
Velas en vivo, indicadores propios, watchlist, multi-timeframe — sin pagar USD, sin login, sin ads.
Plataforma de charts crypto construida sobre los datos públicos de Binance (WebSocket) y la misma librería de render que usa TradingView (lightweight-charts).
✨ Features
- 📊 Velas en vivo vía WebSocket de Binance (sin API key)
- 🔍 Búsqueda de símbolo sobre todos los pares USDT del exchange
- ⏱️ Multi-timeframe: 1m / 5m / 15m / 1h / 4h / 1d / 1w
- 📐 Indicadores client-side: EMA 20/50/200, RSI 14, MACD 12/26/9, Volumen
- 👁️ Watchlist con precios y cambio 24h actualizándose en tiempo real
- 🎨 Visual idéntica a TradingView (paleta, fuentes, layout)
- 💾 Persistencia en localStorage (símbolo, timeframe, indicadores)
- 🔌 Reconexión robusta del WebSocket con backoff exponencial
- 🌐 100% client-side — deploy estático en Vercel/Cloudflare
🚀 Empezar
npm install
npm run dev
Abrí http://localhost:3000.
🛠️ Stack
| Capa | Tech |
|---|
| Framework | Next.js 16 (App Router) |
| Lenguaje | TypeScript |
| Estilos | Tailwind CSS 4 + shadcn/ui |
| Charts | lightweight-charts v5 |
| Estado | Zustand (con persistencia) |
| Iconos | lucide-react |
| Datos | Binance Public REST + WebSocket |
📐 Arquitectura
src/
├── app/
│ ├── layout.tsx # Root, fuente Inter, TooltipProvider, dark
│ ├── page.tsx # Dashboard armando el layout
│ └── globals.css # Paleta TradingView
├── components/
│ ├── chart/
│ │ ├── PriceChart.tsx # Chart core (lightweight-charts + panes)
│ │ ├── SymbolSelector.tsx # Búsqueda de pares USDT
│ │ ├── TimeframeSelector.tsx
│ │ └── IndicatorMenu.tsx # Toggle EMA/RSI/MACD/Volume
│ ├── layout/
│ │ ├── Header.tsx
│ │ ├── LeftSidebar.tsx # Iconos drawing tools (visual)
│ │ ├── RightSidebar.tsx
│ │ └── BottomPanel.tsx # Stats 24h
│ ├── watchlist/
│ │ └── Watchlist.tsx # Precios live multi-símbolo
│ └── ui/ # shadcn primitives
└── lib/
├── binance/
│ ├── rest.ts # klines / ticker / exchangeInfo
│ ├── ws.ts # WS multiplex + auto-reconnect
│ └── types.ts
├── indicators/
│ └── index.ts # SMA, EMA, RSI (Wilder), MACD
├── store/
│ └── chart-store.ts # Zustand global state
└── format.ts # formatPrice / formatPct / formatVolume
🌐 Deploy a Vercel
npm i -g vercel
vercel
O conectá el repo en vercel.com/new y deploy automático. No hay variables de entorno — todo es cliente.
🧠 Cómo funciona
Datos históricos
Al abrir un símbolo se hace un GET /api/v3/klines (REST) que trae las últimas 1000 velas del par + timeframe activo. Se renderizan instantáneamente.
Datos en vivo
Una única conexión WebSocket multiplexada (stream.binance.com) recibe:
<symbol>@kline_<interval> → updates de la vela actual + cierre de velas<symbol>@miniTicker → tickers del watchlist
Al reconectarse (Binance corta el WS cada 24h) se vuelven a suscribir todos los streams activos con backoff exponencial.
Indicadores
Se calculan client-side sobre el array de velas en cada update. Implementaciones puras de TypeScript:
EMA: seeded con SMA del primer período, luego close * k + prev * (1-k)RSI: Wilder (suavizado exponencial sobre ganancias/pérdidas, período 14)MACD: EMA(12) − EMA(26), signal = EMA(9) sobre MACD line
Para 1000 velas y panes múltiples el costo es despreciable.
⚠️ Qué NO incluye (todavía)
- ❌ Pine Script (propietario de TradingView, no se puede clonar)
- ❌ Drawing tools persistentes (Fibo, trend lines arrastrables)
- ❌ Replay bar-by-bar
- ❌ Alertas server-side (siguiente video de la serie)
- ❌ Trading real (bot con API privada — video 4)
📺 Serie de videos
Este repo es la base de la serie "TradingView Gratis":
- ✅ Video 1 — Base: lo que ves acá
- 🔜 Video 2 — Alertas: Supabase + Telegram bot
- 🔜 Video 3 — Indicadores AI: SuperTrend, Ichimoku, custom con Claude
- 🔜 Video 4 — Bot que opera: API privada Binance + ejecución
📄 Licencia
MIT — usalo, forkealo, monetizalo, lo que quieras.
lightweight-charts es Apache 2.0 con atribución a TradingView — la atribución vive en el footer/UI por requerimiento de la licencia.
