Personal Finance
& Portfolio App
A full-stack investment dashboard built under hackathon pressure — real-time market data, risk simulation, and budget tools in a single platform.
4th
Overall placement
53
Commits during the hackathon
8
Hours available
The Challenge
Build a working personal finance platform — portfolio tracking, real-time data, and financial simulation — fast enough to compete.
The Response
The team chose Next.js 16 for its full-stack capabilities, Recharts for financial data visualization, and Socket.io for the real-time market feed — prioritizing a complete feature set over deep polish. All five planned screens shipped: a live portfolio dashboard, risk simulator, budget tracker with survival calculator, and authenticated user accounts backed by PostgreSQL.
Team
Team Project
Result
4th Place — Special Mention
Year
2026
Status
Completed
Features
What we shipped
Portfolio Dashboard
The central hub of the app. Displays the user's current holdings, sector allocation breakdowns, and performance charts rendered with Recharts. Portfolio composition updates live as market data streams in via Socket.io.
Live Market Data
A Socket.io connection pushes real-time price updates from the backend to the frontend without polling. Holdings values recalculate on each tick, giving the dashboard a live trading-terminal feel within a Next.js app.
Monte Carlo Risk Simulation
The simulator runs a Monte Carlo analysis — generating thousands of randomised price paths for each asset based on historical volatility and drift — then plots the distribution of possible portfolio outcomes over a configurable time horizon. Users can see not just an expected return but the full spread of scenarios, from worst-case to best-case, as overlapping projection curves rendered with Recharts.
Budget Tracking
A personal finance ledger for recording income and expenses by category. Includes a survival calculator that takes the user's current balance and monthly burn rate and estimates how long their runway extends.
Authentication
Secure sign-in via Better Auth — the same library used in OpenCare — with session management and protected routes. User data and portfolio records are scoped to the authenticated session and persisted in PostgreSQL.
Real-time Data
Socket.io pushes live market prices to every connected client — no polling, no stale numbers.
A persistent Socket.io connection from the Next.js backend streams market data to the frontend. The portfolio dashboard recalculates total value and allocation percentages on every price tick, keeping the numbers current without requiring a page refresh.
Data Visualization
Recharts turns raw portfolio data into allocation breakdowns, projection curves, and budget summaries.
Every financial view is chart-first: donut charts for sector allocation, line charts for performance history and risk projections, and bar charts for the budget ledger. All charts respond to live data and user interaction without a full component remount.
Tech Stack
Frontend
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS v4
- shadcn/ui
Data Viz
- Recharts
Real-time
- Socket.io
Backend & Data
- Node.js
- PostgreSQL
- Better Auth
- Bun