How jparisio/knot works
Knot is a real-time market dashboard with watchlists, tick charts, paper trading, and Canadian TFSA room tracking. Users follow symbols, add instruments through search, and view live or simulated prices; trades update separate TFSA and Non-Registered accounts, with excess TFSA purchases optionally routed to Non-Registered. The dashboard shares one socket connection, while portfolio state persists in browser localStorage. The README documents the relay’s reconnect and simulation behavior; sampled server excerpts support its subscription and tick dispatch, but do not show every implementation detail.
Main entry points: page.tsx Dashboard · server.ts Socket relay · usePortfolio.ts Portfolio state · SocketContext.tsx Socket context
Components 19
Dashboard UI
- Dashboard
src/app/dashboard/page.tsx - Client providers
src/components/providers/ClientProviders.tsx - Watchlist
src/app/dashboard/page.tsx - Market view
src/app/dashboard/page.tsx - Tick chart
src/components/charts/TickChart.tsx - Trading panel
src/components/portfolio/TradingPanel.tsx - Portfolio view
src/components/portfolio/PortfolioView.tsx
Market data
- Socket context
src/lib/SocketContext.tsx - Tick hook
src/hooks/useTicks.ts - Socket relay
socket-server/server.ts - Price simulation
socket-server/server.ts - Finnhub feed
Portfolio
- Portfolio state
src/hooks/usePortfolio.ts - Portfolio model
src/types/portfolio.ts - Browser storage
Symbol search
- Search form
src/app/dashboard/page.tsx - Search API
src/app/api/search/route.ts - Finnhub search
Other components
- Investor
Connections 26
- Investor → Dashboard: uses
- Client providers → Socket context: provides
- Dashboard → Client providers: renders within
- Dashboard → Watchlist: renders
- Dashboard → Market view: renders
- Dashboard → Trading panel: renders
- Dashboard → Portfolio view: renders
- Market view → Tick hook: reads ticks
- Watchlist → Tick hook: reads ticks
- Portfolio view → Tick hook: reads prices
- Market view → Tick chart: passes ticks
- Tick hook → Socket context: subscribes and reads
- Socket context → Socket relay: sends subscriptions
- Socket relay → Socket context: dispatches ticks
- Finnhub feed → Socket relay: streams trades
- Socket relay → Price simulation: starts fallback
- Price simulation → Socket relay: emits simulated ticks
- Dashboard → Portfolio state: uses state
- Trading panel → Portfolio state: executes trades
- Portfolio view → Portfolio state: reads and updates
- Portfolio state → Browser storage: loads and saves
- Portfolio state → Portfolio model: uses model
- Search form → Search API: requests matches
- Search API → Finnhub search: queries
- Search API → Search form: returns matches
- Search form → Dashboard: adds symbol