DEV Community

Cover image for Building an AI-Powered Expense Tracker with the MERN Stack
Adithyan G
Adithyan G

Posted on

Building an AI-Powered Expense Tracker with the MERN Stack

Managing personal finances is a challenge a lot of us face. While many expense trackers focus on just logging transactions or basic charts, I wanted to build something smarter—an app that not only tracks expenses but also analyzes spending behavior and provides actionable insights powered by AI.

So I built an AI-Powered Expense Tracker using the MERN stack, enhanced with an AI financial coach powered by LLaMA 3.3 and Groq.

In this post, I’ll walk you through the project idea, architecture, core features, tech stack, and key learnings.


Project Overview

This app helps users:

  • Track daily expenses with clear categories (Food, Travel, Bills, etc.)
  • Visualize spending patterns with interactive charts and dashboards
  • Set budgets and receive smart alerts as spending approaches limits
  • Interact with an AI financial coach that provides personalized advice

The app is designed as a Progressive Web App (PWA)—installable, offline-capable, and responsive across devices.

🔗 Check out the live project:

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


Core Features

Expense Tracking

Add, edit, and delete expenses easily. Each transaction updates the dashboard in real time.

Dashboard & Analytics

View monthly spending breakdowns, recent transactions, and savings trends using charts powered by Recharts.

Budget Management

Set monthly budgets with optional 50/30/20 rule analysis (Needs, Wants, Savings).

Receive email alerts at 30%, 50%, 90%, and 100% of your budget usage.

Authentication & Security

  • Two-step email OTP verification for secure sign-up
  • JWT-based authentication for protected routes and sessions
  • Rich, dark-themed HTML email notifications for budget thresholds

PWA Support

  • Installable on mobile and desktop
  • Offline caching for dashboard access
  • Light, dark, and custom themes for user preference

AI Financial Coach — The Unique Twist

The standout feature of this project is the AI-powered financial assistant.

Built with LLaMA 3.3 and the Groq SDK, the AI allows users to ask questions such as:

  • “How am I spending on food this month?”
  • “What are some tips to save more?”

The AI analyzes real user data to:

  • Detect unusual spending patterns
  • Identify recurring subscriptions
  • Provide actionable savings advice
  • Localize insights strictly to Indian Rupees (₹)
  • Auto-categorize expenses to reduce manual input

Tech Stack

Frontend

  • React.js
  • Vite
  • VitePWA
  • Recharts
  • Framer Motion

Backend

  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • JWT
  • Nodemailer

AI / ML

  • Groq SDK
  • LLaMA 3.3

Challenges & Learnings

  • Designing scalable data models for expenses and budgets
  • Implementing secure OTP and JWT-based authentication
  • Ensuring AI responses were accurate, contextual, and localized
  • Optimizing performance for dashboards and charts
  • Supporting offline functionality without breaking UX

Final Thoughts

Building this AI-Powered Expense Tracker helped me level up my full-stack development skills, explore PWA capabilities, and integrate AI into a real-world application.

If you’re learning the MERN stack, I strongly recommend building projects that go beyond basic CRUD—solve real problems, experiment with new technologies, and focus on user experience.

Feel free to check out the live app and source code, and reach out if you have questions or feedback.

Top comments (0)