Building an AI-Powered Expense Tracker with the MERN Stack

Source: Dev.to

Overview

Managing personal finances can be challenging. While many expense trackers only log transactions or show basic charts, this project builds a smarter solution: an AI‑powered expense tracker that not only records spending but also analyzes behavior and offers actionable insights.

The application is built with the MERN stack and integrates an AI financial coach using LLaMA 3.3 and the Groq SDK. It is delivered as a Progressive Web App (PWA), making it installable, offline‑capable, and responsive across devices.

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

Core Features

Expense Management

• Add, edit, and delete expenses with real‑time dashboard updates.
• Categorize transactions (Food, Travel, Bills, etc.) and auto‑categorize using AI.
• View monthly spending breakdowns, recent transactions, and savings trends via interactive Recharts visualizations.

Budgeting & Alerts

• Set monthly budgets with optional 50/30/20 rule analysis (Needs, Wants, Savings).
• Receive email alerts at 30 %, 50 %, 90 %, and 100 % of budget usage.
• Rich, dark‑themed HTML email notifications.

Authentication & Security

• Two‑step email OTP verification for secure sign‑up.
• JWT‑based authentication for protected routes and sessions.

Progressive Web App (PWA) Capabilities

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

AI Financial Coach

• Powered by LLaMA 3.3 and the Groq SDK.
• Users can ask natural‑language questions, e.g.:
  • “How am I spending on food this month?”
  • “What are some tips to save more?”
• AI analyzes user data to:
  • Detect unusual spending patterns.
  • Identify recurring subscriptions.
  • Provide actionable savings advice.
  • Localize insights to Indian Rupees (₹).

Tech Stack

Architecture Highlights

• Scalable Data Models: Designed MongoDB schemas for expenses, budgets, and user profiles.
• Secure Auth Flow: Implemented OTP verification followed by JWT issuance for session management.
• AI Response Pipeline: Integrated Groq SDK to send user queries and expense data to LLaMA 3.3, then format localized responses.
• Performance Optimizations: Leveraged Vite’s fast bundling, lazy‑loaded chart components, and service workers for offline support.

Key Learnings

• Building a full‑stack MERN application with real‑time updates using WebSockets (or similar) enhances user experience.
• Implementing PWA features (service workers, caching strategies) adds offline resilience without compromising UX.
• Integrating LLMs into a production app requires careful prompt engineering and data sanitization to keep AI responses accurate and context‑aware.
• Secure OTP flows combined with JWT provide a robust authentication mechanism for modern web apps.

Getting Started

1. Clone the repository.
2. Install dependencies for both client and server (npm install).
3. Set up environment variables for MongoDB, JWT secret, email service, and Groq API keys.
4. Run the development servers (npm run dev for Vite, npm start for Express).

Conclusion

Building this AI‑Powered Expense Tracker deepened full‑stack development skills, showcased PWA capabilities, and demonstrated how to embed generative AI into a real‑world application. If you’re learning the MERN stack, consider tackling projects that go beyond basic CRUD—solve genuine problems, experiment with emerging technologies, and prioritize user experience.

Feel free to explore the live app, review the source code, and reach out with any questions or feedback.