使用 Supabase 和 Lovable 在短短 8 小时内创建基于全栈 AI 的卡路里/营养追踪器

总结

本博客是一个简短的教程/操作指南，介绍如何使用 Supabase 和 Lovable 在几小时（而不是几天）内创建全栈应用程序！我使用这些工具在短短 8 小时内创建了一个基于全栈 AI 的卡路里/营养跟踪器应用程序，我将在本博客中展示“如何操作”。

理念

我一直在考虑为自己开发一款基于人工智能的卡路里追踪应用，因为我经常使用 Claude 和 ChatGPT 等 LLM 来使用自然语言追踪我的每日膳食、卡路里及其营养素。但作为一名开发人员，我知道我可以让整个过程变得更简单、更好，而 Munchwise 正是这样做的。

Munchwise 根据您的个人信息为您创建个性化目标，然后让您使用自然人类语言跟踪您的膳食以及完整的每日/每周分析！

功能和技术堆栈

特征 -

创建账户并获取个性化卡路里/营养目标

使用自然人类语言跟踪膳食及其卡路里/宏量营养素

查看专门的每日/每周分析

技术堆栈 -

Supabase - Auth、数据库、边缘功能

Vite 和 React - 框架，构建工具

Tailwind CSS 样式

Lotable - 代码生成

创建前端

附言：开始之前您应该前往 Lovable 并创建一个新帐户！

对于前端，我使用 Lovable 创建了一个最小的工作 UI，并为我可以在此基础上构建的应用程序获取了一个基本线框，而 Lovable 完全没有让我失望。我从 Lovable 获得的初始设计足以开始在后端工作，然后我可以随心所欲地改进和更改 UI。这是第一次迭代和第一个提示中的样子 -

First prompt -

a nutrition/calorie tracker app, where a user can sign in and then they can input their age, height, weight, and daily calorie goal, we can have a daily required calorie calculator for them as well. And then the user can log their daily calorie intake by either text (logging the meal they ate in human language like 1 bowl daal 2 cups rice...), and then using llm ai based apis we calculate the calories and nutritional data for the meal and add it to the daily goal, a dashboard like interface which shows daily completion , charts which compare daily calorie intake against required, ,

all of this should be made using nextjs, supabase, shadcnui, for the ai part just hardcode for now ig, use orange theme for shadcn, 

pages needed - home page, sign-in page, sign-up page, /track page (dashboard), analytics page and an onboarding page where user will enter data like age height weight, whether they want to gain/lose weight and then ai will create the daily calorie intake goal for them which can be edited by them