Expensify - Personal Expense Manager

A full-stack personal finance management application that helps users track expenses, monitor budgets, analyze spending patterns, and visualize financial insights through interactive dashboards.

Preview

🚀 Live Links

• Live Application: Visit Expensify
• GitHub Repository: https://github.com/harshita7126/Expensify

---

🎯 Try It Yourself

1. Create an account or log in securely using the Supabase Auth panel.
2. Log your transactions under the Expenses tab with custom categories.
3. Set spending limits inside the Budgets dashboard to track real-time progress constraints.
4. Analyze spending patterns through interactive charts and cash-flow insights.

---

✨ Features

• Real-Time Expense Tracking: Log, search, filter, and manage transaction types (income/expenses) instantly.
• Interactive Analytics Dashboards: Rich data visualizations break down your overall balance, monthly spending trajectories, and savings metrics.
• Smart Budget Monitoring System: Establish category-specific financial caps and visually track your spending limits via live progress tracking indicators.
• Secure User Authentication: Implements robust user signups, logins, and session protections using Supabase Auth layers.
• Centralized State Management: Optimized data flow architecture using clean, reactive stores managed via Zustand.
• Polished User Experience: Features smooth layout transitions using Framer Motion and contextual state cues via native Toast notifications.
• Responsive Fluid UI: Fully optimized layout structures built for seamless mobile, tablet, and desktop display variants with a native persistent Dark/Light mode toggle.

---

📸 Screenshots

Welcome Dashboard Overview

Transaction Management Panel

Category Financial Analytics

Budget Limit Allocation

---

💻 Tech Stack

Frontend & Core Utilities

• React.js & Vite (Build Tool)
• JavaScript (ES6+)
• Tailwind CSS (Advanced modern interface layouts)
• Zustand (Lightweight, centralized local state management)
• React Router DOM & Lucide React (Navigation & iconography frameworks)
• Framer Motion (Fluid layout animations)
• Recharts (Interactive, performance-optimized data graph layers)

Backend, Database & Auth

• Supabase (Relational Postgres hosting, row-level security policy sets, and Auth mechanisms)

Deployment

• Vercel

---

🏗️ Architecture

Frontend (React + Zustand)
        ↓
Supabase Auth
        ↓
PostgreSQL Database
        ↓
Analytics & Budget Calculations
        ↓
Recharts Visualization Layer

---

⚙️ How It Works

1. Secure Session Validation: Supabase Auth verifies user states, mapping individual ledger accounts strictly to isolated relational unique IDs.
2. Client-Side Store Mapping: Zustand instantiates centralized balance, ledger, and target parameters across runtime processes.
3. Database Ledger Mutations: Adding or deleting transactions triggers seamless updates directly into the real-time Supabase SQL backing structure.
4. Budget Evaluation: Local math processors intersect current expense aggregates against budget categories to calculate delta variances.
5. Dynamic Data Composing: Recharts modules clean tracking inputs to display interactive cash-flow and saving diagrams natively on user feeds.

---

🛠️ Installation & Local Setup

1. Clone the Repository

git clone https://github.com/harshita7126/Expensify.git
cd Expensify

2. Install Project Dependencies

npm install

3. Configure Environment Variables

Copy the existing template file to generate a local environment profile:

cp .env.example .env

Open the freshly created .env file and insert your exact Supabase credentials:

VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

4. Database Setup Instructions

1. Open your project dashboard container inside the Supabase SQL Editor.
2. Open the file located locally at database/schema.sql.
3. Copy the entire SQL script contents, paste them directly into your Supabase query window, and click Run to generate the required relational database schema and security configurations.

5. Run the Development Server

npm run dev

---

📂 Project Structure

Expensify
│
├── database/            # Supabase SQL schema definitions and row-level policies
├── public/              # Static public browser assets
├── src/
│   ├── components/      # Reusable visual interface modules
│   ├── lib/             # Core setups, utilities, and client initializations
│   ├── pages/           # Base layout entry routes 
│   ├── store/           # Zustand state tracking definitions
│   ├── App.jsx          # Parent navigation layer routers
│   └── main.jsx         # Application process entry mountpoint
│
├── .env.example
├── package.json
├── vite.config.js
└── README.md

---

📊 Core Ledger Metrics

The ecosystem processes your personal financial parameters down into four specific matrices:

• Liquidity Balance: Dynamic tracking summarizing your total calculated revenue subtracted against category costs.
• Spending Trajectory Match: Live comparative graphs plotting your historical monthly expenditures against cash inflows.
• Budget Proximity Ratios: Interactive processing layers warning users as aggregate category parameters approach limit scopes.
• Category Density: Data mapping to visually highlight where your largest cost points occur.

---

🔮 Future Roadmap

• Dynamic cross-format parsing models to export transactional statements into CSV/PDF sheets.
• Automated recurring expense scheduling and monthly balance cycles.
• Real-time text or email alerts as spending parameters exceed 90% budget caps.
• Multi-currency validation systems with automated conversion updates.

---

👥 Author

Harshita Labba - Computer Science & Engineering Student

• GitHub: https://github.com/harshita7126
• LinkedIn: https://linkedin.com/in/harshita-l-124904330

---

📄 License

This project is licensed under the MIT License.