02 / 2026 · DESIGN + BUILD
CalenTrade
Browser-only trading journal with IndexedDB storage, Excel-aligned risk sizing, equity and P&L analytics, bar-by-bar backtest replay with Binance OHLC, paper long/short, and JSON/CSV backups—no accounts or server-side ledger.
The problem
Retail traders who journal in spreadsheets get weak feedback loops: P&L summaries, win rate, and risk math live in separate files, and replaying history bar by bar means exporting charts or paying for a full platform. I wanted a local-first lab that feels like a lightweight TraderSync—record closed trades with tags and notes, see whether the account curve matches discipline, size the next idea with the same formulas as my Excel risk sheet, and rehearse entries on real OHLC without cheating by seeing future bars. Shipping that without a backend keeps hosting cheap and privacy simple, but it forces careful client architecture (IndexedDB schema, import/export, and chart performance).
What I built
CalenTrade is a Next.js app with a public landing and an in-browser workspace at /dashboard, /journal, /risk, /backtest, /fractalidad, and /settings. Real trades are CRUD’d in Dexie with symbols, sides, entry/exit/stop, fees, tags, and notes; P&L is derived when exits exist. The dashboard aggregates win rate, total P&L, an equity line from starting balance in settings, a daily P&L histogram, and a month calendar heatmap.
The risk calculator mirrors the reference Excel workbook: risk money from account size and percent, per-unit stop distance, suggested quantity, and notional—covered by Vitest in lib/risk/calculate.test.ts. Settings exports versioned JSON (trades, paper sessions, settings) and imports v1/v2 backups, plus journal and paper CSV downloads.
Backtest loads candles via an internal /api/klines proxy to Binance (crypto and USDT proxies for FX/gold labels), supports 15m–1D intervals, and runs a replay engine: slider, step, play/pause, and speed. The chart only renders bars up to the cursor. Paper trading opens long/short at the visible bar close with optional SL/TP (same-bar touch assumes SL first); paper trades stay separate from the live journal. Sessions can be saved, loaded, and exchanged as JSON; CSV-backed symbols embed OHLC in snapshots.
Fractalidad is a multi-timeframe grid (15m, 1h, 4h, 1D) of synchronized Lightweight Charts for the same symbol—useful for structure context without leaving the app. The landing reserves space for a future AI coach; analytics today are entirely deterministic from stored trades.
Source: github.com/Cartagena2001/calen-trade
Technical choices
- Next.js 16 App Router —
(marketing)vs(app)route groups, shared app shell with navigation, and a single Route Handler for klines to avoid CORS and hide upstream URLs from the client. - Dexie + typed trade models — separate tables for real trades, backtest sessions, paper trades, and named paper snapshots; export payload versioning for safe restores.
- TradingView Lightweight Charts v5 — equity line, daily histogram, candlestick replay with no future leakage, and the fractal multi-chart layout.
- Tailwind CSS 4 — dark violet-accent UI consistent across journal forms, tables, and dense trading controls.
- Zod — validation at boundaries for imports and forms where schemas matter.
- Vitest — regression tests on risk math so UI refactors cannot drift from the Excel reference.
What I'd do differently
I'd add optional cloud sync or end-to-end encrypted backup instead of manual JSON only, and tighten broker-grade disclaimers on Binance proxies vs spot FX. A dedicated worker for large 15m history downloads would keep the fractal grid smoother on low-end devices. Filling the AI coach slot would need clear guardrails so insights stay explainable from the user’s own trade stats.
Outcome
A personal portfolio project that demonstrates product-shaped trading UX on a zero-ledger stack: disciplined journaling, visual analytics, spreadsheet-faithful risk, and honest historical replay. It is open source for anyone who wants a private practice journal or a reference for client-side market replay patterns.
SCREENSHOTS