💰 FlowCash

A beautiful, modern cashflow projection app built with React 19 and TypeScript. Track your income, expenses, and visualize your financial future with interactive charts and multi-currency support.

✨ Features

• 📊 Interactive Dashboard - Visualize your cashflow with beautiful area charts
• 💱 Multi-Currency Support - Track transactions in GBP, USD, EUR, AED, and ZAR
• 🔄 Recurring Transactions - Set up daily, weekly, monthly, or yearly recurring items
• 🏷️ Category Management - Organize transactions with customizable categories
• 📅 Smart Scheduling - Automatically shift weekend payments to weekdays
• 📈 Projections - See your balance projections up to 3 years in the future
• 💾 Data Export/Import - Backup and restore your data as JSON
• 📥 CSV Import - Bulk import transactions from CSV files
• 🌐 Live Exchange Rates - Fetch current exchange rates automatically
• 🎨 Modern UI - Built with shadcn/ui and Tailwind CSS
• 📱 Responsive Design - Works beautifully on desktop and mobile

🚀 Quick Start

Prerequisites

• Node.js 18+ (Download)
• pnpm (Install: npm install -g pnpm)

Installation

# Clone the repository
git clone https://github.com/yourusername/flowcash.git
cd flowcash

# Install dependencies
pnpm install

# Start development server
pnpm dev

Visit http://localhost:5173 to see the app running!

Build for Production

# Build the app
pnpm build

# Preview production build locally
pnpm preview

The built files will be in the dist/ directory, ready to deploy to any static hosting service.

🛠️ Tech Stack

• Framework: React 19.2
• Language: TypeScript 5.9
• Build Tool: Vite 7
• Styling: Tailwind CSS 4.1
• UI Components: shadcn/ui (Radix UI + Tailwind)
• State Management: Zustand
• Database: Dexie.js (IndexedDB wrapper)
• Charts: Recharts
• Date Handling: Day.js
• Animations: Framer Motion
• Recurring Rules: RRule

📂 Project Structure

flowcash/
├── src/
│   ├── components/       # React components
│   │   ├── ui/          # shadcn/ui components (Select, Checkbox, Button)
│   │   ├── Dashboard.tsx
│   │   ├── Transactions.tsx
│   │   ├── TransactionForm.tsx
│   │   └── Settings.tsx
│   ├── hooks/           # Custom React hooks
│   │   └── useProjection.ts
│   ├── lib/             # Utility functions
│   │   ├── db.ts        # Database setup & migrations
│   │   ├── currency.ts  # Currency utilities
│   │   ├── projection.ts # Cashflow projections
│   │   ├── csvImport.ts # CSV import logic
│   │   └── exchangeRates.ts # Live exchange rates
│   ├── store/           # Zustand store
│   │   └── useStore.ts
│   ├── types/           # TypeScript types
│   │   └── index.ts
│   └── App.tsx          # Main app component
├── public/              # Static assets
├── dist/                # Production build (generated)
└── package.json

💡 Usage

Adding Transactions

1. Click "Add Transaction" on the Transactions page
2. Fill in the details:
   • Title (e.g., "Salary", "Rent")
   • Type (Income or Expense)
   • Amount & Currency
   • Start date
   • Account
   • Category (optional)
3. Optional: Check "Recurring transaction" to set up:
   • Frequency (Daily, Weekly, Monthly, Yearly)
   • Interval (e.g., every 2 weeks)
   • Day of month (for monthly)
   • Weekend handling
   • End date (optional)
4. Click "Add Transaction"

Viewing Projections

1. Go to the Dashboard
2. Use the time range selector (3 months to 3 years)
3. Toggle "Show categories" to see breakdown by category
4. Click category pills to show/hide specific categories
5. Toggle "Show Balance Line" to overlay total balance

Managing Data

Export Data (Backup)

1. Go to Settings → Data Management
2. Click "Export Data (JSON)"
3. Save the file to a safe location

Import Data (Restore)

1. Go to Settings → Data Management
2. Click "Import Data (JSON)"
3. Select your backup file
4. All data will be restored

CSV Import (Bulk Add)

1. Click "Download Template" to see the format
2. Create your CSV file:

   description,amount,date,currency
   Salary,3500,2025-01-15,GBP
   Rent,-1200,2025-01-01,GBP

   • Positive amounts = Income
   • Negative amounts = Expenses
3. Click "Import CSV" and select your file

Exchange Rates

Auto-Fetch (Recommended)

1. Go to Settings → Exchange Rates
2. Click "Fetch Current Rates"
3. Rates are updated automatically

Manual Entry

1. Go to Settings → Exchange Rates
2. Adjust individual rates as needed
3. Click "Save All Settings"

🎨 Customization

Adding Categories

1. Go to Settings → Categories
2. Click "Add Category"
3. Enter:
   • Name (e.g., "Travel")
   • Type (Income/Expense/Both)
   • Color (pick from color picker)
4. Categories appear automatically in transaction forms

Default Categories

The app comes with 13 default categories:

• Income: Salary, Freelance, Investment Income, Other Income
• Expenses: Housing, Food & Dining, Transportation, Utilities, Entertainment, Shopping, Healthcare, Education, Other Expenses

You can edit or delete any category in Settings.

🔒 Privacy & Security

• 100% Local Storage - All data stays in your browser (IndexedDB)
• No Account Required - No sign-up, no tracking
• Optional Cloud Features - Only exchange rate fetching connects to internet
• Export Anytime - Download your data as JSON whenever you want

📦 Deployment

Deploy to Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Netlify

# Build
pnpm build

# Drag and drop the 'dist' folder to Netlify

Deploy to GitHub Pages

# Add to vite.config.ts:
# base: '/flowcash/'

# Build
pnpm build

# Deploy dist/ folder to gh-pages branch

🐛 Troubleshooting

Issue: Database is empty after clearing browser data
Solution: Use Export/Import to backup before clearing data

Issue: Exchange rates fail to fetch
Solution: Check internet connection or enter rates manually

Issue: Recurring transactions not showing
Solution: Check transaction is "Active" and start date is in the past

🤝 Contributing

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

📝 License

MIT License - feel free to use this for personal or commercial projects!

🙏 Acknowledgments

• shadcn/ui for the beautiful component library
• Radix UI for accessible primitives
• Recharts for the charting library
• Currency data from @fawazahmed0/currency-api

🚧 Roadmap

• Dark mode support
• Multiple accounts
• Budget tracking
• Cloud sync (optional)
• Mobile app (React Native)
• Bill reminders
• PDF export
• Custom categories with icons

---

Built with ❤️ using React and TypeScript

For questions or suggestions, please open an issue.