A simple, clean trading tracker for logging and analyzing your TradingView trades.
- Track long and short positions
- Automatic P&L calculations
- Real-time statistics dashboard
- Trade history with detailed view
- Win rate and performance metrics
- Add trades with entry/exit prices, stop loss, and take profit
- Notes for trade strategy
- Navigate to the project directory:
cd tradingview-tracker- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
The dashboard displays:
- Total Profit & Loss
- Win Rate (percentage and W/L ratio)
- Total Trades (open and closed)
- Average Win/Loss
- Largest Win/Loss
Click the "+ Add Trade" button to log a new trade:
-
Required Fields:
- Symbol (e.g., AAPL, TSLA)
- Type (Long or Short)
- Entry Price
- Quantity
- Entry Date
- Status (Open or Closed)
-
Optional Fields:
- Exit Price (required if closed)
- Exit Date (required if closed)
- Stop Loss
- Take Profit
- Notes
View all your trades in a detailed table showing:
- Symbol
- Position type (Long/Short)
- Entry and exit prices
- Quantity
- Profit & Loss ($ and %)
- Trade status
- Framework: Next.js 16
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI: React 19
The app comes with 5 sample trades to help you get started:
- Mix of long and short positions
- Both winning and losing trades
- Open and closed positions
- Long: (Exit Price - Entry Price) × Quantity
- Short: (Entry Price - Exit Price) × Quantity
- Win Rate: (Winning Trades / Total Closed Trades) × 100
- Average Win: Total Profit from Wins / Number of Wins
- Average Loss: Total Loss from Losses / Number of Losses
- Data persistence (localStorage or database)
- Export trades to CSV
- Advanced filtering and sorting
- Chart visualizations
- Trade journal with screenshots
- Risk/reward ratio tracking
- Multiple account support
- Import trades from CSV
tradingview-tracker/
├── app/
│ ├── page.tsx # Main dashboard page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/
│ ├── StatCard.tsx # Statistics card component
│ └── TradeList.tsx # Trade history table
├── lib/
│ ├── tradeCalculations.ts # P&L and stats calculations
│ └── sampleTrades.ts # Sample data
└── types/
└── index.ts # TypeScript type definitions
MIT