AI Expense Tracker

A modern, AI-powered expense tracking application built with React, TypeScript, and Vite. Track your income and expenses with intelligent category suggestions, budget insights, and comprehensive analytics.

Features

• ✅ Transaction Management - Add, edit, and delete transactions with AI-powered category suggestions
• 📊 Charts & Analytics - Weekly overview charts and category-wise spending breakdown
• 💡 AI Insights - Get spending forecasts and budget depletion predictions
• 🔍 Search & Filter - Quickly find transactions by description, type, or category
• 💾 Data Export - Export your transaction data as CSV
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🌙 Dark Mode - Eye-friendly dark theme support
• 📈 Statistics Dashboard - View transaction statistics and top spending categories

Run Locally

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager
• Google Gemini API Key (optional, for AI features)

Installation Steps

1. Install Dependencies

   npm install

2. Set Up Environment Variables (Optional, for AI features)

   Create a .env.local file in the root directory:

   GEMINI_API_KEY=your_gemini_api_key_here

   Note: The app will work without the API key, but AI-powered features (category suggestions, spending insights) will be disabled.

3. Run the Development Server

   npm run dev

4. Open in Browser

   The app will be available at http://localhost:3000

Build for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Getting a Gemini API Key

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click "Get API Key" and create a new key
4. Copy the key and add it to your .env.local file

Project Structure

ai-expense-tracker/
├── components/          # React components
│   ├── Dashboard.tsx   # AI insights and budget dashboard
│   ├── Charts.tsx      # Data visualization charts
│   ├── Statistics.tsx  # Transaction statistics
│   └── ...
├── hooks/              # Custom React hooks
├── services/           # API services
├── types.ts            # TypeScript type definitions
└── App.tsx             # Main application component

Technologies Used

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Chart.js - Data visualization
• Tailwind CSS - Styling
• Google Gemini API - AI-powered insights
• date-fns - Date manipulation

License

This project is private and proprietary.