Skip to content

FinanceFlow — Personal Finance Tracker

A full-stack personal finance platform that lets users track expenses, categories, and reports, with a scalable FastAPI backend, Firestore storage, and a modern React frontend.

FinanceFlow — Personal Finance Tracker cover

Project Brief

FinanceFlow is a full-stack personal finance tracker that helps users manage expenses, categories, budgets, and financial insights. It’s built with a production-style FastAPI backend, Firestore as the NoSQL database, and a React frontend, focusing on clean architecture, secure auth, and cloud deployment.

Project Duration (Estimate)

In progress; built part-time alongside internship and other projects.

Repositories

Approach

  • Planning & Goals
    • Defined the core workflow around tracking daily spending, categories, and summaries that actually help users see where their money goes.
    • Designed the app to feel like a lightweight SaaS product, not a toy script.
    • Planned for future features: budgets, recurring transactions, and insights dashboards.
  • System Design & Architecture
    • Backend: FastAPI with a clear layering: api/ → services/ → repos/ → models/.
    • Database: Google Firestore (NoSQL) with user-scoped collections for categories and transactions.
    • Auth: JWT-based authentication with support for demo users (no signup friction).
    • Frontend: React + Vite with Axios API client and persistent auth token handling.
  • Implementation Workflow
    • Started from the data model: users, categories, transactions, and reports.
    • Implemented REST APIs for CRUD on categories and transactions, plus reporting endpoints.
    • Used Pydantic schemas for strict request/response validation and clear API contracts.
    • Integrated the frontend with a centralized Axios instance and protected routes.
  • Demo Mode & Onboarding
    • Implemented a Demo Mode login that returns a short-lived JWT and demo user ID.
    • On first demo login, auto-seeds default categories (Food, Rent, Transport, etc.).
    • Creates sample transactions so users immediately see charts and tables populated.
  • Deployment & Environments
    • Containerized the backend with Docker for reproducible local and cloud runs.
    • Deployed the API to Google Cloud Run using service accounts and env vars.
    • Separated local vs production configs via environment variables (origins, keys, project IDs).
  • Testing & Quality Assurance
    • Smoke-tested core endpoints: auth, categories, transactions, and reports.
    • Verified CORS behaviour between local frontend and Cloud Run backend.
    • Manual UX walkthroughs: first-time demo user → add category → add transaction → view reports.

Features

  • User Authentication: JWT-based auth with standard users and demo users.
  • Categories: Create, edit, and delete expense categories linked to each user.
  • Transactions: Add income/expense records with amount, date, and category.
  • Reports & Summaries: Simple spending summaries by category and date range.
  • Demo Mode: One-click demo login with pre-seeded data for instant exploration.
  • Cloud-Hosted API: FastAPI backend running on Google Cloud Run.
  • Secure API Integration: Axios client with token injection and CORS-safe configuration.
  • Extensible Architecture: Service/repo pattern ready for future features like budgets and exports.

Tools & Technologies

PythonFastAPIPydanticGoogle FirestoreFirebase Admin SDKReactTypeScriptViteAxiosDockerGoogle Cloud RunGitGitHubLoguru