📊 AI-Powered Personal Finance & Investment Dashboard

A full-stack personal finance dashboard with Supabase auth/storage, expense tracking, portfolio simulation, optimization analytics, and Gemini-powered market forecasts.

✨ Features

🔐 Authentication & Profiles

• Supabase auth: Email/password sign-in and Google OAuth
• Onboarding flow: Capture currency, income, budget, goals, and risk tolerance
• Profile editor: Update settings, avatar, and theme preference

📈 Dashboard Overview

• Portfolio snapshot: Current value, gain/loss, and allocation breakdown
• Budget insights: Monthly spend vs budget and net cash flow
• Recent activity: Quick glance at latest expenses

💰 Expense & Budget Tracking

• Manual entry with metadata: Merchant, payment method, notes, tags
• Recurring + split expenses: Schedule repeats and split transactions
• Automation rules: Auto-apply categories/metadata based on matching rules
• Imports & exports: CSV/Excel import, CSV export, PDF report
• Attachments: Upload receipts to Supabase Storage
• Bulk actions: Inline edits, undo/redo, trash/restore, filters

📊 Portfolio Management

• Simulated trades: Buy/sell holdings backed by Supabase data
• Live quotes & search: Finnhub-powered symbol lookup and pricing
• Performance charts: Historical portfolio value using candle data
• Allocation analytics: Diversification and holdings breakdown

🎯 Portfolio Optimization

• Mean-variance model: Efficient frontier from 6 months of price history
• Risk slider: Adjust target volatility to match tolerance
• Rebalancing plan: Suggested target weights and deltas

🔮 AI-Powered Predictions

• Gemini forecasts: Price projections with confidence bands
• Sentiment & insights: AI-generated market takeaways
• Data requirements: Uses historical candles from Twelve Data or Finnhub

🎨 User Experience

• Responsive UI: Works across desktop and mobile
• Interactive charts: Chart.js-based visualizations
• Finance-friendly visuals: Gains/losses color coding and clear metrics

🛠️ Tech Stack

Frontend

• React 18.3.1 - Hooks-first UI
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Vite - Fast dev server and builds

Backend & Data

• Supabase - Auth, Postgres, and Storage
• Finnhub - Live quotes and symbol search
• Twelve Data - Historical candles (optional)
• Google Gemini - AI forecasts and insights

UI & Visualization

• Shadcn/UI + Radix UI - Accessible primitives
• Chart.js + React Chart.js 2 - Line/bar charts
• Lucide React - Icon library

Developer Experience

• ESLint - Linting
• React Hook Form - Form helpers
• Date-fns - Date utilities

🏗️ Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # Base UI components (shadcn)
│   ├── DashboardOverview.tsx
│   ├── ExpenseTracker.tsx
│   ├── PortfolioView.tsx
│   ├── OptimizationView.tsx
│   └── PredictionsView.tsx
├── pages/               # Page components
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions
├── types/               # Shared types
└── assets/              # Static assets

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/Zurab1K/Finance-Tracker.git
   cd Finance-Tracker

2. Install dependencies

   npm install

3. Create your environment file

   cp .env.example .env

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:8080

Environment Variables

Set values in .env (see .env.example):

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_FINNHUB_API_KEY=your_finnhub_api_key
VITE_TWELVE_DATA_API_KEY=your_twelve_data_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_GEMINI_MODEL=gemini-1.5-flash
VITE_GEMINI_API_VERSION=v1

Notes:

• VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are required for auth and data storage.
• VITE_FINNHUB_API_KEY enables symbol search and live quotes.
• VITE_TWELVE_DATA_API_KEY enables historical candle data (optional; Finnhub can be used instead).
• VITE_GEMINI_API_KEY enables AI forecasts and insights.

Supabase Setup

Follow the schema and storage setup instructions in SUPABASE_SETUP.md.

Building for Production

npm run build

The build artifacts will be stored in the dist/ directory.

📱 Usage

Navigation

• Dashboard: Overview of your financial health
• Expenses: Track and categorize your spending
• Portfolio: Monitor your investments
• Optimization: Optimize your portfolio allocation
• AI Predictions: View Gemini-generated forecasts

Key Actions

1. Add Expenses: Click the "+" button to log new expenses
2. View Portfolio: Monitor real-time portfolio performance
3. Optimize Allocation: Use the risk slider to find optimal asset allocation
4. Check Predictions: Review AI forecasts for informed decision-making

📄 License

This project is proprietary and not licensed for use, modification, or distribution without prior written permission. See LICENSE for details.

Created by Zurabi Kochiashvili