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.
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
- Clone the repository:
git clone <repository-url>
cd cashflow.pilot- Install dependencies:
pnpm install- Configure environment (optional):
Copy the example environment file:
cp .env.example .envFor 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- Start the development server:
pnpm dev- 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:
-
Create a Supabase project at supabase.com
-
Run the database migrations from
SUPABASE_SETUP.md -
Add your credentials to
.env:- Find your project URL and anon key in Supabase Dashboard โ Settings โ API
-
Enable authentication (optional):
- Configure email/password or social providers in Supabase Dashboard โ Authentication
-
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
- SUPABASE_SETUP.md - Complete Supabase configuration guide
- ACCESSIBILITY.md - Accessibility features and compliance
- PERFORMANCE_OPTIMIZATIONS.md - Performance tips
- ADVANCED_ANALYTICS.md - Analytics features guide
๐ค Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
๐ License
This project is licensed under the MIT License - see the LICENSE file for details.
๐ Acknowledgments
- Built with shadcn/ui components
- Icons from Heroicons and Lucide
- Charts powered by Recharts
- Backend by Supabase
- Styled with Tailwind CSS
Made with โค๏ธ for better financial management