FULL STACK

Portfolio Tracker

Real-time portfolio dashboard for stocks and cryptocurrencies: FIFO P/L, Supabase auth and data, TwelveData and CoinGecko pricing, charts and privacy mode.

5 min readView on GitHub

Motivation

I wanted a single place to watch stocks and crypto with honest P/L, not just live prices. That meant modeling transactions properly (FIFO), respecting auth and data isolation, and staying resilient when market APIs rate-limit or fail.

Overview

A portfolio tracker for stocks and cryptocurrencies. Users add, edit, and delete buy and sell transactions; profit and loss use FIFO (first in, first out) cost basis. The app includes performance and allocation charts, periodic price refresh with 24h change, a privacy mode to hide sensitive values, and email auth via Supabase with row-level security on the server.

Approach

FIFO is implemented by processing transactions in time order and maintaining per-asset queues of lots so sells consume the oldest buys first. Privacy mode is a simple UX layer on top of the same data so demos stay safe. Market keys stay off the client in development via a Vite proxy; production needs a matching server route or the app degrades gracefully when pricing endpoints are unavailable.

Tech stack

React 19, Vite, React Router, TanStack Query, Tailwind CSS, Recharts
Supabase: Postgres, Auth, JWT, RLS for profiles and transactions
TwelveData for stocks, CoinGecko for crypto (with caching and batching)
Deployed with SPA rewrites on Vercel; see GitHub for env and migration notes

What I learned

TanStack Query: declarative fetching, caching, and background refetch cut boilerplate and improved perceived performance.
Component abstraction: shared inputs, buttons, and hooks like useSort and useClickOutside removed a lot of duplication.
Resilient API usage: layered freshness, batching, and graceful degradation kept the UI usable when external APIs failed.
Financial domain logic: FIFO forced clear thinking about ordering, lots, and sell allocation, not only charting.
Single source of truth: centralizing constants (e.g. crypto mappings) avoided drift between views and services.

Full setup, schema SQL, and deployment notes are in the GitHub repository.

Overview

Approach

What I learned

TanStack Query: declarative fetching, caching, and background refetch cut boilerplate and improved perceived performance.

Component abstraction: shared inputs, buttons, and hooks like useSort and useClickOutside removed a lot of duplication.

Resilient API usage: layered freshness, batching, and graceful degradation kept the UI usable when external APIs failed.

Financial domain logic: FIFO forced clear thinking about ordering, lots, and sell allocation, not only charting.

Single source of truth: centralizing constants (e.g. crypto mappings) avoided drift between views and services.

Full setup, schema SQL, and deployment notes are in the GitHub repository.