Loading
ENPT
Imagem principal do projeto TradeView

React · Data Visualization

TradeView

Year

2025

Role

Product Designer & Front-end

Duration

Personal project

Team

Solo

Tools

Next.js · Lightweight Charts · Tailwind CSS · Vercel

View Project

Live Demo
The problem

Trading interfaces pack dense real-time data; the challenge was making them readable without losing depth.

My role

Product Designer & Front-end, solo, from design to Next.js implementation.

The outcome

A working platform with live order book, candlestick, depth chart, watchlist, alerts and interactive onboarding.

Overview

Simulated Brazilian stock trading platform built with Next.js and Lightweight Charts (TradingView). Includes live order book, candlestick chart, depth chart, watchlist, order panel, portfolio management, price alerts and trade history — with simulated data and interactive onboarding.

The design challenge

The challenge here is not to make it pretty, it is to tame density. Lots of data changing every second for a user who needs to decide fast and, above all, trust what they see. Every decision of hierarchy, color and motion carries weight: a misplaced number becomes a costly mistake.

The goal was to build a functional product from scratch, from login to chart, to prove practical mastery over complex data visualization components in the React ecosystem.

Main screen: candlestick chart in the center, watchlist on the left and buy/sell panel on the right.
Main screen: candlestick chart in the center, watchlist on the left and buy/sell panel on the right.

Technical stack

Lightweight Charts (TradingView) for candlestick and depth chartOrder book simulator with real-time updatesNext.js App Router + Tailwind CSSInteractive onboarding with guided tourDark/light theme toggle

The technical core is the integration with Lightweight Charts, TradingViews financial charting library. The candlestick consumes simulated OHLCV data in real time and the depth chart renders accumulated market depth. The order book simulator generates order flow with dynamic spread and keeps every component in sync.

  • Candlestick and depth chart with Lightweight Charts
  • Simulated order book with dynamic real-time spread
  • Portfolio with positions, P&L and available balance
  • Configurable price alerts per asset
  • Step-by-step interactive onboarding
Order book detail: real-time bid and ask with dynamic spread.
Order book detail: real-time bid and ask with dynamic spread.
Portfolio: positions with average price, current value and P&L per asset.
Portfolio: positions with average price, current value and P&L per asset.

Mobile version

The same product adapted to the phone: the dense layout becomes a vertical stack, keeping chart, order book, account, buy/sell panel and portfolio reachable with the thumb.

Quote, chart, depth and order book.
Quote, chart, depth and order book.
Account, buy/sell panel and alerts.
Account, buy/sell panel and alerts.
Portfolio, trades and order history.
Portfolio, trades and order history.

Design System

TradeView is dark-first by nature: the dark background reduces fatigue in long sessions and makes the data pop. Color carries meaning and is never decorative, green for up and red for down. Typography mixes a neutral sans for the interface with tabular, monospaced numbers for prices and volumes, ensuring alignment and fast reading.

Tokens and palette: up green, down red and a dark-first gray scale.
Tokens and palette: up green, down red and a dark-first gray scale.
Components: buttons, quote cards, order book, buy/sell panel and change badges.
Components: buttons, quote cards, order book, buy/sell panel and change badges.

What this project shows

More than screens, TradeView shows the ability to take a dense experience from concept to a live product: interface design, component architecture and data visualization library integration, all built by me.

PreviousMeu SUS Digital
Back to Projects
NextDrop