WealthWise dashboard screenshot
← Back to Portfolio
React 18 Node.js Firebase Full-Stack Vercel Render

WealthWise 💰

A full-stack personal finance tracker built for Singapore.

Overview

WealthWise is a personal finance web application designed specifically for Singapore users. It lets you track income and expenses across multiple bank accounts — DBS, OCBC, cash, credit cards — monitor your stock and ETF portfolio with live prices from both SGX and US markets, and watch your net worth grow over time. Everything is denominated in SGD.

The app is split into three main sections: a Dashboard with a live net worth figure and trend chart, a Money Flow view for transactions and per-account P&L, and a Portfolio section with live ticker prices, unrealised P&L, and a 6-month performance chart.

Key Features

📊
Live Net Worth Dashboard
Net Worth = cumulative cash balance + live portfolio value, with a 6-month trend chart that auto-fills as you use the app via silent monthly snapshots.
WealthWise dashboard screenshot
💸
Multi-account Money Flow
Track income and expenses across multiple bank accounts with per-account P&L breakdowns, monthly filters, and an income-vs-expenses bar chart over 6 months.
WealthWise money flow screenshot
📈
Live Stock Portfolio
Add SGXand US market tickers. Live prices via Finnhub API with unrealised P&L, day change, and a portfolio allocation bar showing weight per holding.
WealthWise portfolio screenshot
🔐
Secure Per-user Data
Firebase Authentication + Firestore security rules ensure each user can only read and write their own data. All API endpoints require a verified Firebase ID token.
WealthWise authentication screenshot

How It's Built

The frontend is a React 18 + Vite single-page app styled with TailwindCSS and charted with Recharts. State is managed with Zustand — separate stores for auth, transactions/accounts, and investments.

The backend is an Express 4 REST API running on Node.js 22, deployed to Render. It handles all business logic, Finnhub stock price fetching (with a 120ms gap between tickers to respect rate limits), and Firestore writes via the Firebase Admin SDK.

The frontend is deployed to Vercel. All API calls inject a Firebase ID token via Axios interceptors so the backend can verify the caller server-side before touching any data.

Challenges & Learnings

The trickiest part was the auto-snapshot system — on the user's first dashboard visit each month, the app silently records the previous month's portfolio value so the net worth history chart fills in automatically without any manual input. Getting this to fire exactly once per month without race conditions or duplicate writes took careful Firestore document ID design using YYYY-MM keys.

Handling SGX vs US market currency differences was also non-trivial — US prices come back in USD while SGX prices are in SGD, so the app needed to handle mixed-currency holdings in a single portfolio view denominated in SGD.

View Live Site ↗
Tech Stack
Frontend React 18, Vite, TailwindCSS, Recharts, Zustand
Backend Node.js 22, Express 4
Auth & DB Firebase Firestore + Authentication
Stock API Finnhub (free tier)
Hosting Vercel (frontend) · Render (backend)
Project Type
Personal Project · Full-Stack
Markets Supported
SGX · NYSE · NASDAQ
Base Currency
SGD