Real-time Fund Valuation

Client-only fund valuation dashboard with multi-account boards and optional GitHub sync.

English · 简体中文 · 日本語

Demo: https://nanhu22.github.io/Real-time-fund-valuation/

🏷️ Tags: #fund-valuation #multi-account #static-site #GitHubPages #Nextjs

---

✨ Highlights

• 🧭 Multi-account boards (Alipay/WeChat/custom) with isolated fund lists.
• ⚡ Real-time valuation + top 10 holdings tracking, no backend required.
• 🧩 GitHub Pages–ready static deployment.
• 🔒 Local-first persistence + optional GitHub sync to a repo file.
• 🪄 Responsive UI with card/list views and favorites.

---

🧭 Overview

This project is a Next.js single-page app that fetches fund valuation data directly from public sources via JSONP. It provides a clean, responsive dashboard for tracking funds and their top holdings, with board-based grouping and optional GitHub sync for cross-device persistence.

What it does: Shows real-time estimated NAV, daily change, and top holdings for selected funds. Why it matters: Keeps fund tracking lightweight and portable, without maintaining a server. How it works: Client-side JSONP calls + localStorage, with optional GitHub file sync (public/portfolio.json).

---

🧭 Table of Contents

• Quickstart
• Installation
• Usage
• Advanced / Configuration
• Tech Stack
• Architecture
• Roadmap
• Contributing
• Support
• License
• Acknowledgements

---

🚀 Quickstart

npm install
npm run dev

---

📦 Installation

Prerequisites

• Node.js 18+

Steps

npm install

---

🧩 Usage

Add boards and funds

1) Create a board (e.g. Alipay/WeChat).
2) Input a 6-digit fund code and click “Add”.
3) The fund appears under the current board.

Static portfolio file (optional)

{
  "version": 1,
  "activeBoardId": "board-default",
  "boards": [
    { "id": "board-default", "name": "默认", "fundCodes": ["110022"] }
  ],
  "favoritesByBoard": {},
  "collapsedByBoard": {},
  "refreshMs": 30000,
  "viewMode": "card"
}

---

⚙️ Advanced / Configuration

GitHub Sync (optional)

• Configure in the UI Settings panel.
• Required fields: owner, repo, branch, path, token.
• Recommended path: public/portfolio.json.
• Use a fine-grained token with contents:read/write only for this repo.

Static fallback

• If localStorage is empty, the app loads public/portfolio.json from the deployed site.

---

🛠️ Tech Stack

• Next.js 14 (App Router)
• React 18
• Framer Motion
• GitHub Actions + GitHub Pages

---

🧱 Architecture

Pure client-side SPA. Fund data is fetched via JSONP from Eastmoney/Tencent, then stored in localStorage. Optional GitHub sync writes a JSON file to your repository for cross-device reuse.

---

🗺️ Roadmap

• Board import/export JSON
• Board ordering and bulk edits
• Additional indicators (e.g., drawdown, weekly change)

---

🤝 Contributing

• Fork the repo, create a feature branch, and open a PR. For larger changes, open an Issue first.

---

🧰 Support

• Issues: https://github.com/nanhu22/real-time-fund/issues

---

🧾 License

• SPDX: MIT (MIT License)
• See: LICENSE

---

🙏 Acknowledgements

• Eastmoney fund APIs
• Tencent quote APIs