Technology Stack
Next.js, TradingView Charting Library, TypeScript, Tailwind CSS, shadcn/ui, Zustand, React Query, Vercel
Overview
Duration: 2/2025
A trading dashboard that pairs professional-grade charting with portfolio tracking in one interface. Traders monitor open positions, realised and unrealised P&L, and the instruments they are watching, without switching between a charting tool and a spreadsheet.
The interesting constraint in this kind of product is not the features, it is the update rate. A dashboard showing a dozen instruments with live prices, each feeding P&L calculations and a chart, will re-render itself into unusability if the state layer is naive. Most of the engineering here is in making sure it does not.
Charting Integration
The application embeds the TradingView Charting Library, which gives traders the toolset they already know rather than a simplified in-house chart they have to learn:
- Multiple timeframes — 1m, 5m, 15m, 1h, 4h, 1D, 1W
- The full indicator and drawing toolset, over 100 indicators plus annotation tools
- Chart type switching — candlestick, line, bar — with customisable layouts
- Live data streaming into the chart for accurate intraday price action
- Custom studies for instrument-specific analysis
Integrating this library properly is most of the work: it expects a datafeed conforming to its own interface, so the application implements that adapter over the market data source, including symbol resolution, historical bar requests, and subscription management for real-time updates.
Portfolio Features
- Live portfolio valuation — positions revalued as prices move, with the total updating in place
- Position management — open and closed positions with detailed P&L, entry, and exit
- Performance analytics — portfolio growth over time, allocation breakdown, and risk exposure
- Watchlists — multiple lists for different strategies or market segments
- Trade history with filtering across instrument, period, and outcome
Technical Implementation
- React Query for the server state — deduplicated requests, background refetching, and cache invalidation that keeps quotes fresh without hammering the data source on every render
- Zustand for client state — watchlist selection, layout, and UI state held outside the query cache, so a chart interaction does not invalidate market data
- Selective subscriptions — components subscribe to the specific slices they display, so a price tick updates the row that changed rather than re-rendering the table
- Code splitting around the charting library, which is by far the heaviest dependency and is not needed until a chart is actually shown
- Server-side rendering for the static shell so the dashboard paints before the data layer connects
- TypeScript throughout, including the datafeed adapter, where a mismatched bar shape is otherwise an entirely silent failure
- Structured error handling around the feed, so a dropped connection degrades to stale-with-indicator rather than a blank dashboard
This project demonstrates integrating a demanding third-party library on its own terms, and building a real-time data layer that stays smooth under continuous updates — the part of financial UI work that is invisible when it is done right and immediately obvious when it is not.