Skip to content

tmaximini/picofolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

30 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“ˆ Picofolio

A minimal portfolio tracker and trading journal.

It combines a trading journal ๐Ÿ““ and a long-term portfolio overview ๐Ÿช™ into one calm, keyboard-first tool. Local-first: your data and your broker credentials never leave your browser. ๐Ÿ”’ Connects directly to your Interactive Brokers to import positions and trades.

Picofolio โ€” portfolio overview


โœจ Features

  • ๐Ÿ—‚๏ธ Multi-account โ€” built for the realistic IBKR setup of one trading account + N long-term accounts. A top-level switcher scopes every view; each account has its own color, cash, contributions, and sync. Full account CRUD.
  • ๐Ÿ”Œ IBKR import (BYOK) โ€” connect via an IBKR Flex Query token + Query ID (yours, stored locally). Imports positions, cash, and trade fills, coalescing executions into trades and computing realized P&L from your actual fills.
  • ๐Ÿงฎ Options pricing (BYOK) โ€” open option positions are marked to market via a free MarketData.app token (also yours, stored locally) โ€” a live mark plus a price-history chart. Closed option trades use your IBKR fills, never an external call. The app is fully functional with no token; option charts simply show a calm "add a token" hint.
  • ๐Ÿท๏ธ Custom tickers โ€” add any holding or trade manually by ticker symbol (no broker required), priced live via the public equity feed, with an inline TradingView chart link.
  • ๐Ÿ““ Trading journal โ€” weekly absolute P&L (rolling bars), a calendar of realized P&L, a sortable trade table with setups/tags, and per-trade charts (intraday + daily).
  • ๐Ÿ“Š Holdings โ€” combined, sortable table with day/unrealized deltas and expandable per-position price charts.
  • โŒจ๏ธ Keyboard-first โ€” โŒ˜K command palette (fuzzy search across symbols, accounts, actions), g-prefix navigation, and single-key shortcuts throughout.

Everything persists locally (browser storage today); no account, no server, no telemetry. ๐Ÿ™…

๐Ÿ“ธ Screenshots

Overview โ€” combined value, deltas, allocation Holdings โ€” sortable table + expandable charts
Overview Holdings
Trading journal โ€” weekly P&L + trade table Calendar โ€” realized P&L by day
Trading journal Calendar

๐Ÿ’ก No screenshots yet? Run pnpm dev โ€” the app ships with demo data, so every view is alive on first launch.

๐Ÿ”’ Local-first โ€” your data never leaves your browser

Picofolio has no backend, no account, and no telemetry. Everything โ€” your positions, trades, journal entries, account setup, and broker credentials โ€” lives entirely in your own browser's local storage. There is no Picofolio server to send it to, and nothing is ever phoned home.

The only network calls the app makes are the ones you trigger to your data sources: IBKR (with your Flex token), MarketData.app (with your token), and the public equity price feed. Each request goes straight to that service and nowhere else. Tokens are sent only to the service they belong to.

That's the whole point of the local-first design: no server means no incentive to monetize your data, and no data liability means there's nothing to breach. Your portfolio is yours alone. ๐Ÿ™Œ

๐Ÿ”‘ Bring-your-own-key, by design

Picofolio talks to two external services, and you supply the credentials for both:

Data Source Token Required?
Positions, cash, trade fills, realized P&L IBKR Flex Query Flex token + Query ID For broker sync (manual entry works without it)
Equity prices & history Public market feed โ€” No
Open-option live mark & history MarketData.app Free API token Only for live option marking

Tokens are stored locally and sent only to the service they belong to. Add them in Settings. (Secrets currently live in browser local storage โ€” fine for local use; see Planned for hardening.)

๐Ÿงฑ Stack

  • โš›๏ธ React 19 + TypeScript (strict), Vite
  • ๐Ÿป Zustand for state + local persistence
  • ๐Ÿ“‰ lightweight-charts for price/value charts
  • ๐Ÿงญ react-router, lucide-react (icons)
  • ๐ŸŽจ Hand-written CSS driven by design tokens โ€” no component library (shadcn/Material/etc.). Custom components are the whole point.

Today Picofolio runs as a local-first web app via Vite; external calls (IBKR, MarketData.app, equity prices) go through the Vite dev proxy.

๐Ÿš€ Getting started

pnpm install
pnpm dev          # http://localhost:5173

Other scripts:

pnpm build        # tsc -b && vite build
pnpm typecheck    # tsc -b --noEmit
pnpm preview      # preview the production build

The app ships with demo data so the UI is alive immediately. To use real data, open Settings and add an IBKR Flex connection (and, optionally, a MarketData.app token for live option pricing).

๐Ÿ”Œ Getting the tokens

  • IBKR Flex Query โ€” in IBKR Client Portal: Performance & Reports โ†’ Flex Queries. Create an Activity/Positions query, then generate a Flex Web Service token. You'll paste the token + the Query ID into Settings.
  • MarketData.app โ€” sign up at marketdata.app (free tier, no card) and paste the token into Settings โ†’ Options pricing. Optional.

โŒจ๏ธ Keyboard shortcuts

Key Action
โŒ˜K / Ctrl K Command palette
n New trade
g o Overview
g a Activity (journal)
g c Calendar
g h Holdings
g s Settings

๐ŸŽจ Design system

๐ŸŽฏ Design north stars: Fey (aesthetic), Linear (keyboard-first speed), Raycast (command palette), Bloomberg (numeric density). The bias is always toward restraint โ€” darker, calmer, more typographic.

The design system is the heart of the project. Single source of truth: src/styles/tokens.css and src/styles/primitives.css. A static reference page lives at docs/showcase.html โ€” open it in a browser to see the tokens composed into the actual UI.

The full design & engineering contract is in AGENTS.md: color and typography rules, the chiaroscuro lighting approach, motion/easing, density philosophy, and the product scope.

๐Ÿ”ญ Planned

Not yet implemented โ€” on the radar, roughly in priority order:

  • ๐Ÿ–ฅ๏ธ Desktop packaging (Tauri) โ€” ship Picofolio as a native desktop app. The external calls (IBKR, MarketData.app, equity prices) would move from the Vite dev proxy to typed Rust commands, and secrets would move from browser local storage to the OS keychain. Deprioritized for now; the web app is the supported way to run today.

๐Ÿ—บ๏ธ Roadmap notes

  • TradingView Advanced Charts โ€” embedded charts currently use the free TradingView widget, which renders all same-type moving averages in one color (no per-MA styling via URL/config). Per-MA colors require TradingView's licensed, self-hosted Charting Library (createStudy(..., { "plot.color": ... })). Access is free but approval-gated and needs a public, working deployment to point at โ€” so once we have a hosted version online, apply for the Advanced Charts license and wire in a datafeed adapter (our existing price feed). Until then, colored MAs would live on our own lightweight-charts chart.

๐Ÿค Contributing

Issues and PRs welcome! Before contributing UI, read AGENTS.md โ€” it defines the bar (tokens-only, tabular numerics, custom components, designed error states). Code conventions: TypeScript strict (no any), functional components, money stored as integer cents, dates as ISO-8601 UTC.

๐Ÿ“„ License

MIT. Use, modify, and distribute freely. ยฉ 2026 Thomas Maximini.

About

A minimal portfolio tracker and trading journal.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors