💸 FinFlow — Modern Collaborative Finance Manager

FinFlow is a production-quality, installable Progressive Web App (PWA) designed for modern personal and shared finance management. Built with a focus on rich aesthetics, offline-first performance, and collaborative simulation.

✨ Key Features

• 📱 Full PWA Support: Installable on iOS, Android, and Desktop with offline caching via Service Workers.
• 🤝 Collaboration Simulation: Switch between multiple local profiles to simulate shared accounts and money requests.
• 📊 Advanced Analytics: Interactive charts using Recharts for category distribution, monthly trends, and spending patterns.
• ❤️ Financial Health Score: A dynamic 0–100 score based on savings rate, budget adherence, income regularity, and account diversity.
• 💡 Smart Insights Engine: Automatically generates recommendations based on spending habits, budget thresholds, and positive streaks.
• 🛡️ Multi-Account Logic: Supports Bank, Wallet, Crypto, Card, Savings, Investment, and Cash accounts with specific modes (Locked, Input-only, Excluded from total).
• 📝 Transaction CRUD: Full management of income, expenses, transfers, and reimbursements with tag support and atomic balance calculations.
• 🎨 Premium UI/UX: Sleek dark mode, glassmorphism effects, smooth animations, and a curated color palette.

🛠️ Technology Stack

• Core: React 18, TypeScript, Vite
• Styling: Tailwind CSS (Class-based dark mode)
• State Management: Zustand + Persist Middleware (localStorage)
• Visualization: Recharts
• Icons: Lucide React
• Date Handling: date-fns
• PWA: vite-plugin-pwa
• Utilities: uuid, clsx

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/rich1richard/finflow.git
   cd finflow

2. Install dependencies

   npm install

3. Run in development mode

   npm run dev

   The app will be available at http://localhost:5173.

Production Build

To build the project for production (and test PWA features):

npm run build
npm run preview

📂 Project Structure

finflow/
├── src/
│   ├── components/       # Reusable UI components (Layout, Common, Feature-specific)
│   ├── data/             # Seed data and constants
│   ├── pages/            # Main route views (Dashboard, Analytics, etc.)
│   ├── store/            # Zustand global state and CRUD logic
│   ├── types/            # TypeScript interfaces and enums
│   ├── utils/            # Calculations, formatters, and recommendations engine
│   └── App.tsx           # Router and theme provider
├── public/               # Static assets and PWA icons
└── tailwind.config.js    # Design system configuration

⚖️ License

Distributed under the MIT License. See LICENSE for more information.