Application for tracking personal finances and attaining financial independence
- Time-based navigation for every page (monthly and “all time” mode)
- Dashboard with net worth, asset allocation, investment growth, and FI date projections
- Transaction and category views with filtering, charts, and comparisons
- Cash & investment account tracking (with historical views)
- Nest egg planning and growth rate calculations- FI calculator with yearly projections and a custom goal slider
- Superb data synchronization all throughout, with instant optimistic UI updates
- 🌚 dark mode
This was a project I built as part of my college thesis, starting in the summer of 2023. During that period I really got into the idea of FIRE (Financial Independence, Retire Early), which was hardly surprising—I've been basically obsessed with Bitcoin for over 5 years at that point, and it always seemed like the perfect way to achieve exactly that: financial independence.
With this in mind, I thought it fitting to build an app about the topic I was obsessed with (as these things usually go).
I started by designing everything from scratch, including a custom component library. I prefer designing directly in code, skipping Figma, because it gives me faster feedback and more control. After a month of experimenting in my spare time, I implemented base components, locked in the layout and started building out the product.
The UI was built with Uno CSS (essentially more performant Tailwind CSS) and Headless UI for unstyled components. The stack: Nuxt 3 with Vue, Pinia, and TanStack Query on the frontend. Backend was Node with Nuxt’s Nitro API layer, Prisma, and PlanetScale.
TanStack Query was a deliberate choice over Nuxt’s useFetch
. After a bunch of experimentation with both, it became clear that TanStack Query lets me build a more powerful and performant experience by giving me full control over refetching and caching, so I can be completely confident the data is always up to date—crucial in a financial application. On top of this, I dove deep into ensuring optimistic updates, making the application feel snappy.
The application consists of these specific pages and functionality
- Login page with OAuth (Google, GitHub)
- Top header bar allowing you to navigate through time (providing a glimpse of your exact financial situation at that time)
- Current month shown on top, with controls to move between months
- “All time” mode
- Dashboard page
- Charts showing current Net Worth and allocation between assets
- Balance in cash and nest egg
- Avg annual rate – calculated expected average growth rate of your investments
- Safe withdrawal fee – percentage of nest-egg funds you'd sell yearly to cover living expenses (conventionally 4 %)
- Time until your Financial Independence
- Each of these lead to its respective page for more detail
- Activity page
- List of transactions
- Selected-timeframe overview (month or full time) with net cash-flow, income, spending, and charts comparing states to previous months
- Clicking on a transaction takes you to its page with similar overview charts
- Category page
- List of all categories with net/expenses/spending for that period and a link to each category’s page with more details and charts
- Accounts page
- All cash accounts on various banking platforms, each with specific financial data and its own page
- Total shown at top plus the total at the specific amount if you're viewing a past date
- Nest Egg page
- Similar to Accounts but separated into categories (Stocks, ETF & Bonds / Crypto / Real Estate / custom)
- Option to add a new nest-egg account, defining predicted annual growth rate or fetching it automatically from historical data
- Automatically calculates total average expected growth rate
- Net Worth page
- Insights into total amount and allocation across groups at any time in the past
- FI Page
- Exact time until Financial Independence
- Graph showing growth of Cash, Nest Egg, and Total Net Worth
- Calculator with a Net Worth Goal slider and parameters (yearly income and expenditure, safe-withdrawal fee, yearly investments…)
- State of your accounts for every single year until your FI date, giving you a glimpse into the magic of compound interest
On every page there’s a toolbar at the bottom right to quickly add an expense, income, or transfer. Transactions update instantly—something I spent a lot of time refining for both speed and UX polish.
That attention to detail paid off: I earned an A+, and the deep dive into Nuxt 3 (still in beta then) and TanStack Query helped me level up fast in the workplace.
Make sure to install the dependencies:
# pnpm (recommended)
pnpm install
# yarn
yarn install
# npm
npm install
Start the development server on localhost:3000
pnpm dev
Build the application for production:
pnpm build
Locally preview production build:
pnpm preview