Skip to content

Repository files navigation

Stock Portfolio Dashboard

A private, educational web dashboard that helps beginner Indonesian investors understand a personal IDX portfolio. Users enter holdings and cash, optionally refresh best-effort Yahoo Finance prices, inspect portfolio health and allocation, test market scenarios, and export a polished PDF summary.

This project is not a trading agent and does not provide buy or sell recommendations.

Features

  • Editable stock holdings using Indonesian lot conventions
  • On-demand IDX price refreshes through Yahoo Finance with timestamp and delay disclosure
  • Total invested capital, current value, floating profit/loss, and return
  • Holdings, cash, and equity sector allocation
  • Transparent 0-10 portfolio health score with factor breakdown
  • Bearish, neutral, bullish, and custom portfolio scenarios
  • Daily Market Watch with three transparent OHLCV momentum signals
  • Deterministic concentration and cash-exposure notes
  • Downloadable PDF covering summaries, holdings, allocation, notes, and scenario output
  • Versioned browser localStorage persistence with a reset action
  • Responsive private-banking-inspired interface

The Daily Market Watch is an educational screener, not a recommendation engine. It ranks a small, documented IDX universe by 20-day price momentum adjusted for recent volatility. It does not use historical order-book data.

Technology

  • Next.js App Router and TypeScript
  • Tailwind CSS
  • shadcn/ui-compatible local primitives
  • Recharts
  • jsPDF and jsPDF-AutoTable
  • Vitest and Testing Library
  • GitHub Actions and Vercel

How It Works

Validated browser input
        -> versioned local state
        -> pure TypeScript calculations
        -> summaries, health, allocation, scenarios, and notes
        -> dashboard and PDF presentation

Only ticker symbols leave the device when prices are refreshed. Lots, cost basis, cash, portfolio totals, and exported reports remain local.

Run Locally

Prerequisites: Node.js 22.13 or newer and pnpm. Node.js 24 is used in CI.

pnpm install
pnpm dev

Open http://localhost:3000.

Quality Checks

pnpm lint
pnpm typecheck
pnpm test
pnpm build
pnpm report:sample

Financial Semantics

  • One IDX lot equals 100 shares.
  • Invested capital equals shares multiplied by average cost per share.
  • Cash contributes to total portfolio value and allocation but is excluded from stock return.
  • Scenarios change equity value while keeping cash unchanged.
  • Values may differ from broker totals that include fees, taxes, or adjusted cost basis.

Privacy and Data Limitations

Holdings, quantities, cost basis, cash, and calculated results stay in the current browser and device. When prices are refreshed, only ticker symbols are sent through the application server to Yahoo Finance. The MVP has no account, database, analytics integration, or server-side portfolio storage.

Yahoo Finance endpoints are best-effort and may be delayed, rate-limited, unavailable, or changed without notice. Manual current-price entry remains available. The application does not claim exchange-grade real-time data.

Deployment

  1. Push the repository to GitHub.
  2. In Vercel, choose Add New Project and import the repository.
  3. Keep the detected Next.js defaults; no environment variables are required.
  4. Deploy. Pull requests receive preview URLs and the production branch receives the production deployment.

Production URL: stock-portfolio-dashboard-pearl.vercel.app

Project Knowledge

Disclaimer

This application is an educational portfolio-analysis tool. It does not provide investment advice, predict prices, execute trades, or recommend buying or selling securities.

About

A premium educational IDX stock portfolio dashboard built with Next.js, TypeScript, Recharts, and Vercel.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages