The main dashboard shows the total portfolio summary at the top with aggregate statistics across all services, followed by individual service cards. Each service card displays position counts, cost, value, current P&L, and closed P&L.
Key elements: - Total Portfolio summary with position counts, cost, value, current P&L, and closed P&L - Current P&L Breakdown showing taxable vs non-taxable - Closed P&L Breakdown showing taxable vs non-taxable - Collapsible Closed P&L Chart - Service cards with individual metrics and “Add Service” button
The service detail view shows the trade entry form at the top and position cards below. The toggle switches between Open and Closed positions. Position cards show symbol, spread type, cost, value,
Expanding a service shows all positions grouped by Open and Closed status. Each position shows the symbol, leg count, cost basis, current value/mark, and P&L.
Key elements: - Service summary statistics - Add Trade form with Thinkorswim paste input - Position number selector (existing or new) - Trade date picker - Open/Closed Positions toggle - Position cards in a responsive grid
Clicking a position card expands it to show full details including trade history, mark-to-market section, and action buttons. The taxable
Clicking a position expands it to show individual legs with detailed trade history, add trade functionality, mark-to-market controls, and Schwab account integration.
Key elements: - Close/Delete buttons for position management - Taxable checkbox for tax tracking - Mark-to-Market section with current mark and set mark button - Net Position showing current leg quantities - Individual trade cards with full details (action, legs, strikes, expirations, price)
The closed positions view shows positions that have been closed, with “Days Held” instead of DTE. Expanded positions show the full trade
The Closed section shows positions that have been fully closed out, with realized P&L and tax status tracking.
Key elements: - Closed Positions toggle selected - Position cards showing closed status - Opened/Closed dates displayed - Days Held metric (instead of DTE) - Reopen/Delete buttons for closed positions - Full trade history in expanded view
The settings panel handles Google account authentication and cloud sync. Data can be synced to Google Sheets for backup and cross-device
The Settings dialog provides Google Sheets sync configuration, Schwab integration management, and data import/export functionality.
Key elements: - Google Account sign in/out - Cloud Sync toggle with spreadsheet name and last sync time - Sync Now and Refresh from Cloud buttons - Direct link to open spreadsheet in Google Sheets - Export/Import for local data backup
A "Service" represents a trading advisory or strategy you're following (e.g., "Alpha Picks", "My Strategy"). Each service contains its own portfolio of positions.
The main dashboard shows:
The easiest way to add trades is to copy the trade string from Thinkorswim:
The app parses trade strings in this format:
BUY +2 VERTICAL SPY 100 17 JAN 25 600/605 CALL @2.50Components:
BUY or SELL - Action+2 - Quantity (positive for buy, negative for sell)VERTICAL - Spread typeSPY - Underlying symbol100 - Multiplier (100 for standard options)17 JAN 25 - Expiration date600/605 - Strike pricesCALL - Option type@2.50 - Price per contractYou can optionally sync your data to Google Sheets for backup and cross-device access.
Connect your Schwab account to automatically fetch real-time Net Liquidation values for your positions. This helps you track the current market value without manually entering marks.
By default, accounts show as "MARGIN ****1234". You can set friendly nicknames:
The app automatically handles these symbol variations:
| Your Position | Schwab Returns | Status |
|---|---|---|
| SPX | $SPX | ✓ Auto-matched |
| SPXW | SPX | ✓ Auto-matched |
| RUTW | RUT | ✓ Auto-matched |
| NDXW / NDXP | NDX | ✓ Auto-matched |
This is a client-side web application - all processing happens in your browser:
┌─────────────────────────────────────────────────────────────────┐
│ YOUR BROWSER │
│ ┌─────────────┐ ┌──────────────┐ ┌────────────┐ │
│ │ React App │ │ localStorage │ │ OAuth │ │
│ │ (all logic) │←→│ (JSON data) │ │ Tokens │ │
│ └─────────────┘ └──────────────┘ └─────┬──────┘ │
└───────────────────────────────────────────┼─────────────────────┘
↑ │
│ static files │ API calls
↓ ↓
┌─────────────┐ ┌───────────────────────┐
│ Vercel │ │ Google Sheets API │
│ (host) │ │ Schwab Trader API │
└─────────────┘ └───────────────────────┘By default, your data is stored in your browser's localStorage:
When you could lose data:
The Schwab integration is designed with security as a top priority. Here's how it works and why your data is safe.
The app uses OAuth 2.0 with PKCE (Proof Key for Code Exchange), the industry standard for secure authentication:
| Feature | Benefit |
|---|---|
| OAuth 2.0 + PKCE | Your Schwab password is never seen or stored by the app |
| Read-Only Access | The app can only VIEW your positions, never place trades or move money |
| Token Stored Locally | Your access token stays in your browser, not on our servers |
| Serverless Token Exchange | API credentials are kept secure on the server, never exposed to browsers |
| Revocable Access | You can disconnect at any time via Settings or your Schwab account |
| No Data Storage | Position data is fetched on-demand and cached temporarily in your browser only |
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Browser │ │ Vercel Server │ │ Schwab API │
│ (Frontend) │ │ (Serverless) │ │ (External) │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
│ │ │
│ 1. Click Sign In │ │
│───────────────────────────────────────────────▶│
│ │ Redirect to Schwab │
│ │ │
│ 2. User logs in & approves │
│◀───────────────────────────────────────────────│
│ Redirect with auth code │
│ │ │
│ 3. Send auth code │ │
│───────────────────────▶│ │
│ │ 4. Exchange for tokens │
│ │───────────────────────▶│
│ │◀───────────────────────│
│ 5. Return tokens │ Access + Refresh │
│◀───────────────────────│ │
│ │ │
│ 6. Fetch positions (with token) │
│───────────────────────────────────────────────▶│
│◀───────────────────────────────────────────────│
│ Position data │
Key Point: The Schwab API credentials (Client ID and Secret) are stored securely on the Vercel server as environment variables. They are NEVER sent to or accessible from your browser. The browser only receives temporary access tokens after you authenticate.
For positions not linked to Schwab, you can manually set a "mark" (current market value):
Your data is stored locally in your browser. To ensure you don't lose it:
Options Trade Tracker v1.14 · Privacy Policy