Personal Expense Tracker & Budget Visualizer - Full Stack

A complete full-stack web application to track your income, expenses, and visualize your spending habits with interactive charts and budget alerts. Built with Node.js, Express, MongoDB, and vanilla JavaScript.

🚀 Features

✅ Core Functionality

• User Authentication: Secure registration and login with JWT tokens
• Add Income & Expenses: Record transactions with categories, amounts, descriptions, and dates
• Category Management: Pre-defined categories for income and expenses
• Monthly Dashboard: Visualize your spending with interactive charts
• Budget Alerts: Get notified when spending patterns need attention
• Multi-User Support: Each user has their own private data
• Data Persistence: All data stored securely in MongoDB database

📊 Visualizations

• Pie Chart: See how your expenses are distributed across categories
• Bar Chart: Compare income vs expenses across the last 6 months

🔔 Budget Alerts

• Warns when a category exceeds 30% of total expenses
• Alerts when balance goes negative
• Notifies when expenses exceed income
• Reminds when remaining balance is low

🛠️ Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• JWT - Authentication tokens
• bcryptjs - Password hashing

Frontend

• HTML5 - Structure
• CSS3 - Styling with modern design
• JavaScript (ES6+) - Application logic
• Chart.js - Data visualization

📦 Installation

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas account)
• npm or yarn

Step 1: Clone/Download the Project

cd webProj

Step 2: Install Dependencies

npm install

Step 3: Set Up MongoDB

Option A: Local MongoDB

• Make sure MongoDB is installed and running
• Default connection: mongodb://localhost:27017/expense-tracker

Option B: MongoDB Atlas (Cloud - Recommended)

• 📖 Complete Step-by-Step Guide: See MONGODB_ATLAS_SETUP.md
• Create free account at mongodb.com/cloud/atlas
• Follow the detailed guide for setting up your cluster, user, and connection string

Step 4: Set Up Environment Variables

Create a .env file in the root directory:

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/expense-tracker
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

For MongoDB Atlas (Cloud):

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/expense-tracker?retryWrites=true&w=majority

Step 5: Start MongoDB

If using local MongoDB:

# Windows
mongod

# macOS/Linux
sudo systemctl start mongod
# or
brew services start mongodb-community

Step 5: Start the Server

# Development mode (with auto-reload)
npm run dev

# Production mode
npm start

The server will run on http://localhost:5000

Step 6: Open the Application

Open index.html in your web browser, or serve it through a local server.

Note: For production, you should serve the frontend files through the Express server or a web server like Nginx.

📁 Project Structure

webProj/
├── backend/
│   ├── config/
│   │   └── database.js          # MongoDB connection
│   ├── models/
│   │   ├── User.js              # User model
│   │   └── Transaction.js       # Transaction model
│   ├── middleware/
│   │   └── auth.js              # JWT authentication middleware
│   ├── routes/
│   │   ├── auth.js              # Authentication routes
│   │   └── transactions.js     # Transaction routes
│   └── server.js                # Express server
├── frontend/
│   ├── index.html               # Main HTML file
│   ├── styles.css               # Styles
│   └── app.js                   # Frontend JavaScript
├── package.json                 # Dependencies
├── .env                         # Environment variables (create this)
└── README.md                    # This file

🔌 API Endpoints

Authentication

• POST /api/auth/register - Register a new user

  {
    "name": "John Doe",
    "email": "john@example.com",
    "password": "password123"
  }

• POST /api/auth/login - Login user

  {
    "email": "john@example.com",
    "password": "password123"
  }

Transactions (Protected - requires JWT token)

• GET /api/transactions - Get all user transactions
• GET /api/transactions/summary?month=0&year=2024 - Get monthly summary
• GET /api/transactions/monthly-comparison?month=0&year=2024 - Get comparison data
• POST /api/transactions - Create a new transaction

  {
    "type": "expense",
    "amount": 50.00,
    "category": "Food",
    "description": "Lunch",
    "date": "2024-01-15"
  }

• DELETE /api/transactions/:id - Delete a transaction

🔒 Security Features

• Password hashing with bcryptjs
• JWT token-based authentication
• Protected API routes
• User data isolation (users can only access their own data)
• Input validation

🎯 Usage

1. Register/Login: Create an account or login with existing credentials
2. Add Transactions: Record your income and expenses
3. View Dashboard: Check your monthly summary and charts
4. Monitor Alerts: Review budget alerts and adjust spending
5. Track Trends: Use charts to understand your financial patterns

🌐 Deployment

Backend Deployment (Heroku, Railway, Render, etc.)

1. Set environment variables in your hosting platform
2. Update MONGODB_URI to your cloud database
3. Deploy the backend

Frontend Deployment

• Option 1: Serve through Express (update server.js for production)
• Option 2: Deploy to Netlify, Vercel, or GitHub Pages
• Update API_URL in app.js to point to your backend URL

🐛 Troubleshooting

MongoDB Connection Issues

• Ensure MongoDB is running locally, or
• Check your MongoDB Atlas connection string
• Verify network access for cloud databases

CORS Errors

• The backend includes CORS middleware
• For production, configure allowed origins in server.js

Authentication Issues

• Clear browser localStorage if tokens are corrupted
• Check JWT_SECRET in .env file

📝 Future Enhancements

• Custom budget limits per category
• Recurring transactions
• Data export (CSV/PDF)
• Multiple currency support
• Dark mode
• Mobile app
• Email notifications
• Transaction search and filters
• Financial goals and savings tracking

📄 License

This project is open source and available for personal and commercial use.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

---

Enjoy tracking your expenses and building better financial habits! 💰