GitHunt
KE

keithsimkin/moneymanager

Modern personal finance tracker with smart analytics, budgeting, and cloud sync. Privacy-focused, local-first, built with React & TypeScript.

๐Ÿ’ฐ cashflow.pilot

Modern Personal Finance Management

A powerful, privacy-focused finance tracker built with React and TypeScript. Manage your money with beautiful analytics, smart budgeting, and seamless cloud sync.

React
TypeScript
Vite
Tailwind CSS
License: MIT

Features โ€ข Getting Started โ€ข Tech Stack โ€ข Documentation โ€ข Roadmap


โœจ Features

๐Ÿ’ณ Core Functionality

  • Account Management - Track checking, savings, credit, and investment accounts
  • Transaction Tracking - Record and categorize income and expenses with smart filters
  • Budget Planning - Set spending limits by category (weekly/monthly/yearly)
  • Goal Setting - Monitor progress toward financial goals with deadlines
  • Recurring Transactions - Automate regular income and expenses

๐Ÿ“Š Analytics & Insights

  • Advanced Analytics - Visualize spending patterns, trends, and category breakdowns
  • Financial Health Score - Get an overview of your financial wellness
  • Cashflow Forecasting - Predict future balances based on trends
  • Anomaly Detection - Identify unusual spending patterns
  • Spending Heatmaps - See when and where you spend the most

๐Ÿ”ง User Experience

  • Cloud Sync - Optional Supabase integration for multi-device access
  • Data Portability - Export and import your financial data in JSON format
  • Dark Mode - Full theme support for comfortable viewing
  • Keyboard Shortcuts - Navigate efficiently with keyboard commands
  • Accessibility - WCAG 2.1 AA compliant interface

๐Ÿ› ๏ธ Tech Stack

Frontend

  • React 19.2 with TypeScript - Modern UI library
  • Vite (rolldown-vite) - Lightning-fast build tool
  • React Router DOM - Client-side routing
  • Tailwind CSS 4.1 - Utility-first styling
  • Radix UI - Accessible component primitives
  • shadcn/ui - Beautiful component library
  • Recharts - Interactive data visualizations

Backend & Storage

  • Supabase - Optional cloud sync and authentication
  • localStorage - Local-first data storage

Development

  • TypeScript 5.9 - Type safety
  • Vitest - Fast unit testing
  • ESLint - Code quality
  • pnpm - Fast package manager

๐Ÿš€ Getting Started

Prerequisites

  • Node.js 18+
  • pnpm (recommended) or npm

Installation

  1. Clone the repository:
git clone <repository-url>
cd cashflow.pilot
  1. Install dependencies:
pnpm install
  1. Configure environment (optional):

Copy the example environment file:

cp .env.example .env

For local-only mode (no cloud sync), leave the Supabase variables empty or remove them.

For Supabase integration, add your credentials:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
  1. Start the development server:
pnpm dev
  1. Open your browser to http://localhost:5173

๐Ÿ” Supabase Setup (Optional)

cashflow.pilot works perfectly without Supabase using local storage. However, if you want cloud sync and multi-device access:

  1. Create a Supabase project at supabase.com

  2. Run the database migrations from SUPABASE_SETUP.md

  3. Add your credentials to .env:

    • Find your project URL and anon key in Supabase Dashboard โ†’ Settings โ†’ API
  4. Enable authentication (optional):

    • Configure email/password or social providers in Supabase Dashboard โ†’ Authentication
  5. Start using cloud sync - Your data will automatically sync across devices when logged in

๐Ÿ’ก Tip: The app gracefully falls back to localStorage if Supabase is not configured.

๐Ÿ“œ Available Scripts

Command Description
pnpm dev ๐Ÿš€ Start development server
pnpm build ๐Ÿ“ฆ Build for production
pnpm preview ๐Ÿ‘€ Preview production build
pnpm test โœ… Run tests once
pnpm test:watch ๐Ÿ”„ Run tests in watch mode
pnpm test:ui ๐ŸŽจ Run tests with UI
pnpm lint ๐Ÿ” Run ESLint

๐Ÿ“ Project Structure

src/
โ”œโ”€โ”€ components/       # React components
โ”‚   โ”œโ”€โ”€ ui/          # ๐ŸŽจ Reusable UI primitives (shadcn/ui + Radix)
โ”‚   โ””โ”€โ”€ *.tsx        # ๐Ÿงฉ Feature components (charts, forms, cards)
โ”œโ”€โ”€ contexts/        # ๐ŸŒ React Context providers (Finance, Theme, Auth)
โ”œโ”€โ”€ hooks/           # ๐Ÿช Custom React hooks
โ”œโ”€โ”€ pages/           # ๐Ÿ“„ Route page components
โ”œโ”€โ”€ types/           # ๐Ÿ“ TypeScript definitions
โ”œโ”€โ”€ utils/           # ๐Ÿ”ง Business logic utilities
โ””โ”€โ”€ lib/             # ๐Ÿ› ๏ธ Helper functions (cn, etc.)

๐Ÿ’พ Data Storage

Local-First Architecture

By default, all financial data is stored locally in your browser using localStorage. This means:

  • โœ… Complete Privacy - Your data never leaves your device
  • โœ… No Account Required - Start using immediately
  • โœ… Offline Access - Works without internet connection
  • โœ… Fast Performance - Instant data access

Optional Cloud Sync with Supabase

Enable Supabase integration to unlock:

  • โ˜๏ธ Multi-Device Sync - Access your data from any device
  • ๐Ÿ” Secure Authentication - Email/password or social login
  • ๐Ÿ’พ Automatic Backups - Your data is safely stored in the cloud
  • ๐Ÿ”„ Real-time Updates - Changes sync instantly across devices

Privacy Note: Even with Supabase enabled, you maintain full control. Your data is encrypted in transit and you can export/delete it anytime.

๐ŸŒ Browser Support

Browser Version
Chrome/Edge 90+
Firefox 88+
Safari 14+

๐Ÿ“š Documentation

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™ Acknowledgments


Made with โค๏ธ for better financial management

โฌ† Back to Top