健康健美模板
Morsel AI Calorie Tracker App
An Expo / React Native calorie and macro tracker: photograph a meal or describe it, review the AI estimate, log it, and follow a plan worked out from the person's answers. Runs on sample data until you connect Supabase.
- 19 个界面
- iOS 和 Android
- 示例数据
- 更新于 2026年11月4日
- 已验证版本
免费复制 · 完整源码 · 无需信用卡
界面
来自实际运行应用的 6 个界面。
包含内容
- Meal photo, nutrition label and text estimates through Gemini, called from the included Supabase Edge Function
- Review screen before logging: confidence in words, editable portions, remove with undo, add foods
- Plan computed on the device (Mifflin-St Jeor): daily kcal, macros, goal date and a weekly projection
- Barcode lookup through Open Food Facts plus a built-in list of common foods for search
- Progress: weight trend against the goal, 7-day calories, macro averages, streak calendar, insights
- AI coach that answers from the person's last seven days (Pro only, enforced on the server)
关于此模板
Overview
Morsel is a calorie and macro tracker built on Expo SDK 57 and React Native with the FluxNative kernel. A person answers a short onboarding, gets a daily calorie and macro target worked out on the phone, then logs meals by photo, nutrition label, barcode, text description or search.
With .env blank the app runs in sample mode: a sample person six weeks into a plan, two weeks of meals with photos, weigh-ins and an 11-day streak. Sample AI answers come from the device and are labelled as samples. Setting the Supabase values switches every service to the backend with no code change.
Key features
Today: kcal left beside one ring, compact protein, carbs and fat tiles, the meals of the day with photos, water glasses and the streak
Scan tab: camera with meal, barcode and label modes, photo library, and a describe-in-words option; the free scans left are shown
Review meal: the dish, confidence (high, medium, low), kcal and macros, a short AI note, each food with a portion stepper, the meal slot
Meal and food detail: change a portion, swap a food for a close one, move to another meal, favourite, delete
Progress: weight line with the goal, a weigh-in sheet that updates the plan, calories against the target, a streak calendar
Coach: a chat that sends the last seven days of totals and dish names with the question
You: targets, units, meal and weigh-in reminders as local notifications, Pro status, Delete my data, About, Terms and Privacy
Screens
28 screens: Welcome, eight one-question onboarding steps with large option cards, Your plan, Pro paywall, Today, Progress with a log-weight sheet, Scan, Review meal, Meal, Edit food, Add food search, Describe a meal, the add-food sheet, Coach, You, Goals and targets, Reminders, About, Terms of Use and Privacy Policy. Light and dark schemes; iOS Liquid Glass chrome.
AI and backend
One Supabase Edge Function (ai) runs three tasks with Gemini: analyze-meal (2 units, photo or label), describe-meal (1 unit) and coach-reply (1 unit, Pro only)
Each request takes units from a daily allowance kept in Supabase; units are given back when a task fails
People are signed in anonymously; meals, meal items, weigh-ins and the profile live in Postgres tables with row-level security
Scanned meal photos are kept in a private storage bucket and shown through signed URLs
The app asks once before the first AI call and names what is sent; Delete my data removes the backend rows and AI files
Calorie and macro targets are arithmetic on the device; no AI is used for them
Monetisation
Morsel Pro is a subscription sold through the App Store and Google Play with RevenueCat (react-native-purchases): a yearly plan with a 3-day trial and a weekly plan. Pro raises the AI allowance and unlocks the coach and all insights. Without RevenueCat keys the paywall shows sample prices and the line "Subscriptions open in the App Store version" and never grants access. A RevenueCat webhook function writes Pro to Supabase so the server allowance follows the purchase.
Setup
Connect Supabase, apply the two migrations and enable anonymous sign-ins
Add GEMINI_API_KEY and deploy the ai function, with your own daily unit limits
Connect RevenueCat to sell Pro and deploy the webhook
Replace the name, icon, colours and legal pages
你将获得
- 完整源码 — 使用 TypeScript 的 Expo 和 React Native,作为你工作区中的一个应用。
- 实时预览 — 在浏览器或手机上试用每项更改。
- 已验证版本 — 可编译,每个界面都能无错误打开。
- AI 助手 — 用聊天修改任何内容;每次修改会消耗积分。
- 构建与上架 — iOS 和 Android 构建,从发布页发送到 App Store 和 Google Play。
- 复制不耗积分 — 复制本身不收费。
使用当前版本的 FluxNative 制作。
你需要什么
- FluxNative 账号 — 免费套餐最多可有 2 个应用。
- 无需先接后端 — 在你连接自己的后端之前,它使用示例数据运行。
- Creator 或更高套餐 — 用于原生构建和上架。
- 商店账号 — Apple Developer Program(每年 99 美元)和 Google Play(一次性 25 美元),用于发布。
源码里有什么
- 个界面
- 19
- 个文件(副本中)
- 382
- 行为此应用编写的代码
- 7,828
- 个现成 UI 组件
- 142
应用文本语言:英语和越南语
技术栈
- Expo SDK
- 57.0.22
- React Native
- 0.86.3
- React
- 19.2.8
- TypeScript
- 6.0.3
- Expo Router
- 57.0.21
- Supabase JS
- 2.112.3
- RevenueCat
- 10.9.1
来自此版本的 package.json。
设计系统
- 标题
- 系统字体
- 正文
- 系统字体
- 支持浅色和深色模式
- Liquid Glass
- 胶囊按钮
- 悬浮卡片
复刻后的设置
你的副本会和构建它的 AI 助手一起打开。按顺序完成步骤:某一步需要连接的内容,请在 Server 中连接,然后发送每条提示词。
Connect Supabase
Server › Backend › Supabase. Apply both migrations in supabase/migrations, turn on anonymous sign-ins in the Supabase dashboard, and write the project URL and anon key to .env. The app then reads and writes your database instead of the sample log.
给 AI 的提示词Connect this app to my Supabase project from Server › Backend › Supabase. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Apply supabase/migrations/20261019000000_ai_kit.sql and then supabase/migrations/20261019010000_morsel.sql. Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, because the app signs people in anonymously. Then check that Today loads with an empty log and that onboarding saves a row in profiles.
Turn on the AI
Server › API keys & secrets: add GEMINI_API_KEY, deploy the ai function and the webhook function Pro uses, and set AI_FREE_UNITS_PER_DAY and AI_PRO_UNITS_PER_DAY. Morsel's free plan is 6 units a day: 3 photo scans (2 units each).
给 AI 的提示词Turn on Morsel's AI. Ask me to add GEMINI_API_KEY under Server › API keys & secrets, then set AI_FREE_UNITS_PER_DAY=6 (3 photo scans a day) and AI_PRO_UNITS_PER_DAY=500 there. Deploy the Supabase Edge Functions ai and revenuecat-webhook (revenuecat-webhook with JWT verification off) and push the secrets. Invoke ai with { "task": "usage" } as a test user to confirm it answers, then scan a meal in the app and confirm the review shows a real estimate instead of the sample line.
Sell Morsel Pro
Server › Monetization: create the yearly (3-day trial) and weekly products, the RevenueCat entitlement pro and an offering, add the public SDK keys, and set the webhook with REVENUECAT_WEBHOOK_SECRET so Pro reaches the server.
给 AI 的提示词Set up Morsel Pro through RevenueCat from Server › Monetization. Create a yearly subscription with a 3-day free trial and a weekly subscription in App Store Connect and Google Play, an entitlement named pro and a current offering with both packages. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env. Save a long random REVENUECAT_WEBHOOK_SECRET under Server › API keys & secrets, push it to the revenuecat-webhook function, and tell me the webhook URL and Authorization header to enter in RevenueCat › Integrations › Webhooks. Update PLAN_PREVIEW in src/services/iap/index.ts to match my prices.
Check the camera, barcodes and reminders on a phone
The camera, barcode reading and reminder notifications run only in a phone build; the browser preview shows a labelled sample plate. Build once and try a scan, a barcode and a reminder.
给 AI 的提示词Make a phone build of Morsel and walk me through checking the parts the browser preview cannot run: allow the camera and scan a meal, switch to Barcode and scan a packaged food (Open Food Facts lookup), photograph a nutrition label, and turn on a meal reminder in You › Reminders to confirm the notification permission prompt and a scheduled reminder.
Set your icon, store IDs and legal pages
Change the app name, bundle ID, icon, brand colour and legal pages: EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL, and the in-app Terms and Privacy text.
给 AI 的提示词Rebrand this Morsel template as my app. Change the name and slug in app.json and the bundle ID and Android package, replace assets/icon.svg and assets/adaptive-icon.svg with my icon and render the PNGs, and set brandSeed in src/theme/brand.ts to my colour (keep primary buttons ink). Write my EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL to .env, and rewrite src/features/legal/TermsScreen.tsx and PrivacyScreen.tsx with my company's terms. Replace the word Morsel in on-screen copy, notifications and the AI prompts in the server's ai function (functions/ai/tasks.ts).
如何使用此模板
许可与支持
许可
为你生成的应用归你所有;模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
由 FluxNative 制作
支持政策常见问题
免费吗?
复制免费模板不收费,也不耗积分;Premium 模板按网站一次性购买。聊天修改和构建会消耗积分。
我拥有什么?
为你生成的应用归你所有。模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
需要懂代码吗?
不需要。用日常语言让助手修改;需要时随时可看完整源码。
自带后端吗?
不带。完整应用会写明所需后端,你在 Server 中连接自己的;设计模板使用示例数据运行。
可以改设计吗?
可以。设计标签页可设置品牌色、颜色、字体和圆角,不耗积分;其余由助手修改。
发布需要哪个套餐?
Creator 或更高套餐,用你自己的 Apple 和 Google 账号构建并上传到商店。Premium 模板的应用在连接其网站后,任何套餐都能构建。
能下载源码吗?
可以,使用“下载源码”或“推送到 GitHub”,前提是你的工作区已购买套餐、积分或付费模板。Premium 模板的应用还需连接其网站。
如果是用较早版本的 FluxNative 做的呢?
你的副本照常可用。让助手把它更新到较新的功能,如应用语言和货币;这是最后一个设置步骤。
准备好打造你的应用了吗?
从 Morsel AI Calorie Tracker App 开始,通过聊天修改任何内容。你的副本包含完整源代码。
免费复刻,无需信用卡。