A professional-grade financial dashboard built with React. Features a live AI assistant powered by Claude (Anthropic), interactive price charts, portfolio tracking, price alerts, and a news feed.
Built as a portfolio project to demonstrate frontend engineering with React, Canvas API, and LLM integration.
| Page | What it does |
|---|---|
| Dashboard | Portfolio KPIs, performance chart, top gainers/losers, market news |
| Markets | Filterable stock list with sector breakdown, detailed chart + analyst ratings |
| Portfolio | Holdings table with per-position P&L and sector allocation bars |
| AI Assistant | Claude-powered chat — ask anything about stocks, technicals, or fundamentals. Upload chart screenshots for visual analysis |
| Alerts | Create price-based SMS alerts (Twilio integration ready) |
| News Feed | Filterable market news with article detail view |
src/
├── App.jsx # Root — layout shell + page routing
├── theme.js # Design tokens (colors, fonts)
│
├── data/
│ └── index.js # Static mock data (stocks, portfolio, news)
│
├── utils/
│ └── index.js # Formatters, RNG, price generator, message classifier
│
├── components/
│ ├── ui.jsx # Atoms: Tag, Card, Pill, Toggle, StatCard
│ ├── Charts.jsx # Spark (SVG sparkline) + PriceChart (Canvas)
│ ├── Sidebar.jsx # Left nav with live market clock
│ └── Topbar.jsx # Sticky header with index tickers
│
└── pages/
├── Dashboard.jsx # Overview / home page
├── Markets.jsx # Stock detail + chart
├── Portfolio.jsx # Holdings breakdown
├── Assistant.jsx # Claude AI chatbot
├── Alerts.jsx # SMS price alerts
└── News.jsx # Market news feed
- Node.js 18+
- An Anthropic API key (for the AI assistant)
# 1. Clone the repo
git clone https://github.com/your-username/tradesense.git
cd tradesense
# 2. Install dependencies
npm install
# 3. Add your Anthropic API key
# Create a .env file in the project root:
echo "VITE_ANTHROPIC_API_KEY=sk-ant-..." > .env
# 4. Start the dev server
npm run devNote: In a production setup the API key should live in a backend proxy, not the browser. The current implementation calls the Anthropic API directly, which is fine for demos and local development.
- React 18 — UI framework
- Canvas API — Price chart rendering (no chart library dependency)
- SVG — Sparklines
- Anthropic Claude API — AI assistant + image analysis
- Vite — Build tool
All design tokens live in src/theme.js — a single object T with:
- 7 background levels for layered dark surfaces
- 5 accent colors (green, blue, red, amber, purple) with dim variants
- 4 text shades from bright to muted
- 3 font stacks: display (DM Serif), sans (DM Sans), mono (JetBrains Mono)
Add a real stock data source:
Replace the STOCKS array in src/data/index.js with an API call (e.g. Alpha Vantage, Polygon.io, Yahoo Finance).
Enable Twilio SMS:
The Alerts page UI is complete. Wire up a serverless function (e.g. Vercel Edge Function) that accepts { phone, message } and calls the Twilio REST API.
Add authentication:
Wrap App.jsx with a simple auth context and protect routes.
MIT