الانتقال إلى المحتوى

قالب المنزل

Hearth AI Room Redesign App

An Expo and React Native app that redesigns a photographed room in one of 12 interior styles with AI, with refine, wall colour, boards and Pro subscriptions. Runs on sample rooms with real AI redesigns until you connect Supabase.

  • 18 شاشة
  • iOS وAndroid
  • بيانات تجريبية
  • حُدّث في 4 نوفمبر 2026
  • إصدار موثّق

نسخ مجاني · الشيفرة كاملة · دون بطاقة ائتمان

الشاشات

6 شاشات من التطبيق الفعلي.

ما الذي يتضمنه

  1. Photo in, four redesigned versions of the same room out, each with a What changed list written by the AI
  2. Drag-to-compare before and after, plus Refine (brush an area), wall colours and furniture swaps as new versions
  3. Sample mode: six real rooms with real AI redesigns made from the same photos, so the app is complete before setup
  4. Three AI tasks (redesign-room, refine-area, recolor-walls) on Gemini through a Supabase Edge Function
  5. Daily credits checked on the server: 12 a day free, 100 a day with Pro, credits returned when a task fails
  6. Pro through RevenueCat: sample prices until you connect RevenueCat to sell

عن هذا القالب

Overview

Hearth is an AI room redesign app. A person photographs a room, picks the room type and one of 12 styles (Japandi, Mid-century, Scandinavian, Coastal, Boho, Organic modern, Industrial, Farmhouse, Minimal, Modern, Classic, Glam), and gets four redesigned versions that keep the room's walls, windows and floor. They compare before and after, refine a version, save ideas to boards and browse finished rooms in Explore.

It is built with Expo SDK 57 and React Native on the FluxNative kernel. With an empty .env it runs in sample mode: six real room photos with AI redesigns made in advance from those exact photos, three sample boards, and the same daily credit rule the server enforces. Connecting Supabase switches every service to the live backend with no code changes.

Key features

  • New design in four steps: photo (camera, library or a sample room), room type, style, options (keep the layout, colour palette, budget feel), with the credit cost on the Generate button.

  • Designing screen that names what the AI is doing, the usual time and the time so far, then reveals the versions. Leaving keeps the job running.

  • Result screen with the AI picture and the room before as an inset, a drag-to-compare slider, every version, and a What changed list.

  • Refine (brush an area and describe the change), Walls (seven paint colours) and Furniture (swap a piece); each adds a version and keeps the others.

  • Boards of saved designs and Explore photos; Explore with a style of the week, room and style filters, and Use this style.

  • Onboarding with large room and style cards; You tab with today's credits, taste, purchases, privacy and Delete my data.

  • Designed states for every AI failure: credits used up, refused, offline, not set up. Nothing is charged for a failure.

Screens

Design, New design, Designing, Result, Refine, Your designs, Boards, Board, Explore, Inspiration, You, Hearth Pro, Welcome, Onboarding, Terms of use, Privacy policy and About.

AI and backend

  • The ai Supabase Edge Function runs three tasks with Gemini: redesign-room (4 credits: four image edits and one vision pass for the What changed lists), refine-area (3) and recolor-walls (2).

  • Each person signs in anonymously. Photos and results go to a private storage bucket; designs, versions, boards and board items are Postgres tables with row-level security.

  • The room tasks write their own rows on the server, so a design finishes even if the app is closed.

  • Daily allowance per user in units, taken before a task and given back when it fails; Pro gets the larger allowance from the RevenueCat webhook.

  • Sample mode needs no backend: the sample rooms answer with their pre-made redesigns, and the camera, library, other styles and free-text edits say they open once the AI is connected.

Monetisation

Hearth Pro is a RevenueCat subscription with weekly and yearly plans. Without RevenueCat keys the paywall shows sample prices ($6.99 a week, $49.99 a year) with the note that subscriptions open in the App Store version, and never grants access. Connect RevenueCat to sell; purchases are logged in with the Supabase user id so the webhook raises that user's daily credits from 12 to 100.

Setup

Connect Supabase and apply the two migrations, add the Gemini key and deploy the functions, then connect RevenueCat to sell Pro. The README lists every value and what is sent to the AI provider.

aiinterior designroom redesignhome decorgeminisupabaserevenuecatreact nativeexpotemplate

