AboutWorkTimelineProjectsContact
← Back to all projects
LiveProduction

PortfolioIQ

AI stock intelligence, built end-to-end in a weekend

Problem

Individual investors face the same financial markets as institutions but none of their analytical infrastructure. Earnings calls, SEC filings, and macro data pile up faster than any one person can parse. Could a single PM, without raising a single engineering ticket, build an AI layer that synthesises this into actionable signals — in a weekend?

A weekend
Build Time
$5
Total Cost

What I Learned

Writing a thorough PRD before touching any code is what makes AI-assisted development fast. The skill isn't coding. It's specification, architecture decisions, and understanding cost tradeoffs between models like Sonnet and Haiku. That clarity is the same skill that makes cross-functional programmes work at scale.

Stack

Next.js 14SupabaseClaude APIFinnhubFREDUpstash RedisVercelCloudflareTailwind CSSshadcn/uiRechartsResend

Deep Dive

Full architecture: 12 tools, 7 layers

Infrastructure
CloudflareVercel
HTTPS →
Frontend
Next.js 14Tailwind CSSshadcn/uiRecharts
fetch() →
Backend / API
API Routes (serverless)Upstash RedisRate Limiter
cache r/w · prompt →
AI (Anthropic)
Claude SonnetClaude Haiku
market data →
External APIs
FinnhubFREDResend
write signals →
Database
Supabase (Postgres)Supabase AuthSupabase Storage
read holdings →
Build-Time
StitchFigma + MCPClaude CodeGitHub

Design system: Stitch to Figma + MCP

01Google Stitch — Generated the initial design system, core screens, and component library from natural language prompts. Fast for exploration, limited when you need pixel-level control.
02Figma: production-grade — Proper component library with variants, auto-layout, design tokens, responsive breakpoints, and a living style guide.
03Figma + MCP: design-to-code bridge — Connected Figma to Claude via MCP. Claude reads Figma specs directly and generates matching React code. The handoff isn't a PDF anymore.

Cost breakdown: $5 to ship a full product

Supabase — Database, auth, file storage$0
Upstash Redis — Caching layer$0
Finnhub — Stock data + news$0
FRED — Macro indicators$0
Vercel — Hosting + domain$0
Cloudflare — CDN + security$0
GitHub — Code + CI/CD$0
Resend — Email$0
Google Stitch — Initial design$0
Claude API — Signal generation + parsing$5

Keeping costs near zero removes the friction of learning. It forces you to understand how cost works in AI products: how much each API call costs, what caching does to your bill, and how cost-per-response can be controlled through architecture.

Tool decisions: PM thinking behind the stack

Why kill OpenAI?

Claude Sonnet does vision just as well. One vendor = one API key, one bill, one set of docs. Simplicity compounds.

Why Supabase?

Postgres + auth + storage in one free tier. Row Level Security means the database enforces permissions, not my code.

Why cut Polygon.io?

Finnhub's free tier already covers quotes, fundamentals, and news. Product lesson: audit before you add.

Why Claude Code?

10 sequential prompts. Each builds on the last. The PRD I wrote is what made this fast.

Why Stitch then Figma?

Stitch for "give me a starting point." Figma for "make this production-ready." MCP connected the two worlds.

Why Vercel?

Push to GitHub, get a URL. Every deployment step you eliminate is time for making the product better.

Build process: 10 sequential steps

01Design tokens: colours, type, spacing
02TypeScript interfaces for all domain objects
03Supabase schema, 7 tables, RLS policies
04Market data service + Redis caching layer
05Claude signal engine + portfolio parsers
069 API routes (signals, portfolio, market, watchlist)
07Auth + Google OAuth
084-step onboarding wizard
09Dashboard, signal cards, detail drawer
10Polish, CI/CD, deploy to Vercel

Links