Building a Retirement & Portfolio App with Next.js and Claude Code
Build a retirement & portfolio web app with Next.js 16, TypeScript, PostgreSQL, Tremor & Visx charts, and a Claude-powered AI assistant — across 8 hands-on modules using Claude Code as your AI pair programmer.
View badge details
About This Course
Build RetireScope, a production-quality retirement and portfolio management web app using Next.js 16, TypeScript, PostgreSQL with Drizzle ORM, Tremor and Visx for charts, and the Anthropic Claude API for an AI portfolio assistant all paired with Claude Code as your AI coding partner. Starting from an empty Next.js scaffold, you will progressively implement account and holding management, live stock quotes via the free Finnhub API, a polished holdings dashboard, Monte Carlo retirement projections, tax-aware withdrawal sequencing with RMD calculations, and an AI portfolio assistant powered by Claude tool use. Each module adds a working feature layer using Claude Code prompts, teaching you AI-assisted development of a real-world financial application.
Course Curriculum
16 Lessons
RetireScope: Intro, Architecture & Project Setup
AI-led intro to RetireScope: course overview, app architecture, the Next.js 16 + Tailwind 4 + shadcn/ui stack, App Router patterns, and dark-mode-first design tokens. Previews the eight modules ahead.
Project Setup & Design System - Lab Exercises
Use Claude Code to scaffold the RetireScope navigation structure, design tokens, dark-mode-first styling, and reusable UI primitives with shadcn/ui.
Accounts & Holdings Data Model
Learn the data model that drives RetireScope: account types (Taxable, Traditional/Roth IRA, 401k, HSA), holdings, lots, asset classes, Drizzle ORM with PostgreSQL, and Server Actions with Zod validation.
Accounts & Holdings - Lab Exercises
Use Claude Code to build the Drizzle schema, Postgres migrations, account and holding CRUD via Server Actions, and the list/detail/form screens.
Live Quotes & Server Data Fetching
Learn how to integrate the free Finnhub API for real-time stock quotes, structure server-side fetching in Next.js, manage env vars, cache prices in Postgres, and use TanStack Query for client-side cache.
Live Quotes - Lab Exercises
Use Claude Code to build the Finnhub quote service with caching, integrate live prices into holdings, and add price-change indicators to the holdings list.
Holdings Dashboard with Charts
Learn how to design a polished portfolio dashboard with KPI tiles, allocation breakdowns by asset class and account type, donut and pie charts via Tremor, and tabular numerals for financial figures.
Holdings Dashboard - Lab Exercises
Use Claude Code to build the dashboard: KPI tiles, allocation pie, holdings table with sparklines, and a polished, professional financial-product look.
Monte Carlo Retirement Projection
Learn Monte Carlo simulation for retirement planning: parameter-based vs historical bootstrap, sequence-of-returns risk, percentile bands, withdrawal rules (4%, guardrails, VPW), and rendering a fan chart with Visx.
Monte Carlo - Lab Exercises
Use Claude Code to implement the Monte Carlo simulation engine, build the Visx fan chart with confidence bands, and create a withdrawal-rule comparator.
Tax-Aware Withdrawals & RMDs
Learn the tax math behind retirement: federal income tax brackets, capital gains brackets, withdrawal sequencing across taxable / tax-deferred / Roth, Required Minimum Distributions (RMDs) using the IRS Uniform Lifetime Table, and Roth conversion ladders.
Tax-Aware Withdrawals - Lab Exercises
Use Claude Code to implement the federal tax calculator, RMD calculator, withdrawal sequencer, and after-tax cashflow projection in the planner UI.
AI Portfolio Assistant: Tool Use with Claude
Learn how to integrate the Anthropic Claude API into a Next.js app: the SDK and proxy setup, JSON Schema tool definitions, the tool-use request/response loop, streaming responses with Server-Sent Events, and production patterns including prompt caching.
AI Portfolio Assistant - Lab Exercises
Use Claude Code to wire up the Anthropic SDK, define five tools that wrap RetireScope functions, implement the tool-use loop with streaming, and build a chat UI where Claude orchestrates portfolio queries.
Capstone Briefing — Complete RetireScope
Overview of the capstone exercise — polishing RetireScope into a complete, production-quality app. Covers six enhancement options, error handling, loading and empty states, and the meta-skill of driving Claude Code with phased plans.
Capstone: Complete RetireScope
Use Claude Code to polish RetireScope into a complete, production-quality web app. Pick one of six enhancement options (or your own idea), add error handling, loading and empty states, and verify the full workflow end to end.
This course includes:
- 24/7 AI Instructor Support
- Live Lab Environments
- 8 Hands-on Lessons
- Completion Badge
Earn Your Badge
Complete all lessons to unlock the RetireScope Builder achievement badge.
RetireScope Builder
Awarded for completing Building a Retirement & Portfolio App with Next.js and Claude Code. Demonstrates building a full-stack financial-planning web app — Monte Carlo projections, tax-aware withdrawals, portfolio modelling, and an LLM-assisted advisor interface — using Next.js, TypeScript, and Claude Code.
Skills You'll Earn
Complete all lessons in this course to earn this badge