生活模板
Verdant AI Plant Identifier and Care App
An Expo and React Native app that identifies plants from a photo, checks sick leaves and schedules watering. It runs on sample data out of the box; connect Supabase and a Gemini key to make the AI real.
- 22 个界面
- iOS 和 Android
- 示例数据
- 更新于 2026年11月4日
- 已验证版本
免费复制 · 完整源码 · 无需信用卡
界面
来自实际运行应用的 6 个界面。
包含内容
- Identify a plant from a photo: best match, two look-alikes, confidence in words, pet safety and care at a glance
- Health check of a sick leaf: likely issue, marked spots on the photo, this week's steps as a checklist
- My plants by room, care rings and reminders derived from each plant's watering and feeding schedule
- "Ask about this plant" chat that knows the plant's species, room, watering and last health check
- Three AI tasks (identify, diagnose, plant-chat) run on Gemini through one Supabase Edge Function
- Sample mode: a 12-plant sample garden and designed sample AI answers, no backend needed
关于此模板
Overview
Verdant is a complete plant identifier and care app on Expo SDK 57 and React Native. People point the camera at a plant to name it, photograph a sick leaf to see the likely problem and what to do this week, keep their plants by room with a care schedule, and ask questions about one plant. The look is bright and photo-led: white pages, real plant photos, a near-black capsule for the main action and a fresh green accent.
With .env blank it runs in sample mode: a labelled sample garden of 12 plants in 4 rooms (3 due today), a sample health history, and designed sample AI answers marked "Sample results". What the person adds is saved on the device. Connecting Supabase and a Gemini key switches every service to the live backend without code changes.
Key features
Camera with a framing guide, Identify and Diagnose modes, the photo library and snap tips; the web preview shows a labelled sample photo
Identification result: the photo full width, best match, confidence as words and a three-bar meter, why it matches, pet toxicity, light, water, humidity and temperature, two look-alikes to switch to with Undo
Health check: marked spots on the leaf, issue, signs, steps checklist, what to watch, a check-in reminder, Mark as better
My plants: photo grid by room, "N plants need water" with Water all and Undo; each plant has care rings, a photo timeline, notes, health history and a watering-rhythm chart
Reminders: today's done/due ring, a 7-day strip and local notifications at the person's time (Free covers 5 plants, Pro all)
A 17-species care guide with search, problems and similar plants
Onboarding with photo cards, a paywall, You (rooms, units, Delete my data), About, in-app Terms and Privacy, light and dark
Screens
22 screens: My plants, Identify, Identification result, Species guide, Plant health, Health check, My plant, Ask about this plant, Edit plant, Add plant, Find a plant, Reminders, You, Rooms, Welcome, Onboarding (value steps and "What do you grow?"), Verdant Pro, Photo credits, Terms, Privacy and About.
AI and backend
identify (vision, 2 units): photo in, three matches with high/medium/low confidence, care and pet safety out
diagnose (vision, 2 units): leaf photo in, issue, confidence, signs, steps, what to watch and up to 3 spots out; free accounts get one check
plant-chat (text, 1 unit): a question with the plant's care record, a short answer out
The app calls one Supabase Edge Function (ai) with an anonymous session; it charges units from a daily allowance and calls Gemini with your key
Supabase tables for rooms, plants, care events, plant photos and scans under per-user row-level security, plus a private photo bucket
The app asks once before the first photo or question goes to the AI provider; only what the person chooses is sent
Monetisation
Free: 3 identifications a day, 1 health check, phone reminders for 5 plants. Pro (yearly with a 7-day trial, or monthly) removes the limits. Purchases go through RevenueCat (react-native-purchases) and a webhook tells the server who has Pro. Until you connect RevenueCat to sell, the paywall shows sample prices and "Subscriptions open in the App Store version"; nothing is sold and Pro is never granted.
Reskin and photo credits
The plant words, care facets, care tasks, camera modes, onboarding choices and free limits live in src/config/domain.ts; the species in src/config/catalogue.ts; the server prompts take their domain words from DOMAIN in supabase/functions/ai/tasks.ts. The 50 bundled sample photos are CC0 or CC BY from Wikimedia Commons, iNaturalist, the WordPress photo directory and rawpixel, plus the kernel's Unsplash photos. Keep the in-app Photo credits page if you keep the photos, or replace the photos with your own.
Setup
Connect Supabase and apply the migrations, turn on the AI with your Gemini key and deploy the functions, connect RevenueCat to sell Pro, then make it yours. The README has each step.
你将获得
- 完整源码 — 使用 TypeScript 的 Expo 和 React Native,作为你工作区中的一个应用。
- 实时预览 — 在浏览器或手机上试用每项更改。
- 已验证版本 — 可编译,每个界面都能无错误打开。
- AI 助手 — 用聊天修改任何内容;每次修改会消耗积分。
- 构建与上架 — iOS 和 Android 构建,从发布页发送到 App Store 和 Google Play。
- 复制不耗积分 — 复制本身不收费。
使用当前版本的 FluxNative 制作。
你需要什么
- FluxNative 账号 — 免费套餐最多可有 2 个应用。
- 无需先接后端 — 在你连接自己的后端之前,它使用示例数据运行。
- Creator 或更高套餐 — 用于原生构建和上架。
- 商店账号 — Apple Developer Program(每年 99 美元)和 Google Play(一次性 25 美元),用于发布。
源码里有什么
- 个界面
- 22
- 个文件(副本中)
- 429
- 行为此应用编写的代码
- 8,212
- 个现成 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 the two migrations, allow anonymous sign-ins in the Supabase dashboard, and write the public URL and anon key to .env. Until then the app runs on sample data.
给 AI 的提示词Connect this app to my Supabase project (Server › Backend › Supabase). Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Apply supabase/migrations/20261019000000_ai_kit.sql, then supabase/migrations/20261019010000_verdant.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 My plants loads an empty garden from Supabase instead of the sample garden.
Turn on the AI
Server › API keys & secrets: add GEMINI_API_KEY. Deploy the ai function and push its secrets. Set AI_FREE_UNITS_PER_DAY to 6 (3 identifications a day) and AI_PRO_UNITS_PER_DAY to 500.
给 AI 的提示词Turn on Verdant's AI. I added GEMINI_API_KEY under Server › API keys & secrets. Set AI_FREE_UNITS_PER_DAY to 6 and AI_PRO_UNITS_PER_DAY to 500 as secrets too. Deploy the supabase/functions/ai function and push its secrets, then invoke it with { "task": "usage" } as a test user and show me the answer. Do not change the tasks in supabase/functions/ai/tasks.ts.
Sell Pro with RevenueCat
Server › Monetization: connect RevenueCat (yearly with a 7-day trial and monthly products, entitlement "pro"). Save REVENUECAT_WEBHOOK_SECRET, deploy revenuecat-webhook with JWT verification off, add the webhook in RevenueCat.
给 AI 的提示词Set up Verdant Pro through RevenueCat. Connect RevenueCat under Server › Monetization so EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY are in .env. The entitlement is "pro"; the plans are yearly with a 7-day free trial and monthly (keep PLAN_PREVIEW in src/services/iap/index.ts in step with my prices). Generate a long random REVENUECAT_WEBHOOK_SECRET under Server › API keys & secrets, deploy supabase/functions/revenuecat-webhook with JWT verification off, push the secret, and tell me the webhook URL and Authorization header to paste into RevenueCat › Integrations › Webhooks.
Camera and reminders on a phone build
The camera (expo-camera) and care reminders (expo-notifications) need a native build; the web preview shows a sample photo instead of the camera. Check the permission texts in app.json first.
给 AI 的提示词Prepare Verdant for its first phone build. Review the camera and photo library permission texts in app.json (NSCameraUsageDescription, NSPhotoLibraryUsageDescription and the expo-camera and expo-image-picker plugins) and make them name my app. Keep expo-camera and expo-notifications in the build. Then tell me how to test identification with the real camera and a care reminder on a device.
Set your icon, store IDs and legal pages
Rename the app, set your icon and colours, and point the legal links at your pages. Replace the in-app Terms and Privacy words or set the hosted page URLs.
给 AI 的提示词Make this app mine: rename Verdant to my app's name everywhere a person sees it (app.json name, About, paywall, onboarding, prompts), change the bundle ID and package from com.fluxnative.verdant, draw a new icon in assets/icon.svg and assets/adaptive-icon.svg and render the PNGs, and set my brand colour in src/theme/brand.ts (keep the near-black buttons unless I say otherwise). Set EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL in .env if I have hosted pages, otherwise rewrite the in-app Terms and Privacy pages in src/features/legal for my business. Keep the Photo credits page while the sample photos stay.
如何使用此模板
许可与支持
许可
为你生成的应用归你所有;模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
由 FluxNative 制作
支持政策常见问题
免费吗?
复制免费模板不收费,也不耗积分;Premium 模板按网站一次性购买。聊天修改和构建会消耗积分。
我拥有什么?
为你生成的应用归你所有。模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
需要懂代码吗?
不需要。用日常语言让助手修改;需要时随时可看完整源码。
自带后端吗?
不带。完整应用会写明所需后端,你在 Server 中连接自己的;设计模板使用示例数据运行。
可以改设计吗?
可以。设计标签页可设置品牌色、颜色、字体和圆角,不耗积分;其余由助手修改。
发布需要哪个套餐?
Creator 或更高套餐,用你自己的 Apple 和 Google 账号构建并上传到商店。Premium 模板的应用在连接其网站后,任何套餐都能构建。
能下载源码吗?
可以,使用“下载源码”或“推送到 GitHub”,前提是你的工作区已购买套餐、积分或付费模板。Premium 模板的应用还需连接其网站。
如果是用较早版本的 FluxNative 做的呢?
你的副本照常可用。让助手把它更新到较新的功能,如应用语言和货币;这是最后一个设置步骤。
准备好打造你的应用了吗?
从 Verdant AI Plant Identifier and Care App 开始,通过聊天修改任何内容。你的副本包含完整源代码。
免费复刻,无需信用卡。