美食佳饮模板
Ramekin Recipe Box and Meal Planner App
A recipe box app: save recipes from a link, a cookbook page or a family card with AI, cook one step at a time with timers, plan the week's dinners and shop from one shared list.
- 33 个界面
- iOS 和 Android
- 示例数据
- 更新于 2026年11月4日
- 已验证版本
免费复制 · 完整源码 · 无需信用卡
界面
来自实际运行应用的 6 个界面。
包含内容
- Save a recipe from a link, photos of a page or card, or pasted text, and check each line before it is saved
- Cook mode: one step at a time, the ingredients each step uses, and timers that ring as notifications
- Plan the week's dinners from your own recipes, with Leftovers and Eating out nights
- One grocery list for the household: amounts add up, aisles in shop order, and who ticked what
- Adapt a recipe with AI, and What can I make? from a photo of the fridge
- Ramekin Pro through RevenueCat; opens on a sample kitchen before any backend is connected
关于此模板
Overview
Ramekin is a recipe box for home cooks who collect recipes everywhere: blogs, cookbooks, captions and a parent's handwritten cards. Save one in seconds, cook it one step at a time with the timers its steps name, plan the week's dinners from your own recipes and shop from one list the household shares.
The look is bright and photo-led: a white page, near-black ink and one cobalt accent that marks what is chosen (tonight's dinner, ticked items, the running timer), with a designed dark mode where the food photos glow. A recipe without a photo gets a typographic cover instead of an icon.
Key features
Today: tonight's dinner with Start cooking and Swap, the coming days and the list's progress
Recipe: servings that scale, US or Metric, ingredients that tick, and Add to list
Save a recipe: the reader's answer line by line, unsure amounts marked to check
Cook mode: large step text, the step's ingredients and timers that keep running across steps
Plan: the household's week, a dinner per day, Plan my week (Pro) and Shop for this week
List: one list for the household, aisles in shop order, staples hidden, Clear bought
Screens
Welcome, onboarding (who you cook for and a first recipe), Today, Recipes with collections and search, a recipe, Edit and New recipe, cook mode and its done screen, Plan, a day's dinner, Plan my week, List, What can I make?, Save a recipe (link, photos, pasted text), reading and Check the recipe, the AI notice, Adapt with AI, Collections and a collection, Household with an invite code, Settings, Keep your kitchen, What you don't eat, Cooked history, the paywall, Terms, Privacy and About: 33 screens, light and dark.
AI and backend
Supabase keeps each household's recipes, collections, plan, list, cook logs and photos, readable only by its members; the plan and the list update live on every phone in the household. Each install signs in anonymously, and an email with a 6-digit code keeps the kitchen on a new phone. One Edge Function runs the AI tasks with Gemini (read a link, photos or pasted text, adapt a recipe, plan the week, read the fridge) against a daily allowance; scaling, unit conversion, timers and the grocery merge run on the phone without AI.
Monetisation
Ramekin Pro through RevenueCat, yearly with a 7-day free trial or monthly: Plan my week, Adapt with AI, What can I make? and 200 AI units a day instead of 3. Saving, cooking, planning and the shared list stay free.
Setup
It opens on a sample kitchen with no setup: a household of two, 18 recipes, this week's plan and a list. Connect Supabase for accounts and the shared kitchen, add your Gemini key for the AI reader, then RevenueCat for Pro. Reminders and kitchen timers are local notifications.
你将获得
- 完整源码 — 使用 TypeScript 的 Expo 和 React Native,作为你工作区中的一个应用。
- 实时预览 — 在浏览器或手机上试用每项更改。
- 已验证版本 — 可编译,每个界面都能无错误打开。
- AI 助手 — 用聊天修改任何内容;每次修改会消耗积分。
- 构建与上架 — iOS 和 Android 构建,从发布页发送到 App Store 和 Google Play。
- 复制不耗积分 — 复制本身不收费。
使用当前版本的 FluxNative 制作。
你需要什么
- FluxNative 账号 — 免费套餐最多可有 2 个应用。
- 无需先接后端 — 在你连接自己的后端之前,它使用示例数据运行。
- Creator 或更高套餐 — 用于原生构建和上架。
- 商店账号 — Apple Developer Program(每年 99 美元)和 Google Play(一次性 25 美元),用于发布。
源码里有什么
- 个界面
- 33
- 个文件(副本中)
- 489
- 行为此应用编写的代码
- 1.7万
- 个现成 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 and apply Ramekin's migrations
Server › Backend › Supabase. Apply the three migrations in supabase/migrations in name order, turn on anonymous sign-ins in Authentication, and keep their rate limit per IP low.
给 AI 的提示词Connect this app to my Supabase project: set EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY, apply the migrations in supabase/migrations in name order, and walk me through allowing anonymous sign-ins with a low rate limit per IP. Then check that a new install gets its own empty kitchen.
Send 6-digit codes from Supabase
Keep the Email provider on and put {{ .Token }} in the Magic Link and Change Email Address templates, so Keep your kitchen and signing in on a new phone use a code.
给 AI 的提示词Walk me through Supabase Authentication: put the {{ .Token }} code in the Magic Link and Change Email Address templates, then test Keep your kitchen with my email.
Add the Gemini key under API keys & secrets
Server › API keys & secrets: GEMINI_API_KEY, AI_FREE_UNITS_PER_DAY=3 and AI_PRO_UNITS_PER_DAY=200. Saving from a link, photos or text, Adapt, Plan my week and What can I make? use them.
给 AI 的提示词Add GEMINI_API_KEY, AI_FREE_UNITS_PER_DAY=3 and AI_PRO_UNITS_PER_DAY=200 as secrets for the ai function.
Deploy the AI and account functions
Deploy supabase/functions/ai and supabase/functions/delete-account (JWT verification on), then check the allowance with the usage task.
给 AI 的提示词Deploy the ai and delete-account Edge Functions in supabase/functions with my secrets (JWT verification on for both), then call the ai function with { "task": "usage" } and save a recipe from a link in the app.
Sell Ramekin Pro with RevenueCat
Server › Monetization: an entitlement "pro", a yearly package with a 7-day free trial and a monthly one, the public SDK keys, and the webhook URL with its secret.
给 AI 的提示词Set up Ramekin Pro with RevenueCat: entitlement pro, an offering with $rc_annual (7-day free trial) and $rc_monthly, add EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY, set REVENUECAT_WEBHOOK_SECRET, deploy the revenuecat-webhook function with JWT verification off and register its URL in RevenueCat.
Fill a sample kitchen for App Review
Make a demo account with Keep your kitchen, then load the sample kitchen into its household with load_sample_kitchen, so reviewers see recipes, a plan and a list.
给 AI 的提示词Help me make an App Review demo account: after I save my kitchen with the demo email in the app, find its household in Supabase and run select public.load_sample_kitchen('<household id>'); as the README's App Review section says.
如何使用此模板
许可与支持
许可
为你生成的应用归你所有;模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
由 FluxNative 制作
支持政策常见问题
免费吗?
复制免费模板不收费,也不耗积分;Premium 模板按网站一次性购买。聊天修改和构建会消耗积分。
我拥有什么?
为你生成的应用归你所有。模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
需要懂代码吗?
不需要。用日常语言让助手修改;需要时随时可看完整源码。
自带后端吗?
不带。完整应用会写明所需后端,你在 Server 中连接自己的;设计模板使用示例数据运行。
可以改设计吗?
可以。设计标签页可设置品牌色、颜色、字体和圆角,不耗积分;其余由助手修改。
发布需要哪个套餐?
Creator 或更高套餐,用你自己的 Apple 和 Google 账号构建并上传到商店。Premium 模板的应用在连接其网站后,任何套餐都能构建。
能下载源码吗?
可以,使用“下载源码”或“推送到 GitHub”,前提是你的工作区已购买套餐、积分或付费模板。Premium 模板的应用还需连接其网站。
如果是用较早版本的 FluxNative 做的呢?
你的副本照常可用。让助手把它更新到较新的功能,如应用语言和货币;这是最后一个设置步骤。
准备好打造你的应用了吗?
从 Ramekin Recipe Box and Meal Planner App 开始,通过聊天修改任何内容。你的副本包含完整源代码。
免费复刻,无需信用卡。