使用 MERN Stack 构建 AI 驱动的费用追踪器
Source: Dev.to
概述
管理个人财务可能具有挑战性。虽然许多费用追踪器仅记录交易或显示基本图表,但本项目构建了一个更智能的解决方案:一款 AI 驱动的费用追踪器,不仅记录支出,还分析行为并提供可操作的洞察。
该应用使用 MERN 技术栈构建,并集成了使用 LLaMA 3.3 和 Groq 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.3 与 Groq 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 应用提供强大的认证机制。
入门指南
- 克隆仓库。
- 为客户端和服务器安装依赖(
npm install)。 - 设置 MongoDB、JWT 密钥、邮件服务和 Groq API 密钥的环境变量。
- 启动开发服务器(Vite 使用
npm run dev,Express 使用npm start)。
Conclusion
构建这个 AI 驱动的费用追踪器深化了全栈开发技能,展示了 PWA 能力,并演示了如何将生成式 AI 嵌入真实世界的应用。如果你正在学习 MERN 栈,考虑挑战超出基本 CRUD 的项目——解决真实问题,尝试新兴技术,并优先考虑用户体验。
随时探索线上应用,查看源代码,如有任何问题或反馈,请联系。