ما تحصل عليه

  • الشيفرة كاملة — Expo وReact Native بلغة TypeScript، كتطبيق في مساحة عملك.
  • معاينة مباشرة — جرّب كل تغيير في المتصفح أو على هاتفك.
  • إصدار موثّق — يُبنى وتُفتح كل شاشة دون أخطاء.
  • مساعد الذكاء الاصطناعي — غيّر أي شيء بالمحادثة؛ كل تغيير يستهلك رصيدًا.
  • عمليات البناء والرفع إلى المتاجر — بناء iOS وAndroid، يُرسل إلى App Store وGoogle Play من Publish.
  • النسخ لا يستهلك رصيدًا — النسخ نفسه بلا تكلفة.

صُنع بالإصدار الحالي من FluxNative.

ما تحتاج إليه

  • حساب FluxNative — تتسع خطة Free لتطبيقين.
  • لا خادم خلفي للبدء — يعمل ببيانات تجريبية إلى أن تصل خادمك.
  • Creator أو أعلى — لعمليات البناء الأصلية والرفع إلى المتاجر.
  • حسابات المتاجر — Apple Developer Program (99 دولارًا أمريكيًا سنويًا) وGoogle Play (25 دولارًا أمريكيًا مرة واحدة)، للنشر.

ما الذي تتضمنه الشيفرة

شاشات
18
ملفات في نسختك
387
أسطر كُتبت لهذا التطبيق
6,981
مكوّنات واجهة جاهزة
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
  • أزرار كبسولية
  • بطاقات بسيطة

الإعداد بعد النسخ

تُفتح نسختك مع مساعد الذكاء الاصطناعي الذي بناها. نفّذ الخطوات بالترتيب: صِل ضمن Server ما تطلبه الخطوة، ثم أرسل كل موجّه.

  1. Connect Supabase

    In Server › Backend › Supabase: connect a project, apply both migrations, turn on anonymous sign-ins in the Supabase dashboard, and write the public URL and anon key to .env.

    طلب للذكاء الاصطناعي

    Connect this app to my Supabase project (Server › Backend › Supabase). Apply supabase/migrations/20261019000000_ai_kit.sql and then supabase/migrations/20261019120000_hearth.sql. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env (keep the keys, empty, in .env.example). Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, because Hearth signs every person in anonymously. Then check that the designs, design_variations, boards and board_items tables exist with row-level security on.

  2. Turn on the AI

    In Server › API keys & secrets: add GEMINI_API_KEY and set AI_FREE_UNITS_PER_DAY=12 and AI_PRO_UNITS_PER_DAY=100, then deploy the ai function and push its secrets.

    طلب للذكاء الاصطناعي

    Turn on Hearth's AI. In Server › API keys & secrets add GEMINI_API_KEY (I will paste it), AI_FREE_UNITS_PER_DAY=12 and AI_PRO_UNITS_PER_DAY=100. Deploy the ai Edge Function from supabase/functions/ai and push those secrets to it. Invoke it as a test user with { "task": "usage" } and show me the answer: it should report a limit of 12. Keep src/services/ai/allowance.ts (FREE_CREDITS_PER_DAY, PRO_CREDITS_PER_DAY) equal to the two secrets.

  3. Sell Pro

    In Server › Monetization: connect RevenueCat with an entitlement pro and weekly and yearly packages, add the public SDK keys, and deploy the webhook with REVENUECAT_WEBHOOK_SECRET.

    طلب للذكاء الاصطناعي

    Set up Hearth Pro (Server › Monetization). Connect RevenueCat with an entitlement named pro and a current offering with a weekly and a yearly package. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env. Save a long random REVENUECAT_WEBHOOK_SECRET in 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 enter in RevenueCat › Integrations › Webhooks. Update PLAN_PREVIEW in src/services/iap/index.ts to the prices I choose.

  4. Choose your styles and sample rooms

    Edit the 12 styles, paint colours and the Explore feed in the catalog; replace the sample rooms (photos and their AI redesigns) or keep them for the store demo.

    طلب للذكاء الاصطناعي

    Help me tailor Hearth's content. The styles, room types, paint colours and Explore photos live in src/services/catalog/index.ts and src/data/interiors.ts; the sample rooms and their pre-made redesigns are in src/data/samples.ts and assets/samples (credits in assets/samples/CREDITS.md). Show me the current list of styles and ask which to keep, rename or add; when I add a style, give it a cover photo, a short line, a palette and the descriptions the AI prompt uses.

  5. Set your icon, store IDs and legal pages

    Rename the app, draw its icon, set the colours and point the legal links at your own privacy policy, terms and support pages.

    طلب للذكاء الاصطناعي

    Make Hearth mine: rename the app to the name I give (app.json name, slug, scheme and bundle identifiers, the welcome screen and About), redesign the icon in assets/icon.svg and assets/adaptive-icon.svg and render the PNGs, set the accent colour in src/theme/brand.ts, and write EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL to .env (or update the in-app pages in src/features/legal) with my company's details.

