Investly — CSE Portfolio Tracker
(2025 - Present)
A real-time portfolio tracker for the Colombo Stock Exchange — built because the spreadsheet had to go.
I invest in the Colombo Stock Exchange, and the tooling for tracking a CSE portfolio was painful — expensive platforms, outdated broker portals, or a manually maintained spreadsheet that was always one session behind. So I built Investly. It's a real-time portfolio tracker that replaces the spreadsheet with a live dashboard, a strategy simulator, and automated fee calculations — all tuned for the CSE's specific rules. This project is different from my other work because I'm the end user. Every design decision — what metrics appear above the fold, how latency is handled during market hours, what the simulator calculates before I commit capital — was made by someone with real money on the line.
The Problem: Spreadsheets Don't Scale
Tracking a portfolio on the Colombo Stock Exchange is surprisingly manual. The broker portals are built for order execution, not analysis. Third-party platforms either don't support the CSE or charge a premium for basic features. And spreadsheets? They work until they don't — stale prices, formula errors, zero visibility into sector allocation, and no way to simulate a trade before pulling the trigger.
I needed a single dashboard that could answer simple questions in real-time: What's my total P&L right now? How much cash is free? If I sell this holding and rotate into another, what does the math look like after fees and lot-size rounding?
Building the Product I Needed
Investly started as a personal tool, and that shaped everything. The dashboard surfaces four core metrics at a glance — Wallet (available cash), Net Value (holdings at market price), Total P&L, and Active Positions. Prices update in real-time via Supabase Realtime subscriptions pushed from a Cloudflare Worker that collects live market data. No manual refresh needed.
Beyond the dashboard, the app handles the full lifecycle of CSE investing: recording BUY, SELL, DEPOSIT, WITHDRAWAL, and DIVIDEND transactions with search, filtering, and CSV export. Corporate actions like stock splits, consolidations, rights issues, and scrip dividends are first-class citizens — the system adjusts quantities and average prices automatically without destroying trade history.
I also built a broker statement importer that parses Atrad CSV exports and maps them into the portfolio, eliminating hours of manual data entry for existing investors migrating to the platform.
The Strategy Simulator
This is the feature I use most. Before committing capital, I run every trade through the simulator first. It supports two modes: a Buy Simulator for planning new positions with tranche-based entries, and a Strategy Simulator for modeling complex multi-move sequences — sells, buys, swaps, dividend reinvestments, and cash additions — all in a single sandbox.
The simulator calculates CSE-specific transaction fees, rounds share quantities to lot sizes, shows the exact cost breakdown per tranche, and projects your new average cost and position size. It's the tool that replaced the messy Excel sheet every CSE retail investor knows too well.
Under the Hood
The frontend is built with Next.js 16 and React 19 using the App Router with React Server Components for optimized data fetching. Supabase handles authentication (Google OAuth and email/password), the PostgreSQL database, and real-time price broadcasting via WebSocket channels. Drizzle ORM provides type-safe database access with relational queries and a holdings view that aggregates transactions into live positions automatically.
Market data flows through a Cloudflare Worker running on a cron schedule — it collects prices and metadata for all CSE-listed symbols, writes to the database, and Supabase Realtime pushes updates to every connected client. The entire UI is styled with Tailwind CSS v4 and animated with Framer Motion. Recharts powers the sector allocation and portfolio analytics visualizations.
Smart Alerts and Risk Rules
Price alerts let me set target thresholds (above or below) for any CSE stock and get notified when they trigger. Beyond individual alerts, I built a portfolio rules engine for global risk management — configurable strategy rules that apply across the entire portfolio, not just individual positions.
Sharing, Demo Mode, and Polish
Portfolio Share Cards generate frozen point-in-time snapshots of your portfolio — allocation donut charts, top holdings, and P&L stats — shareable via a public link without exposing any live data. I added a Guest Mode that gives instant demo access without signup, complete with sample data so visitors can explore the full interface. An interactive tutorial walks first-time users through every feature on the dashboard.
The landing page is server-rendered with full SEO: structured JSON-LD data, Open Graph metadata, a sitemap, and a polished dark-mode design that reflects the same attention to detail as the app itself.
What I Learned
Building for yourself changes the quality bar. When your own money depends on the output, you write different code. TypeScript with Zod validation became non-negotiable — one decimal error breaks your P&L entirely. Handling stale data during market closures, managing Supabase Realtime channel subscriptions across page navigations, and calculating CSE-specific tiered fees with exact LKR precision taught me defensive programming that no tutorial could. Shipping early and iterating based on my own daily use gave me a feedback loop that shaped every feature since launch.
