A modern, feature-rich personal finance application built with React, TypeScript, and Tailwind CSS. Track expenses, manage budgets, and achieve your financial goals with an intuitive interface that works offline.
- Email/password authentication
- Secure user registration and login
- Protected routes and user sessions
- Multiple Account Types: Bank accounts, cash, mobile wallets, credit cards, investments
- Transaction Types: Expenses, income, and transfers between accounts
- Smart Categories: Pre-built expense and income categories with custom icons
- Budget Wallets: Create wallets with spending limits (monthly or one-time)
- Real-time Balance Updates: Account balances update automatically with transactions
- Natural Language Processing: Enter transactions like "200 #Cash @Grocery eggs bread today"
- Auto-parsing: Extracts amount, account, category, description, and date from natural text
- Date Recognition: Supports "today", "tomorrow", "2nd June", "June 1st" formats
- Quick Entry: Dropdown suggestions for accounts (#) and categories (@)
- Dashboard Overview: Monthly income/expense stats, total balance, account summaries
- Visual Charts: Beautiful graphs and statistics
- Historical Data: View balance at any point in time
- Monthly Reports: Track spending patterns and financial health
- Offline Support: Full functionality without internet connection
- Installable: Add to home screen on mobile and desktop
- Background Sync: Automatically syncs data when connection is restored
- Service Worker: Caches resources for optimal performance
- Beautiful Design: Modern aesthetics with gradients and smooth animations
- Dark/Light Mode: Toggle between themes with system preference detection
- Responsive: Optimized for all screen sizes
- Accessibility: Built with accessibility best practices
- Multi-currency Support: Handle different currencies for international accounts
- Data Export/Import: CSV import/export functionality
- Transaction Templates: Save frequently used transaction patterns
- Recurring Transactions: Set up automatic recurring payments
- Search & Filter: Find transactions quickly with advanced filtering
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/financeflow-app.git cd financeflow-app -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory.
- Frontend: React 18, TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Routing: React Router DOM
- Build Tool: Vite
- PWA: Service Worker, Web App Manifest
- State Management: React Context API
- Storage: LocalStorage (with future database integration planned)
src/
├── components/ # React components
│ ├── Dashboard.tsx # Main dashboard
│ ├── TransactionForm.tsx # Transaction entry form
│ ├── AccountsPage.tsx # Account management
│ ├── CategoriesPage.tsx # Category management
│ ├── WalletsPage.tsx # Wallet/budget management
│ ├── SettingsPage.tsx # User settings
│ └── ...
├── contexts/ # React contexts
│ ├── AuthContext.tsx # Authentication state
│ ├── DataContext.tsx # Application data
│ └── ThemeContext.tsx # Theme management
├── utils/ # Utility functions
│ └── transactionParser.ts # Natural language parsing
└── ...
"200 #Cash @Grocery eggs bread today"
→ Amount: 200, Account: Cash, Category: Grocery, Description: eggs bread, Date: today
"2nd June @Salary #Bank 5000 monthly salary"
→ Amount: 5000, Account: Bank, Category: Salary, Description: monthly salary, Date: June 2nd
"50 @Food lunch yesterday"
→ Amount: 50, Category: Food, Description: lunch, Date: yesterday
- Bank Account: Traditional bank accounts
- Cash: Physical cash management
- Mobile Wallet: Digital wallets (PayPal, Venmo, etc.)
- Credit Card: Credit card tracking
- Investment: Investment account monitoring
- Expense: Money going out
- Income: Money coming in
- Transfer: Moving money between your accounts
- Database integration (Supabase/Firebase)
- Social authentication (Google, Apple)
- Advanced analytics and reporting
- Bill reminders and notifications
- Receipt scanning and OCR
- Investment tracking
- Multi-user support (family accounts)
- API integrations (bank connections)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Created by Jawaid - Jawaid.dev
- Icons by Lucide
- UI inspiration from modern fintech applications
- Built with love for the open-source community
FinanceFlow - Take control of your finances with style! 💰✨