使用 MERN Stack 构建 AI 驱动的费用追踪器

发布: (2025年12月27日 GMT+8 01:47)
5 分钟阅读
原文: Dev.to

Source: Dev.to

概述

管理个人财务可能具有挑战性。虽然许多费用追踪器仅记录交易或显示基本图表,但本项目构建了一个更智能的解决方案:一款 AI 驱动的费用追踪器,不仅记录支出,还分析行为并提供可操作的洞察。

该应用使用 MERN 技术栈构建,并集成了使用 LLaMA 3.3Groq SDK 的 AI 财务教练。它以渐进式网页应用 (PWA) 形式交付,具备可安装、离线使用以及跨设备响应式的特性。

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

Source:

核心功能

支出管理

  • 添加、编辑和删除支出,实时更新仪表盘。
  • 对交易进行分类(食品、旅行、账单等),并使用 AI 自动分类。
  • 通过交互式 Recharts 可视化查看月度支出细分、最近交易和储蓄趋势。

预算与提醒

  • 设置月度预算,可选 50/30/20 规则分析(需求、欲望、储蓄)。
  • 在预算使用率达到 30 %、50 %、90 % 和 100 % 时收到邮件提醒。
  • 丰富的深色主题 HTML 邮件通知。

认证与安全

  • 两步邮件 OTP 验证,确保注册安全。
  • 基于 JWT 的认证,用于受保护的路由和会话。

渐进式网页应用 (PWA) 能力

  • 离线缓存,实现仪表盘离线访问。
  • 可在移动端和桌面端安装。
  • 支持浅色、深色和自定义主题。

AI 财务教练

  • LLaMA 3.3Groq SDK 提供动力。
  • 用户可以使用自然语言提问,例如:
    • “本月我在食品上的花费是多少?”
    • “有什么节省开支的技巧吗?”
  • AI 分析用户数据,以实现:
    • 检测异常支出模式。
    • 识别重复订阅。
    • 提供可操作的储蓄建议。
    • 将洞察本地化为印度卢比 (₹)。

技术栈

技术
前端React.js, Vite, VitePWA, Recharts, Framer Motion
后端Node.js, Express.js
数据库MongoDB, Mongoose
身份验证JWT, Nodemailer (OTP)
AI 集成Groq SDK, LLaMA 3.3
样式Dark‑theme support, custom themes

架构亮点

  • 可扩展的数据模型: 为费用、预算和用户资料设计了 MongoDB 架构。
  • 安全的认证流程: 实现了 OTP 验证,随后颁发 JWT 用于会话管理。
  • AI 响应管道: 集成 Groq SDK,将用户查询和费用数据发送至 LLaMA 3.3,然后格式化本地化响应。
  • 性能优化: 利用 Vite 的快速打包、懒加载图表组件以及服务工作线程实现离线支持。

关键要点

  • 使用 WebSockets(或类似技术)构建全栈 MERN 应用并实现实时更新,可提升用户体验。
  • 实现 PWA 功能(服务工作线程、缓存策略)可在不影响用户体验的前提下提升离线韧性。
  • 将大型语言模型(LLM)集成到生产应用中,需要细致的提示工程和数据清洗,以确保 AI 响应准确且具上下文感知。
  • 将安全的 OTP 流程与 JWT 结合,为现代 Web 应用提供强大的认证机制。

入门指南

  1. 克隆仓库。
  2. 为客户端和服务器安装依赖(npm install)。
  3. 设置 MongoDB、JWT 密钥、邮件服务和 Groq API 密钥的环境变量。
  4. 启动开发服务器(Vite 使用 npm run dev,Express 使用 npm start)。

Conclusion

构建这个 AI 驱动的费用追踪器深化了全栈开发技能,展示了 PWA 能力,并演示了如何将生成式 AI 嵌入真实世界的应用。如果你正在学习 MERN 栈,考虑挑战超出基本 CRUD 的项目——解决真实问题,尝试新兴技术,并优先考虑用户体验。

随时探索线上应用,查看源代码,如有任何问题或反馈,请联系。

Back to Blog

相关文章

阅读更多 »