💰 Expense Tracker – Take Control of Your Finances

A modern web application for managing your personal budget, built with React, Firebase, and Tailwind CSS. This project allows users to track income and expenses in real-time and visualize their financial health through interactive charts. 🚀 Key Features

1. Google Authentication: Secure login using Google accounts powered by Firebase Auth.

2. Transaction Management: Add income and expenses with specific categories (e.g., Food & Dining, Transportation, Entertainment).

3. Real-time Database: Automatic data synchronization across devices via Cloud Firestore.

4. Statistics & Visualization: Visualize spending habits with Donut charts and track balance history with Line charts using Recharts.

5. Security First: Firebase Security Rules ensure users can only access their own private data.

6. Responsive Design: A fully responsive interface optimized for mobile and desktop views using Tailwind CSS.

🛠️ Technology Stack

• Frontend: React (Vite)

• Styling: Tailwind CSS

• Backend/Database: Firebase (Firestore)

• Authentication: Firebase Auth

• Charts: Recharts

• Routing: React Router DOM

📦 Installation and Setup

Clone the repository:

git clone https://github.com/FAZ110/Expense-Tracker.git

cd Expense-Tracker

Install dependencies:

npm install

Configure Firebase: Create a .env file in the root directory and add your Firebase configuration keys:

Code Fragment:

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

Run the project locally: Bash

npm run dev

📂 Project Structure

src/components/: Reusable UI components (Forms, Lists, Charts).

src/hooks/: Custom hooks for authentication and Firestore data fetching.

src/pages/: Main application views (Dashboard, Statistics).

src/utils/: Helper logic and data transformation for charts.

src/firebase/: Firebase configuration and initialization.

src/models/: Data structures and validation rules.

🔒 Security (Firestore Rules)

The application implements a user-based security model. Every document in the expenses collection includes a userId field. Firestore Security Rules verify that this ID matches the UID of the currently authenticated user before allowing any read, write, or delete operations.