Building an AI-Powered Expense Tracker with the MERN Stack

Building an AI-Powered Expense Tracker with the MERN Stack

posted Originally published at adithyan-phi.vercel.app 3 min read

Building an AI-Powered Expense Tracker with MERN + LLaMA 3.3 + Groq

Managing personal finances is a common challenge, and most expense trackers stop at basic logging and charts. I wanted to go further by building an application that not only tracks expenses but also analyzes spending behavior and provides intelligent financial insights.

This led to the development of my AI-Powered Expense Tracker — a full-stack MERN application enhanced with an AI financial coach powered by LLaMA 3.3 and Groq.

In this article, I’ll walk through the idea, architecture, core features, and lessons learned while building this project.


Project Overview

The AI-Powered Expense Tracker is a personal finance management application that helps users:

  • Track daily expenses
  • Visualize spending patterns
  • Set and monitor budgets
  • Receive intelligent, AI-driven financial insights

The application is designed to be:

  • Secure
  • Responsive
  • Offline-friendly
  • User-centric

making it usable across both desktop and mobile devices.

Live Project:
https://adithyan-phi.vercel.app/project/expense-tracker


✨ Core Features

Expense Tracking

Users can add, edit, and delete expenses with clear categorization such as Food, Travel, Bills, and more. Each transaction is stored securely and reflected in real time on the dashboard.


Dashboard & Visual Analytics

The dashboard provides:

  • Monthly spending breakdowns
  • Recent transactions
  • Savings and spending trends

Charts and graphs make it easy to understand financial habits at a glance.


Budget Management

Users can set monthly budgets and optionally enable 50/30/20 rule analysis (Needs, Wants, Savings). The system continuously evaluates spending against these limits.


Secure Authentication & Notifications

Email OTP Verification

Signup includes a two-step email OTP verification with a 10-minute countdown timer, ensuring valid user accounts.

JWT-Based Authentication

JSON Web Tokens (JWT) are used for secure session management and protected routes.

Smart Budget Alerts

Users receive email notifications when they reach:

  • 30%
  • 50%
  • 90%
  • 100%

of their budget.

These alerts use dark-themed rich HTML templates, displaying total spent and remaining balance.


Progressive Web App (PWA) Support

To improve accessibility and usability:

  • Installable on mobile and desktop
  • Cached dashboards and reports available offline
  • Dedicated privacy policy page via footer
  • Fully responsive design
  • Light and dark themes, including custom Yellow/Black themes

AI Integration: The Financial Coach

The most unique aspect of this project is its AI layer.

AI Financial Coach (LLaMA 3.3 + Groq)

Users can interact with a conversational AI and ask questions like:

  • “Analyze my food spending”
  • “How can I save more this month?”

The AI processes actual user data to generate personalized insights.


Intelligent Capabilities

  • Localized financial advice strictly in Indian Rupees (₹)
  • Detection of unusual or anomalous spending
  • Identification of potential recurring subscriptions
  • Actionable savings strategies
  • AI-assisted auto-categorization of expenses

This transforms the app from a tracker into a financial assistant.


Tech Stack

Frontend

  • React.js — Component-based UI
  • Vite — Fast development and build tooling
  • VitePWA — Offline support and installability
  • Recharts — Data visualization
  • Lucide React — Icon set
  • Framer Motion — Animations and transitions

Backend

  • Node.js & Express.js — Server and API layer
  • MongoDB & Mongoose — Database and schema modeling
  • JWT — Authentication and authorization
  • Nodemailer — OTP and budget alert emails

AI / ML

  • Groq SDK — High-performance inference
  • LLaMA 3.3 — Financial analysis and conversational intelligence

Key Challenges & Learnings

  • Designing a scalable data model for expenses and budgets
  • Managing authentication flows securely with OTPs and JWT
  • Ensuring AI responses were accurate, contextual, and localized
  • Optimizing performance for dashboards and charts
  • Implementing offline support without breaking user experience

This project reinforced the importance of:

  • Clean architecture
  • Thoughtful UX
  • Incremental feature development

✅ Final Thoughts

Building this AI-Powered Expense Tracker helped me deepen my understanding of:

  • Full-stack MERN development
  • Authentication systems
  • Progressive Web Apps
  • Real-world AI integration

More importantly, it demonstrated how AI can add genuine value when combined with meaningful user data.

If you’re learning the MERN stack, I strongly recommend building projects that solve real problems and pushing beyond basic CRUD functionality.


✍️ Written by Adithyan G

MERN Stack Developer

Portfolio: https://adithyan-phi.vercel.app

1 Comment

1 vote

More Posts

What I Learned While Building My First MERN Stack Project

Anchal Jethliya - Jan 15

Your Tech Stack Isn’t Your Ceiling. Your Story Is

Karol Modelskiverified - Apr 9

Breaking the AI Data Bottleneck: How Hammerspace's AI Data Platform Eliminates Migration Nightmares

Tom Smithverified - Mar 16

Best Databases to Use with the MERN Stack Apart from MongoDB

Aditya Pratap Bhuyan - Mar 10, 2025

Everyone says DeepSeek is cheaper, but I got tired of guessing the exact math. So I built a calculat

abarth23 - Apr 27
chevron_left

Related Jobs

View all jobs →

Commenters (This Week)

Contribute meaningful comments to climb the leaderboard and earn badges!