AI Instructor Live Labs Included

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.

Intermediate
13h 30m
16 Lessons
SMU-NEXTJS-PORTFOLIO
RetireScope Builder Badge

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
01
AI Lesson
AI Lesson

RetireScope: Intro, Architecture & Project Setup

45m

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.

02
Lab Exercise
Lab Exercise

Project Setup & Design System - Lab Exercises

45m 2 Exercises

Use Claude Code to scaffold the RetireScope navigation structure, design tokens, dark-mode-first styling, and reusable UI primitives with shadcn/ui.

Scaffold the Project & Set Up the Design System Use Claude Code to scaffold a Next.js 16 project with shadcn/ui, define the RetireScope design tokens in Tailwind 4, and enable dark mode by default. ~25 min
Build the Sidebar Navigation & Route Shell Use Claude Code to add the sidebar layout with route-aware active states and stub the five core pages (Dashboard, Accounts, Projection, Tax Planner, Assistant). ~20 min
03
AI Lesson
AI Lesson

Accounts & Holdings Data Model

45m

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.

04
Lab Exercise
Lab Exercise

Accounts & Holdings - Lab Exercises

50m 2 Exercises

Use Claude Code to build the Drizzle schema, Postgres migrations, account and holding CRUD via Server Actions, and the list/detail/form screens.

Wire Up Drizzle, PostgreSQL, and the First Migration Use Claude Code to define the Drizzle schema for accounts and holdings, configure the Postgres client against the lab's labdb, and run the first migration. ~30 min
Build Account & Holding CRUD UI Use Claude Code to build Server Actions and forms for creating accounts and holdings, with Zod validation and revalidatePath for fresh data. ~30 min
05
AI Lesson
AI Lesson

Live Quotes & Server Data Fetching

45m

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.

06
Lab Exercise
Lab Exercise

Live Quotes - Lab Exercises

45m 2 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.

Build the Finnhub Quote Service with DB Cache Use Claude Code to integrate the Finnhub API server-side, cache quotes in Postgres with a 60s TTL, and implement typed error handling. ~25 min
Show Live Prices with TanStack Query Polling Use Claude Code to add a /api/quotes route, integrate TanStack Query in the holdings table, and poll for live updates every 30 seconds. ~25 min
07
AI Lesson
AI Lesson

Holdings Dashboard with Charts

45m

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.

08
Lab Exercise
Lab Exercise

Holdings Dashboard - Lab Exercises

50m 2 Exercises

Use Claude Code to build the dashboard: KPI tiles, allocation pie, holdings table with sparklines, and a polished, professional financial-product look.

Build the KPI Strip & Allocation Pies Use Claude Code to compute portfolio KPIs (total value, today's change, YTD, cash) and render them with Tremor, plus two allocation donut charts. ~25 min
Polish: Holdings Table & Empty/Loading/Error States Use Claude Code to add the live holdings table with sparklines, plus the polish layer: empty, loading skeleton, and error states. ~25 min
09
AI Lesson
AI Lesson

Monte Carlo Retirement Projection

45m

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.

10
Lab Exercise
Lab Exercise

Monte Carlo - Lab Exercises

1h 0m 2 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.

Implement the Monte Carlo Simulation Engine Use Claude Code to build the simulation algorithm with Box-Muller normal sampling, percentile extraction, and the three withdrawal rules. ~30 min
Build the Visx Fan Chart & Scenario Form Use Claude Code to render a fan chart with three confidence bands using Visx, and build a form for scenario parameters. ~30 min
11
AI Lesson
AI Lesson

Tax-Aware Withdrawals & RMDs

45m

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.

12
Lab Exercise
Lab Exercise

Tax-Aware Withdrawals - Lab Exercises

50m 2 Exercises

Use Claude Code to implement the federal tax calculator, RMD calculator, withdrawal sequencer, and after-tax cashflow projection in the planner UI.

Build the Tax Bracket Calculator & RMD Calculator Use Claude Code to implement progressive federal/LTCG tax calculations and the RMD calculator using the IRS Uniform Lifetime Table. ~25 min
Build the Tax-Aware Withdrawal Sequencer & Planner UI Use Claude Code to implement the withdrawal sequencer (cash → RMD → taxable LTCG → traditional → Roth) and the tax-planner page UI. ~25 min
13
AI Lesson
AI Lesson

AI Portfolio Assistant: Tool Use with Claude

45m

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.

14
Lab Exercise
Lab Exercise

AI Portfolio Assistant - Lab Exercises

1h 0m 2 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.

Wire the Anthropic SDK & Tool Definitions Use Claude Code to set up the Anthropic SDK with the lab proxy, define five tools with JSON Schema, and implement their handlers. ~30 min
Build the Tool-Use Loop & Streaming Chat UI Use Claude Code to implement the tool-use loop with streaming, an SSE API route, and a chat UI that shows tool calls and text deltas in real time. ~30 min
15
AI Lesson
AI Lesson

Capstone Briefing — Complete RetireScope

45m

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.

16
Lab Exercise
Lab Exercise

Capstone: Complete RetireScope

1h 30m 2 Exercises

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.

Capstone: Plan & Implement Your Enhancement Pick one of the six enhancement options, write a phased plan with Claude Code, and execute the plan phase-by-phase. ~45 min
Capstone: Polish, Test & Document Drive your enhancement to ship-quality: empty/loading/error states, mobile responsive, full keyboard path, and a brief README of what you built. ~30 min
Sign In to Get Started Start Free Trial

This course includes:

  • 24/7 AI Instructor Support
  • Live Lab Environments
  • 8 Hands-on Lessons
  • Completion Badge
RetireScope Builder Badge

Earn Your Badge

Complete all lessons to unlock the RetireScope Builder achievement badge.

Skill Level Intermediate
Total Duration 13h 30m
RetireScope Builder Badge
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.

Course Building a Retirement & Portfolio App with Next.js and Claude Code
Criteria Complete all lessons and hands-on lab exercises in the Building a Retirement & Portfolio App with Next.js and Claude Code course on SkillMeUp.ai.
Valid For 730 days

Skills You'll Earn

Next.js TypeScript Claude Code Financial Modelling Monte Carlo Simulation Tax-Aware Withdrawal Logic Portfolio Projections LLM-Assisted UX Charting (Recharts) Server Actions

Complete all lessons in this course to earn this badge