Portfolio Dashboard

A modern, real-time investment portfolio tracking dashboard built with Next.js. Monitor your stock holdings, bonds, and cash allocations with live price updates and interactive visualizations.

🎯 Features

Real-Time Price Updates: Fetch current stock prices from Finnhub API
Portfolio Allocation Chart: Visual pie chart showing asset distribution by category
Holdings Table: Detailed breakdown of all holdings with current prices and values
Category Breakdown: View portfolio value by category (Stocks, Bonds, Cash)
Total Portfolio Value: Displays current total portfolio worth
Config-Based: Simple JSON configuration file to manage your portfolio
Responsive Design: Works seamlessly on desktop and mobile devices
Type-Safe: Built with TypeScript for better developer experience

📸 Dashboard Preview

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Finnhub API key (free tier available at finnhub.io)

Installation

Clone the repository

git clone https://github.com/tiant167/portfolio-dashboard.git
cd portfolio-dashboard

Install dependencies
```
npm install
```
Set up environment variables (local development)

Create a .env.local file in the root directory with:

FINNHUB_API_KEY=your_api_key_here
EDGE_CONFIG_URL=https://edge-config.vercel.com
EDGE_CONFIG_TOKEN=your_edge_config_read_token

For local testing without Vercel Edge Config, you can skip the Edge Config vars for now (the app will error with a clear message).

Configure your portfolio in Vercel Edge Config
- Go to your Vercel project → Edge Configs
- Create a new Edge Config (or use existing) and add a key named portfolio
- Set the value to your portfolio JSON (see ⚙️ Configuration section below for format)
- Generate a read-only token and add EDGE_CONFIG_URL and EDGE_CONFIG_TOKEN to your .env.local
Run the development server
```
npm run dev
```
Open http://localhost:3000 in your browser. You should see the dashboard with your portfolio data.

📁 Project Structure

portfolio-dashboard/
├── app/
│   ├── components/
│   │   ├── HoldingsTable.tsx      # Detailed holdings table
│   │   ├── PortfolioPieChart.tsx  # Asset allocation chart
│   │   ├── TotalValue.tsx         # Total portfolio value display
│   │   └── TrendGraph.tsx         # Historical trend visualization
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx                   # Main dashboard page
├── pages/
│   └── api/
│       └── portfolio.ts           # API endpoint for portfolio data
├── portfolio.json                 # Portfolio configuration
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts

⚙️ Configuration

Portfolio Configuration (Vercel Edge Config)

Portfolio data is stored in Vercel Edge Config using the portfolio key. This project reads that key via the @vercel/edge-config SDK helper in lib/edge-config.ts.

To configure your portfolio value in Edge Config, set the portfolio key to a JSON value with this shape:

{
  "holdings": [
    {
      "symbol": "GOOGL",           // Stock ticker symbol
      "shares": 5,                 // Number of shares owned
      "category": "Stocks",        // Asset category
      "targetPercentage": 30       // (optional) Target allocation % for this holding
    }
  ],
  "cash": 8000,                    // Cash balance
  "categories": {
    "Stocks": "#FF6384",           // Category name and chart color
    "Bonds": "#36A2EB",
    "Cash": "#FFCE56"
  }
}

Optional Fields:

targetPercentage (number, 0–100): Desired allocation percentage for a holding. When provided for at least one holding, a "Target %" column appears in the dashboard holdings table showing your allocation targets vs. actual percentages. If omitted for all holdings, this column is hidden.

Notes:

The app no longer relies on a local portfolio.json file in production — Edge Config is the source of truth.
See the Vercel Edge Config section below for setup steps, required env vars (EDGE_CONFIG_URL, EDGE_CONFIG_TOKEN), and the SDK helper path (lib/edge-config.ts).

If Edge Config is not configured, the /api/portfolio endpoint will return a 500 error describing the missing key so you can fix the deployment configuration.

🔌 API

GET `/api/portfolio`

Returns current portfolio data with real-time prices.

Response:

{
  "totalCurrentValue": 50000,
  "categorizedValues": {
    "Stocks": 35000,
    "Bonds": 10000,
    "Cash": 5000
  },
  "holdings": [
    {
      "symbol": "GOOGL",
      "shares": 5,
      "category": "Stocks",
      "currentPrice": 170.50,
      "value": 852.50
    }
  ],
  "categoriesConfig": { /* category colors */ }
}

🛠️ Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm start - Start production server
npm run lint - Run ESLint

📦 Dependencies

Next.js 16 - React framework
React 19 - UI library
TypeScript - Type safety
Recharts - Data visualization
Tailwind CSS - Styling
Finnhub API - Real-time stock prices

🔐 API Key Security

Never commit your .env.local file. Add it to .gitignore:

.env.local

For production deployments on Vercel, set environment variables in your project settings. Use the key name FINNHUB_API_KEY (do not commit it to source control).

📊 Data Sources

Stock prices are fetched from the Finnhub API. Key points:

