💰 Expense Tracker

A modern, real-time expense tracking application built with React, Firebase, and Vite.

✨ Features

• 🔐 Google Authentication - Secure sign-in with Firebase Auth
• 💵 Real-time Expense Tracking - Add, edit, and delete expenses instantly
• 📊 Category Management - Organize expenses by categories
• 🔍 Search & Filter - Find expenses by notes and category
• 📈 Automatic Totals - Real-time calculation of totals per category
• 🎨 Modern UI - Clean, responsive design
• ⚡ Fast - Built with Vite for optimal performance

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Firebase account

Installation

1. Clone or create the project:

npm create vite@latest expense-tracker -- --template react
cd expense-tracker

2. Install dependencies:

npm install firebase react-router-dom date-fns

3. Set up Firebase:

   a. Go to Firebase Console

   b. Create a new project

   c. Enable Google Authentication:

   • Navigate to Authentication > Sign-in method
   • Enable Google provider

   d. Create Firestore Database:

   • Navigate to Firestore Database
   • Click Create database
   • Choose production mode
   • Select a location

   e. Set up Firestore Security Rules:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /users/{userId}/{document=**} {
         allow read, write: if request.auth != null && request.auth.uid == userId;
       }
     }
   }

4. Configure environment variables:

   Create a .env file in the root directory:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id

   Get these values from:

   • Firebase Console > Project Settings > General > Your apps > Web app

5. Run the application:

npm run dev

The app will open at http://localhost:3000

📁 Project Structure

expense-tracker/
├── src/
│   ├── components/
│   │   ├── ExpenseForm.jsx      # Modal form for add/edit
│   │   ├── ExpenseList.jsx      # List of expenses
│   │   └── TotalsCard.jsx       # Summary card
│   ├── hooks/
│   │   ├── useAuth.js           # Authentication logic
│   │   └── useExpenses.js       # Firestore CRUD operations
│   ├── pages/
│   │   ├── Dashboard.jsx        # Main dashboard
│   │   └── Login.jsx            # Login page
│   ├── App.jsx                  # Router configuration
│   ├── main.jsx                 # Entry point
│   ├── firebase.js              # Firebase initialization
│   └── styles.css               # Global styles
├── .env                         # Environment variables
├── index.html
├── package.json
└── vite.config.js

🔧 Configuration

Firestore Data Model

/users/{userId}/expenses/{expenseId}
{
  amount: number,          // Expense amount
  category: string,        // Category name
  date: timestamp,         // Expense date
  notes: string,           // Optional notes
  createdAt: timestamp,    // Auto-generated
  updatedAt: timestamp     // Auto-updated
}

Available Categories

• Groceries
• Transport
• Eating Out
• Utilities
• Rent
• Other

You can customize categories in src/pages/Dashboard.jsx

🎯 Usage

1. Sign In:

   • Click "Sign in with Google"
   • Authorize with your Google account

2. Add Expense:

   • Click "Add" button
   • Fill in amount, category, date, and notes
   • Click "Save"

3. Edit Expense:

   • Click "Edit" on any expense
   • Modify details
   • Click "Save"

4. Delete Expense:

   • Click "Delete" on any expense
   • Expense is removed immediately

5. Filter Expenses:

   • Use category dropdown to filter by category
   • Use search box to find by notes

6. View Totals:

   • Check the sidebar for total amount
   • See breakdown by category

🔒 Security

• User authentication required for all operations
• Data isolated per user in Firestore
• Secure Firebase rules prevent unauthorized access
• Environment variables protect sensitive config

🛠️ Troubleshooting

Common Issues

1. "Module not found" errors

• Ensure all files are in correct directories
• Check import paths match folder structure

2. Firebase initialization fails

• Verify .env file exists and has all variables
• Check variable names start with VITE_
• Restart dev server after changing .env

3. Google sign-in doesn't work

• Enable Google provider in Firebase Console
• Add localhost to authorized domains
• Check Firebase API key is correct

4. "Permission denied" on Firestore

• Update Firestore security rules
• Ensure user is authenticated
• Check user UID matches document path

5. Expenses don't appear

• Check browser console for errors
• Verify Firestore rules are correct
• Ensure user is authenticated

📦 Build for Production

npm run build

The built files will be in the dist/ directory.

🚀 Deployment

Deploy to Firebase Hosting

1. Install Firebase CLI:

npm install -g firebase-tools

2. Login to Firebase:

firebase login

3. Initialize Firebase in your project:

firebase init

4. Deploy:

npm run build
firebase deploy

Deploy to Vercel

1. Install Vercel CLI:

npm install -g vercel

2. Deploy:

vercel

🎨 Customization

Change Theme Colors

Edit src/styles.css:

:root {
  --bg: #f6f7fb;           /* Background */
  --card: #fff;            /* Card background */
  --muted: #6b7280;        /* Muted text */
  --accent: #2563eb;       /* Primary color */
  --danger: #ef4444;       /* Delete button */
}

Add New Categories

Edit src/pages/Dashboard.jsx:

const CATEGORIES = ['Groceries', 'Transport', 'Your Category', ...]

🤝 Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

📧 Support

If you encounter any issues, please check the troubleshooting section or open an issue on GitHub.

---

Built with ❤️ using React, Firebase, and Vite