كيفية استخدام هذا القالب

  1. استخدم القالب لتحصل على نسخة قابلة للتعديل، مع شيفرتها المصدرية، في مساحة عملك (القوالب).
  2. اطلب من مساعد الذكاء الاصطناعي التغييرات التي تريدها بكلمات بسيطة (العمل مع المساعد).
  3. جرّب كل تغيير في المعاينة المباشرة أو على هاتفك (المعاينة).
  4. مع خطة Creator أو أعلى، أنشئ إصدار iOS وAndroid وأرسله إلى المتاجر (نظرة عامة على النشر).

الترخيص والدعم

الترخيص

التطبيق الذي أُنشئ لك ملكك؛ وتبقى شيفرة القالب ملكًا لـ InspireUI ومرخّصة للاستخدام في تطبيقاتك (الشروط › ملكيتنا الفكرية).

المساعدة

  • أدلة عن القوالب والمساعد والنشر.
  • التواصل مع الدعم من المساعدة؛ نردّ عادةً خلال 1–2 يوم عمل.
  • في نسختك، اسأل مساعد الذكاء الاصطناعي عن أي شاشة أو ملف.

من صنع FluxNative

سياسة الدعم

أسئلة

هل هو مجاني؟

نسخ قالب مجاني لا يكلّف شيئًا، ولا حتى رصيدًا؛ والقالب Premium شراء لمرة واحدة لكل موقع. تغييرات المحادثة وعمليات البناء تستهلك رصيدًا.

ماذا أملك؟

أنت تملك التطبيق المصنوع لك. تبقى شيفرة القالب ملكًا لـInspireUI ومرخّصة للاستخدام في تطبيقاتك (Terms › Our intellectual property).

هل أحتاج إلى معرفة البرمجة؟

لا. اطلب التغييرات من المساعد بكلماتك؛ والشيفرة الكاملة متاحة متى شئت.

هل يأتي مع خادم خلفي؟

لا. يسمّي التطبيق الكامل الخادم الخلفي الذي يحتاجه وتصل خادمك ضمن Server؛ أما التصميم فيعمل ببيانات تجريبية.

هل أستطيع تغيير التصميم؟

نعم. يضبط تبويب Design لون العلامة والألوان والخطوط والزوايا دون رصيد؛ ويغيّر المساعد الباقي.

أي خطة أحتاج إليها للنشر؟

تبني خطة Creator أو أعلى وترفع إلى المتاجر بحساباتك في Apple وGoogle. يُبنى تطبيق القالب Premium على أي خطة بعد ربط موقعه.

هل أستطيع تنزيل الشيفرة؟

نعم، عبر Download source أو Push to GitHub، بعد أن تشتري مساحة عملك خطة أو رصيدًا أو قالبًا مدفوعًا. يحتاج تطبيق القالب Premium أيضًا إلى ربط موقعه.

ماذا لو صُنع بإصدار أقدم من FluxNative؟

تعمل نسختك كما هي. اطلب من المساعد تحديثها بميزات أحدث، مثل لغات التطبيق وعملاته؛ وهي آخر خطوة إعداد.

هل أنت مستعد لتجعله تطبيقك؟

ابدأ من Hearth AI Room Redesign App وغيّر أي شيء عبر الدردشة. تتضمن نسختك الشيفرة المصدرية كاملة.

نسخ مجاني. لا حاجة إلى بطاقة ائتمان.

Taking a little longer than usual…

Loading FluxNative