FMS101 - Personal Finance Management System# 💰 Personal Finance Tracker

A comprehensive finance tracking application built with React, Vite, and Supabase.A minimalistic, responsive personal finance tracker web application inspired by Notion finance templates. Track your income, expenses, and savings throughout the year with beautiful visualizations and an intuitive interface.

🚀 Features

• Transaction Management - Track income and expenses with categories

• Budget Planning - Set and monitor budgets with alerts

• Analytics Dashboard - Visualize spending patterns with charts (Week/Month/Year views)## ✨ Features

• Savings Goals - Set and track financial targets

• Stock Watchlist - Monitor your investment portfolio### 📊 Dashboard Overview

• Bank Statement Import - Import transactions from bank statements- Summary Cards: Quick view of total income, expenses, and net savings

• Multi-Account Support - Manage multiple accounts- Yearly Savings Trend: Interactive line chart showing month-by-month savings

• Dark Mode - Beautiful dark/light theme support- Category Breakdown: Pie charts for income and expense categories

• User Authentication - Secure login with Supabase Auth- Recent Transactions: Latest financial activities at a glance

• Notifications - Budget alerts and savings milestones

📅 Quarterly Organization

📋 Prerequisites- Q1-Q4 Division: Year divided into four quarters with distinct color themes

• Q1 (Jan-Mar): Blue tones

• Node.js (v16 or higher) - Q2 (Apr-Jun): Teal tones

• npm or yarn - Q3 (Jul-Sep): Orange tones

• Supabase account - Q4 (Oct-Dec): Purple tones

🛠️ Installation### 💸 Transaction Management

• CRUD Operations: Add, edit, and delete income/expense entries

1. Clone the repository- Categorization: Pre-defined categories for easy tracking

   git clone <repository-url>  - Expenses: Groceries, Entertainment, Utilities, Healthcare, etc.
   
   cd fms101- **Monthly Breakdown**: Detailed view for each month
   

🎨 User Experience

2. Install dependencies- Dark/Light Mode: Smooth theme toggle with persistent preferences

   
   npm install- **Smooth Animations**: Fade-in, slide-up, and scale effects
   
   ```- **Color-Coded Visuals**: Green for income, red for expenses
   
   
   
   

3. Set up environment variables### 💾 Data Management

   • Local Storage: Automatic data persistence

   Copy .env.example to .env and add your Supabase credentials:- Export/Import: Save and restore data as JSON files

   
   VITE_SUPABASE_URL=your_supabase_url
   
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key## 🚀 Getting Started
   
   

Prerequisites

4. Set up the database- Node.js (v16 or higher)

   • npm or yarn

   Run the SQL migrations in your Supabase SQL Editor (in order):

   • supabase_migrations/finance_tables.sql### Installation

   • supabase_migrations/fix_signup_trigger.sql

   • supabase_migrations/add_missing_columns.sql (if needed)1. Install Dependencies

5. Start the development server npm install

   bash

   npm run dev

   
   ```bash
   
   

📁 Project Structure npm run dev

fms101/3. Open in Browser

├── api/ # API endpoints (Yahoo Finance, stock data) Navigate to http://localhost:3000

├── docs/ # Documentation

│ ├── archive/ # Old migration/planning documents4. Build for Production

│ ├── API_OPTIMIZATION.md ```bash

│ ├── RATE_LIMIT_GUIDE.md npm run build

│ ├── SETUP_GUIDE.md ```

│ ├── SUPABASE_SETUP.md

│ └── VERCEL_DEPLOYMENT.md## 📁 Project Structure

├── scripts/ # Build and utility scripts

│ ├── start.ps1```

│ └── vite-plugin-api.jsfms101/

├── src/├── src/

│ ├── components/ # React components│ ├── components/

│ ├── contexts/ # React Context providers (Auth, Finance, Theme, etc.)│ │ ├── CategoryChart.jsx # Pie charts for category breakdown

│ ├── hooks/ # Custom React hooks│ │ ├── Header.jsx # App header with theme toggle

│ ├── lib/ # Library configurations (Supabase)│ │ ├── MonthCard.jsx # Monthly transaction card

│ ├── pages/ # Page components│ │ ├── Navigation.jsx # Main navigation bar

│ └── utils/ # Utility functions and helpers│ │ ├── QuarterView.jsx # Quarterly overview

├── supabase_migrations/ # Database migration SQL files│ │ ├── RecentTransactions.jsx # Recent activity list

├── tests/ # Test files and scripts│ │ ├── SavingsChart.jsx # Yearly savings trend chart

├── .env.example # Environment variables template│ │ ├── StatsOverview.jsx # Summary statistics cards

├── index.html│ │ └── TransactionModal.jsx # Add/Edit transaction form

├── package.json│ ├── contexts/

├── tailwind.config.js│ │ ├── FinanceContext.jsx # Finance data state management

└── vite.config.js│ │ └── ThemeContext.jsx # Theme state management

│   │   ├── Dashboard.jsx          # Dashboard page

## 🔧 Configuration│   │   ├── Expenses.jsx           # Expenses page

│   │   ├── Income.jsx             # Income page

### Supabase Setup│   │   └── TotalSavings.jsx       # Total savings page

│   ├── utils/

1. Create a new Supabase project at [supabase.com](https://supabase.com)│   │   └── helpers.js             # Utility functions

2. Run the SQL migrations from `supabase_migrations/` in order│   ├── App.jsx                    # Main app component

3. Enable Row Level Security (RLS) - policies are included in migrations│   ├── main.jsx                   # Entry point

4. Configure authentication settings (email/password enabled)│   └── index.css                  # Global styles

5. Copy your project URL and anon key to `.env`├── index.html

├── package.json

For detailed setup instructions, see `docs/SUPABASE_SETUP.md`├── vite.config.js

├── tailwind.config.js

## 📊 Available Scripts└── postcss.config.js

• npm run dev - Start development server (port 5173)

• npm run build - Build for production## 🎯 Usage Guide

• npm run preview - Preview production build

• npm run lint - Run ESLint### Adding Transactions

1. Navigate to any month card

🚢 Deployment2. Click the "+ New" button under Income or Expenses

3. Fill in the transaction details:

The app can be deployed to Vercel, Netlify, or any static hosting service. - Title (e.g., "Monthly Salary")

• Amount (in ₹)

Quick Deploy to Vercel - Category

4. Click "Add" to save

npm install -g vercel### Editing/Deleting Transactions

vercel1. Expand a month card

```2. Hover over any transaction

