🚀 AI Financial Tracker

Transform your phone into a visual financial command center with bubble-based goal tracking and AI-powered insights.

A premium mobile expense tracking application featuring an innovative "Goal Bubble Universe" design, 13+ budgeting methods, AI-powered receipt scanning, and comprehensive financial analytics.

✨ Key Features

🎯 Goal Bubble Universe

Interactive 3D bubble visualization - Your financial goals float in a beautiful space-themed interface
Drag & drop organization - Intuitively arrange your goals by priority
Real-time progress tracking - Watch your bubbles grow as you make progress
Dynamic sizing - Bubble size reflects goal amount
Priority-based color coding - Instantly identify high, medium, and low priority goals

🤖 AI-Powered Receipt Scanning

Instant OCR processing - Extract merchant, amount, and items from receipts
Smart category detection - AI automatically categorizes expenses
Multiple OCR backends - Support for Google Vision API, Tesseract, AWS Textract
Item-level breakdown - See individual items from your receipts
High accuracy - Confidence scoring for each scan

📊 13+ Budgeting Methods

50/30/20 Rule - 50% needs, 30% wants, 20% savings
Zero-Based Budget - Every dollar has a job
Envelope System - Cash allocation to categories
Pay Yourself First - Automatic savings priority
Reverse Budgeting - Save first, spend what's left
60% Solution - 60% committed, 40% flexible
80/20 Budget - Simple savings approach
Values-Based Budgeting - Align spending with values
Line-Item Budget - Traditional detailed tracking
Proportional Budget - Priority-based allocation
Sub-Savings Account - Multiple goal accounts
Anti-Budget - Track savings rate only
Cash-Only Budget - Physical spending limits

📈 Comprehensive Analytics

Interactive charts - Pie charts, line graphs, bar charts
Spending trends - Track patterns over time
Category breakdown - See where your money goes
Income vs Expenses - Visual comparison
AI-generated insights - Smart recommendations
Custom date ranges - 7 days, 30 days, 90 days, or yearly

💎 Premium Features

Beautiful gradient UI design
Dark mode support (auto, light, dark)
Secure data storage with encryption
Cloud sync capabilities
Multi-currency support
Customizable categories
Goal achievement notifications
Budget alerts and warnings

🏗️ Architecture

Frontend (Mobile)

React Native - Cross-platform mobile development
Expo - Development platform and tools
TypeScript - Type-safe code
Zustand - State management
React Navigation - Navigation framework
Victory Native - Data visualization
React Native Reanimated - Smooth animations

Backend (API)

Node.js - JavaScript runtime
Express - Web framework
SQLite - Local database
JWT - Authentication
bcrypt - Password hashing

📱 Screenshots

┌─────────────────────────────────────┐
│  🏠 Dashboard                       │
├─────────────────────────────────────┤
│  💰 Income        📊 Analytics      │
│  💸 Expenses      🎯 Goals          │
│  🏦 Savings       📈 Trends         │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  🎯 Goal Bubble Universe           │
├─────────────────────────────────────┤
│         ⭐    🌟                    │
│    🔵         🟣      🟢            │
│         🟡                          │
│    🔴              🟤     ⚫        │
└─────────────────────────────────────┘

🚀 Getting Started

Prerequisites

Node.js 16+ and npm/yarn
Expo CLI
iOS Simulator (Mac) or Android Studio
Git

Installation

Clone the repository

git clone https://github.com/yourusername/ai-financial-tracker.git
cd ai-financial-tracker

Install dependencies

# Install mobile app dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..

Start the backend server

npm run backend
# Server runs on http://localhost:3000

Start the mobile app

npm start
# Then press 'i' for iOS or 'a' for Android

Running on Different Platforms

iOS:

npm run ios

Android:

npm run android

Web:

npm run web

📖 Usage Guide

Adding Your First Transaction

Tap the "Scan Receipt" button on the dashboard
Take a photo of your receipt or choose from gallery
AI will automatically extract the details
Review and confirm the transaction
Transaction is saved and categorized

Creating a Financial Goal

Navigate to the Goals tab
Tap the "+ Add Goal" button
Enter goal details:
- Name (e.g., "Dream Vacation")
- Target amount
- Category
- Priority level
Watch your goal appear as a bubble in the universe!
Tap the bubble to add contributions

Choosing a Budget Method

Go to Settings → Budget Methods
Browse the 13+ available methods
Select the one that fits your lifestyle
App will automatically apply the rules
Get real-time budget alerts

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Backend
PORT=3000
JWT_SECRET=your-super-secret-jwt-key
DATABASE_URL=./financial_tracker.db

# AI Services (Optional)
GOOGLE_VISION_API_KEY=your-google-vision-key
AWS_ACCESS_KEY_ID=your-aws-key
AWS_SECRET_ACCESS_KEY=your-aws-secret

Customization

Theme Colors - Edit src/theme/colors.ts Categories - Modify src/store/financeStore.ts Budget Methods - Extend src/utils/budgetMethods.ts

🧪 Testing

# Run tests
npm test

# Run with coverage
npm test -- --coverage

📦 Building for Production

iOS

expo build:ios

Android

expo build:android

🛠️ Technology Stack

Category	Technology
Mobile Framework	React Native + Expo
Language	TypeScript
State Management	Zustand
Navigation	React Navigation
Charts	Victory Native
Animations	React Native Reanimated
UI Components	Custom + React Native
Backend	Node.js + Express
Database	SQLite
Authentication	JWT
API Design	RESTful

📂 Project Structure

ai-financial-tracker/
├── src/
│   ├── components/          # Reusable UI components
│   │   └── GoalBubbleUniverse.tsx
│   ├── screens/            # Screen components
│   │   ├── DashboardScreen.tsx
│   │   ├── GoalsScreen.tsx
│   │   ├── AnalyticsScreen.tsx
│   │   └── ReceiptScannerScreen.tsx
│   ├── store/              # State management
│   │   └── financeStore.ts
│   ├── types/              # TypeScript definitions
│   │   └── index.ts
│   └── utils/              # Utility functions
│       ├── receiptScanner.ts
│       └── budgetMethods.ts
├── backend/                # Backend API
│   ├── server.js
│   └── package.json
├── App.tsx                 # Main app component
├── package.json
├── tsconfig.json
└── README.md

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add 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

Inspired by modern fintech apps
Design influenced by space themes and bubble interfaces
Built with love for the personal finance community

📞 Support

Issues: GitHub Issues
Email: support@aifinancialtracker.com
Docs: Full Documentation

🗺️ Roadmap

⭐ Star History

If you find this project useful, please consider giving it a star!

Made with 💜 by the AI Financial Tracker Team

Transform your financial future, one bubble at a time. 🎯✨

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
src		src
.env.example		.env.example
.gitignore		.gitignore
App.tsx		App.tsx
LICENSE		LICENSE
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
package.json		package.json
tsconfig.json		tsconfig.json

License

Triple0cta/testing-claude-code

Folders and files

Latest commit

History

Repository files navigation