Real-time and delayed quotes are available via the /quote endpoint
Free tier available for personal use; rate limits apply (see Finnhub pricing and docs)

For production use with higher volume, consider a paid plan or add server-side caching (Redis / Upstash) to avoid hitting rate limits.

🌐 Deployment

Deploy on Vercel

The easiest way to deploy is using Vercel:

Push your code to GitHub
Connect your repository to Vercel
Set FINNHUB_API_KEY in Vercel's environment variables
Deploy

vercel

Deploy on Other Platforms

This is a standard Next.js app and can be deployed to any platform supporting Node.js (AWS, Heroku, Railway, etc.).

📝 Usage Examples

Adding a New Holding

Edit portfolio.json

Add a new entry to the holdings array:

{
  "symbol": "MSFT",
  "shares": 10,
  "category": "Stocks"
}

Save and refresh your browser - prices update automatically

Updating Cash Balance

Edit the cash field in portfolio.json:

"cash": 15000

Adding New Categories

Add to holdings: use the category name

Define color in categories:

"categories": {
  "Stocks": "#FF6384",
  "Bonds": "#36A2EB",
  "Cash": "#FFCE56",
  "Crypto": "#4BC0C0"
}

🗂️ Vercel Edge Config (SDK-based, required)

This project now reads the portfolio JSON exclusively from Vercel Edge Config using the official SDK (@vercel/edge-config). The app no longer falls back to a local portfolio.json — deployments and environments must provide a portfolio key in Edge Config.

Why SDK: the SDK provides a simple, typed client and better integration with Vercel's runtime. The repository includes a small helper at lib/edge-config.ts that normalizes the SDK return value and exposes getPortfolioFromEdge().

Quick setup:

In the Vercel dashboard go to Edge Configs → Create and add a key named portfolio whose value is your JSON (stringified). Example value:

{
  "holdings": [
    { "symbol": "GOOGL", "shares": 5, "category": "Stocks" }
  ],
  "cash": 8000,
  "categories": { "Stocks": "#FF6384", "Bonds": "#36A2EB", "Cash": "#FFCE56" }
}

Install and configure the SDK (already added to package.json): @vercel/edge-config.
Create a read-only token in the Edge Config settings and add it to your Vercel project env as:

EDGE_CONFIG_URL=https://edge-config.vercel.com
EDGE_CONFIG_TOKEN=<your_read_only_token>

Deploy — the API endpoint /api/portfolio will read the portfolio key via the SDK helper. If the key is missing, the API responds with 500 and a clear message indicating the missing portfolio key so the issue can be fixed in Vercel.

Helper & code notes:

Helper path: lib/edge-config.ts — it exports getPortfolioFromEdge() which returns the parsed JSON or null on failure.
The API uses this helper (see pages/api/portfolio.ts).
Do not expose the EDGE_CONFIG_TOKEN client-side; store it in Vercel environment variables only.

Notes and limitations:

Edge Config is optimized for small-to-medium JSON values. If your holdings list grows large, consider using a small DB (e.g., Supabase, Fauna, Postgres) and cache reads with a CDN.
Edge Config is not a secrets store — never put API keys or private credentials in Edge Config.
The SDK and Edge Config are intended for read-heavy, low-latency scenarios with infrequent writes.

🐛 Troubleshooting

"FINNHUB_API_KEY is not set"

Ensure your .env.local file exists with the correct API key, or add FINNHUB_API_KEY to your Vercel project environment variables.

Stock prices showing $0

Verify your API key is valid
Check Finnhub rate limits (free tier has limited requests)
Wait a moment and refresh the page

Holdings not updating

Clear your browser cache or restart the dev server with npm run dev.

📄 License

MIT

🤝 Contributing

Contributions are welcome! Feel free to:

Report bugs
Suggest features
Submit pull requests

📧 Support

For questions or issues, please open an issue on the GitHub repository.

Built with ❤️ using Next.js and React

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
app		app
lib		lib
pages/api		pages/api
public		public
.gitignore		.gitignore
README.md		README.md
capture-demo.png		capture-demo.png
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
portfolio.json		portfolio.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Portfolio Dashboard

🎯 Features

📸 Dashboard Preview

🚀 Quick Start

Prerequisites

Installation

📁 Project Structure

⚙️ Configuration

Portfolio Configuration (Vercel Edge Config)

🔌 API

GET /api/portfolio

🛠️ Available Scripts

📦 Dependencies

🔐 API Key Security

📊 Data Sources

🌐 Deployment

Deploy on Vercel

Deploy on Other Platforms

📝 Usage Examples

Adding a New Holding

Updating Cash Balance

Adding New Categories

🗂️ Vercel Edge Config (SDK-based, required)

🐛 Troubleshooting

"FINNHUB_API_KEY is not set"

Stock prices showing $0

Holdings not updating

📄 License

🤝 Contributing

📧 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

GET `/api/portfolio`

Packages