라이프스타일 템플릿
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 계정 — Free 플랜은 앱을 2개까지 가질 수 있어요.
- 시작에 백엔드 불필요 — 내 것을 연결할 때까지 샘플 데이터로 실행돼요.
- Creator 이상 — 네이티브 빌드와 스토어 업로드용이에요.
- 스토어 계정 — 게시하려면 Apple Developer Program(연 99달러)과 Google Play(1회 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.
이 템플릿 사용 방법
- 템플릿을 사용하면 소스가 포함된 편집 가능한 사본이 워크스페이스에 생겨요(템플릿).
- 원하는 변경을 AI 어시스턴트에게 평소 말투로 요청하세요(어시스턴트와 작업하기).
- 각 변경은 실시간 미리보기나 휴대폰에서 확인하세요(미리보기).
- Creator 이상 플랜에서 iOS와 Android용으로 빌드해 스토어에 제출하세요(게시 개요).
라이선스와 지원
라이선스
나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유로 남으며 내 앱에서 쓰도록 라이선스돼요(약관 › 당사의 지식재산).
FluxNative 제작
지원 정책질문
무료인가요?
무료 템플릿 복사는 크레딧도 들지 않아요. Premium은 웹사이트당 1회 구매예요. 채팅 변경과 빌드에는 크레딧을 써요.
무엇을 소유하나요?
나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유이고 내 앱에서 쓸 수 있도록 라이선스돼요(이용약관 › 당사의 지적 재산).
코드를 알아야 하나요?
아니요. 어시스턴트에게 쉬운 말로 변경을 요청하세요. 필요하면 전체 소스도 있어요.
백엔드가 포함되나요?
아니요. 완전한 앱은 필요한 백엔드를 알려 주고, 서버에서 내 것을 연결해요. 디자인은 샘플 데이터로 실행돼요.
디자인을 바꿀 수 있나요?
네. 디자인 탭에서 브랜드 색, 색상, 글꼴, 모서리를 크레딧 없이 설정해요. 나머지는 어시스턴트가 바꿔요.
게시하려면 어떤 플랜이 필요한가요?
Creator 이상이면 내 Apple·Google 계정으로 빌드하고 스토어에 업로드해요. Premium 템플릿의 앱은 웹사이트를 연결하면 어떤 플랜이든 빌드돼요.
소스를 다운로드할 수 있나요?
네. 작업 공간에서 플랜, 크레딧 또는 유료 템플릿을 구매했다면 소스 다운로드나 GitHub 푸시로 가능해요. Premium 템플릿의 앱은 웹사이트 연결도 필요해요.
이전 FluxNative로 만들었다면요?
복사본은 그대로 작동해요. 앱 언어와 통화 같은 새 기능은 어시스턴트에게 업데이트를 요청하세요. 마지막 설정 단계예요.
내 앱으로 만들어 볼까요?
Verdant AI Plant Identifier and Care App에서 시작해 채팅으로 무엇이든 바꾸세요. 사본에는 전체 소스 코드가 포함돼요.
무료로 복사하세요. 신용카드는 필요 없어요.