3. Click the **edit** icon to modify or **trash** icon to delete

See `docs/VERCEL_DEPLOYMENT.md` for detailed deployment instructions.

### Viewing Analytics

## 🎨 Tech Stack- **Dashboard**: Overview of all financial data with charts

- **Total Savings**: Quarterly and monthly breakdowns

- **Frontend**: React 18, Vite- **Income/Expenses**: Focused views on specific transaction types

- **Styling**: Tailwind CSS

- **Backend**: Supabase (PostgreSQL)### Data Management

- **Authentication**: Supabase Auth- **Export**: Click the download icon to save data as JSON

- **Charts**: Recharts- **Import**: Click the upload icon to restore from JSON file

- **Icons**: Lucide React- **Reset**: Click the reset icon to clear all data (with confirmation)

- **Date Handling**: date-fns

- **Stock Data**: Yahoo Finance API## 🛠 Tech Stack



## 📝 Key Features- **Frontend Framework**: React 18.2

- **Build Tool**: Vite 5.0

### Transaction Management- **Styling**: Tailwind CSS 3.3

- Add, edit, delete transactions- **Charts**: Recharts 2.10

- Categorize with pre-defined or custom categories- **Icons**: Lucide React

- Filter by date, category, account- **Routing**: React Router DOM 6.20

- Search functionality- **Date Handling**: date-fns 2.30

- Notes and tags support

## 🎨 Color Theme

### Analytics Dashboard

- **Time Range Toggle**: View data by Week/Month/Year### Light Mode

  - Week view: Daily breakdown for last 7 days- Background: White/Light Gray

  - Month view: Weekly breakdown for current month- Text: Dark Gray/Black

  - Year view: Monthly breakdown for entire year- Income: Green shades

- Category breakdown charts- Expenses: Red shades

- Income vs expense comparison- Quarters: Blue, Teal, Orange, Purple

- Savings rate tracking

### Dark Mode

### Budgeting- Background: Dark Gray/Black

- Set category budgets- Text: White/Light Gray

- Budget alerts at 50%, 75%, 90%, and 100% thresholds- Income: Bright Green

- Monthly/quarterly/yearly periods- Expenses: Bright Red

- Real-time spending tracking- Quarters: Lighter Blue, Teal, Orange, Purple



### Savings Goals (Targets)## 📱 Responsive Breakpoints

- Create savings targets with deadlines

- Track progress visually- **Mobile**: < 640px

- Milestone notifications- **Tablet**: 640px - 1024px

- Current vs target amount comparison- **Desktop**: > 1024px



### Stock Watchlist## 🔮 Future Enhancements

- Add stocks to personal watchlist

- Real-time price updates- [ ] Budget setting and alerts

- Portfolio value tracking- [ ] Savings goals tracker

- Gain/loss indicators- [ ] Expense limit warnings

- [ ] Monthly expense predictions

### Notifications- [ ] CSV export/import

- Budget threshold alerts- [ ] Multi-year support

- Savings goal milestones- [ ] Cloud sync (Firebase/Supabase)

- User-specific (not shared across accounts)- [ ] Receipt attachment support

- Toast notifications for important events- [ ] Advanced filtering and search

- [ ] Custom categories

## 🔐 Security

## 📄 License

- Row Level Security (RLS) enabled on all tables

- User-specific data isolationMIT License - Feel free to use this project for personal or commercial purposes.

- Secure authentication with Supabase Auth

- Environment variables for sensitive data## 🤝 Contributing



## 🤝 ContributingContributions, issues, and feature requests are welcome!



Contributions are welcome! Please feel free to submit a Pull Request.## 💡 Tips



## 📄 License- **Regular Updates**: Add transactions regularly for accurate tracking

- **Categorize Properly**: Use appropriate categories for better insights

This project is licensed under the MIT License.- **Backup Data**: Export your data periodically as backup

- **Set Goals**: Use the insights to set and achieve financial goals

## 🐛 Known Issues

---

Check the GitHub Issues page for current known issues and planned features.

**Built with ❤️ using React + Vite + Tailwind CSS**

## 📧 Support

For questions or support, please open an issue on GitHub.

---

Built with ❤️ by Vashisht using React, Vite, and Supabase