본문으로 건너뛰기

건강 및 피트니스 템플릿

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개

포함된 내용

  1. Meal photo, nutrition label and text estimates through Gemini, called from the included Supabase Edge Function
  2. Review screen before logging: confidence in words, editable portions, remove with undo, add foods
  3. Plan computed on the device (Mifflin-St Jeor): daily kcal, macros, goal date and a weekly projection
  4. Barcode lookup through Open Food Facts plus a built-in list of common foods for search
  5. Progress: weight trend against the goal, 7-day calories, macro averages, streak calendar, insights
  6. 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

aicalorie trackermacro trackernutritionmeal scannergeminisupabaserevenuecatreact nativeexpoiosandroid

제공 내용

  • 전체 소스 — TypeScript로 된 Expo와 React Native, 작업 공간의 앱으로 받아요.
  • 라이브 미리보기 — 모든 변경을 브라우저나 휴대폰에서 바로 확인해요.
  • 검증된 릴리스 — 컴파일되고 모든 화면이 오류 없이 열려요.
  • AI 어시스턴트 — 채팅으로 무엇이든 바꿔요. 변경마다 크레딧을 써요.
  • 빌드와 스토어 업로드 — iOS와 Android 빌드를 게시에서 App Store와 Google Play로 보내요.
  • 복사에 크레딧 불필요 — 복사 자체는 크레딧이 들지 않아요.

최신 버전의 FluxNative로 만들었어요.

필요한 것

  • FluxNative 계정 — Free 플랜은 앱을 2개까지 가질 수 있어요.
  • 시작에 백엔드 불필요 — 내 것을 연결할 때까지 샘플 데이터로 실행돼요.
  • Creator 이상 — 네이티브 빌드와 스토어 업로드용이에요.
  • 스토어 계정 — 게시하려면 Apple Developer Program(연 99달러)과 Google Play(1회 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에서 하고, 각 프롬프트를 보내세요.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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).

이 템플릿 사용 방법

  1. 템플릿을 사용하면 소스가 포함된 편집 가능한 사본이 워크스페이스에 생겨요(템플릿).
  2. 원하는 변경을 AI 어시스턴트에게 평소 말투로 요청하세요(어시스턴트와 작업하기).
  3. 각 변경은 실시간 미리보기나 휴대폰에서 확인하세요(미리보기).
  4. Creator 이상 플랜에서 iOS와 Android용으로 빌드해 스토어에 제출하세요(게시 개요).

라이선스와 지원

라이선스

나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유로 남으며 내 앱에서 쓰도록 라이선스돼요(약관 › 당사의 지식재산).

도움말

  • 템플릿, 어시스턴트, 게시 가이드.
  • 도움말에서 지원팀에 문의하세요. 보통 영업일 기준 1~2일 안에 답해요.
  • 복사본에서 어떤 화면이나 파일이든 AI 어시스턴트에게 물어보세요.

FluxNative 제작

지원 정책

질문

무료인가요?

무료 템플릿 복사는 크레딧도 들지 않아요. Premium은 웹사이트당 1회 구매예요. 채팅 변경과 빌드에는 크레딧을 써요.

무엇을 소유하나요?

나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유이고 내 앱에서 쓸 수 있도록 라이선스돼요(이용약관 › 당사의 지적 재산).

코드를 알아야 하나요?

아니요. 어시스턴트에게 쉬운 말로 변경을 요청하세요. 필요하면 전체 소스도 있어요.

백엔드가 포함되나요?

아니요. 완전한 앱은 필요한 백엔드를 알려 주고, 서버에서 내 것을 연결해요. 디자인은 샘플 데이터로 실행돼요.

디자인을 바꿀 수 있나요?

네. 디자인 탭에서 브랜드 색, 색상, 글꼴, 모서리를 크레딧 없이 설정해요. 나머지는 어시스턴트가 바꿔요.

게시하려면 어떤 플랜이 필요한가요?

Creator 이상이면 내 Apple·Google 계정으로 빌드하고 스토어에 업로드해요. Premium 템플릿의 앱은 웹사이트를 연결하면 어떤 플랜이든 빌드돼요.

소스를 다운로드할 수 있나요?

네. 작업 공간에서 플랜, 크레딧 또는 유료 템플릿을 구매했다면 소스 다운로드나 GitHub 푸시로 가능해요. Premium 템플릿의 앱은 웹사이트 연결도 필요해요.

이전 FluxNative로 만들었다면요?

복사본은 그대로 작동해요. 앱 언어와 통화 같은 새 기능은 어시스턴트에게 업데이트를 요청하세요. 마지막 설정 단계예요.

내 앱으로 만들어 볼까요?

Morsel AI Calorie Tracker App에서 시작해 채팅으로 무엇이든 바꾸세요. 사본에는 전체 소스 코드가 포함돼요.

무료로 복사하세요. 신용카드는 필요 없어요.

Taking a little longer than usual…

Loading FluxNative