🏦

A full-stack, comprehensive personal finance management application designed to track assets, liabilities, cash flow, investments, and financial goals in a unified, responsive dashboard.

---

🤖 AI-Powered Portfolio Project

This application was built as a personal portfolio project to demonstrate modern full-stack development capabilities without prior formal web development experience.

It was architected and developed end-to-end utilizing advanced AI tools. It serves as a practical showcase of how AI-assisted engineering can be leveraged to rapidly build robust, production-ready applications.

Powered By:

---

📖 How to Use the Application

Finance Vault is designed to give you complete visibility over your financial life. Here is a breakdown of how to use the platform:

1. Authentication & Setup

• Sign Up / Log In: Securely create an account. Your session is protected via JWT authentication.
• Settings Configuration: Open the Settings panel to set your preferred currency formatting and personalize your profile.

2. Main Dashboard (Home)

• High-Level Overview: View your total calculated Net Worth, Total Assets, Total Liabilities, and Investment summaries at a glance.
• Manage Assets & Liabilities: Easily add, edit, or remove assets (e.g., checking accounts, real estate) and liabilities (e.g., student loans, credit card debt). The dashboard totals update in real-time.
• Floating AI Mascot: Interact with the friendly floating mascot that accompanies you through your financial journey.

3. Investment Tracking

• Live Portfolio: Navigate to the Invest tab to add stock tickers and crypto assets.
• Market Data: The app uses an integrated yfinance market proxy to fetch real-time market data, showing you the current value and performance of your holdings automatically.

4. Cash Flow Management

• Income & Expenses: Use the Cash Flow tab to log your monthly income streams and track your expenses by category.
• Budgeting Insights: Understand where your money is going to optimize your saving rate.

5. Goal Setting

• Financial Milestones: Head over to the Goals tab to define targets (e.g., "Save for a Down Payment" or "Emergency Fund").
• Progress Tracking: Input your current savings toward each goal and visually track your completion percentage.

6. Net Worth History

• Visualizing Growth: The History tab plots your net worth over time using interactive Recharts graphs, allowing you to identify trends and long-term financial health.

---

🛠️ Technology Stack

Frontend

• Framework: React 19 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v4
• Icons & Charts: Lucide React, Recharts
• State & Routing: React Router v7, Custom Contexts (Theme, Settings)

Backend

• Framework: FastAPI
• Database & ORM: SQLAlchemy 2.0, Alembic (Migrations), PostgreSQL / SQLite
• Authentication: python-jose (JWT), passlib, bcrypt
• External APIs: yfinance (Market Data)
• Server: Uvicorn

---

🚀 Getting Started (Local Development)

Follow these instructions to set up the project locally.

Prerequisites

• Python 3.10+
• Node.js 18+

1. Backend Setup

Navigate to the backend directory, set up your virtual environment, and install dependencies:

# Create and activate virtual environment (Windows)
python -m venv venv
venv\Scripts\activate

# Install requirements
pip install -r backend/requirements.txt

# Run database migrations
alembic upgrade head

Start the Backend Server:

# For Running in Local Host
uvicorn backend.main:app --reload

# For Running on Network
uvicorn backend.main:app --host 0.0.0.0 --port 8000

The API will be available at http://localhost:8000

2. Frontend Setup

Open a new terminal, navigate to the frontend directory, and install the Node modules:

cd frontend
npm install

Start the Frontend Development Server:

# Run Frontend locally and expose to Network Wide
npm run dev -- --host

The application will be available at http://localhost:5173

---

📁 Project Structure

Finance-App/
├── backend/
│   ├── routes/          # API endpoints (assets, goals, investments, etc.)
│   ├── alembic/         # Database migration scripts
│   ├── main.py          # FastAPI application entry point
│   ├── models.py        # SQLAlchemy database models
│   └── requirements.txt # Python dependencies
├── frontend/
│   ├── src/
│   │   ├── components/  # Reusable UI elements (Charts, Layouts, Modals)
│   │   ├── pages/       # Route components (Dashboard, CashFlow, etc.)
│   │   ├── contexts/    # React Context providers
│   │   └── App.tsx      # Core application shell
│   └── package.json     # Node dependencies
└── vercel.json          # Deployment configuration

---

🔒 Security & Environment Variables

Ensure you create a .env file in the root backend directory with the following necessary variables (do not commit this to version control):

DATABASE_URL=sqlite+aiosqlite:///./finance.db  # Or PostgreSQL connection string
SECRET_KEY=your_super_secret_jwt_key
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
FRONTEND_ORIGIN=http://localhost:5173
ENV=development
```"# Finance-Vault" 
"# Finance-Vault"