Portfolio Manager

Portfolio management is an important and complex task, yet free, unrestricted tools with comprehensive data and diverse metrics are rare on the market. During my participation in WGHS (Wharton Global High School Investment Competition), I decided to develop an application called Portfolio Manager, aiming to provide users with a powerful and easy-to-use portfolio management tool.

As a user with real needs, I understand the shortcomings of existing tools and user pain points. Therefore, I set the following requirements as first-class citizen goals:

1. Data Accuracy: Ensure the accuracy and timely updates of all financial data.
2. Comprehensive Metrics: Provide various financial metrics to help users fully understand their portfolio performance.
3. Speed and Responsiveness: Ensure the application remains fast and responsive when handling large portfolios.
4. Free and Unlimited Use.

In the pipeline design, I chose Yahoo Finance and IBKR as data sources, ensuring data accuracy, timeliness, and comprehensiveness, covering assets from all major global exchanges. For the tech stack, I use Python for the backend and TypeScript + React for the frontend, ensuring high performance and a good user experience.

Backend Design

I use FastAPI as the backend API framework and developed a comprehensive set of metric calculation tools using high-performance libraries like Pandas and NumPy, which heavily utilize C as the underlying computation framework to ensure speed. I carefully designed the data models and API interfaces to ensure each Portfolio request from the frontend to backend calculation returns results in only one network round-trip.

After multiple iterations of design and validation, the pipeline executes in five sequential layers:

1. Data Fetching Layer: Asynchronously read data, simultaneously fetching price data for all assets in the portfolio and benchmark index data, caching the results.
2. NAV Calculation Layer: Calculate the portfolio's net asset value history using cached data.
3. Basic Metrics Layer: Calculate basic metrics and benchmark comparison metrics in parallel.
4. Full Metrics Layer: Serially calculate all metrics, reusing the base data cache.
5. Return final results to the frontend.

This parallel architecture ensures that even portfolios with over 60 assets can complete all data reading, calculation, and response within three seconds.

Currently, the main users are club members, so demand is modest. Even facing large-scale users in the future, this architecture has high redundancy. I have not yet implemented LRU cache, vectorized operators, async IO, or full parallelization optimizations. These redundant designs ensure future scalability.

Frontend Design

The frontend is built with Next.js framework using React and TypeScript, with TailwindCSS for styling. For data visualization, Recharts is used to render NAV curves, return distributions, and other charts, while Lucide provides icon support.

The frontend receives streaming computation results from the backend via SSE (Server-Sent Events), enabling progressive loading of metrics and improving user experience. The interface supports bilingual switching between English and Chinese.