Zum Inhalt springen

Haus & Garten-Vorlage

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 Screens
  • iOS & Android
  • Beispieldaten
  • Aktualisiert am 4. Nov. 2026
  • Geprüfte Version

Gratis kopieren · Voller Quellcode · Keine Kreditkarte

Screens

6 Screens aus der laufenden App.

Was drinsteckt

  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

Über diese Vorlage

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

Das bekommst du

  • Voller Quellcode — Expo und React Native in TypeScript, als App in deinem Workspace.
  • Live-Vorschau — probiere jede Änderung im Browser oder auf deinem Handy aus.
  • Geprüfte Version — sie kompiliert und jeder Screen öffnet ohne Fehler.
  • KI-Assistent — ändere alles per Chat; jede Änderung kostet Credits.
  • Builds und Store-Upload — iOS- und Android-Builds, aus Veröffentlichen an App Store und Google Play gesendet.
  • Keine Credits fürs Kopieren — die Kopie selbst kostet keine.

Mit der aktuellen Version von FluxNative erstellt.

Das brauchst du

  • Ein FluxNative-Konto — der Free-Tarif fasst bis zu 2 Apps.
  • Kein Backend zum Start — läuft mit Beispieldaten, bis du deines verbindest.
  • Creator oder höher — für native Builds und Store-Upload.
  • Store-Konten — Apple Developer Program (99 US$ im Jahr) und Google Play (25 US$ einmalig), zum Veröffentlichen.

Was im Quellcode steckt

Screens
18
Dateien in deiner Kopie
387
Codezeilen eigens für diese App
6.981
fertige UI-Komponenten
142

App-Texte auf Englisch und Vietnamesisch

Tech-Stack

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

Aus der package.json dieser Version.

Designsystem

Überschriften
Systemschrift
Fließtext
Systemschrift
  • Heller und dunkler Modus
  • Liquid Glass
  • Kapsel-Buttons
  • Schlichte Karten

Einrichtung nach dem Fork

Deine Kopie öffnet sich mit dem KI-Assistenten, der sie gebaut hat. Geh die Schritte der Reihe nach durch: Verbinde unter Server, was ein Schritt verlangt, und sende dann jeden Prompt.

  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.

    Prompt für die KI

    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.

    Prompt für die KI

    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.

    Prompt für die KI

    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.

    Prompt für die KI

    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.

    Prompt für die KI

    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.

So nutzt du diese Vorlage

  1. Nutze die Vorlage, um eine bearbeitbare Kopie samt Quellcode in deinem Workspace zu erhalten (Vorlagen).
  2. Bitte den KI-Assistenten in eigenen Worten um die gewünschten Änderungen (Mit dem Assistenten arbeiten).
  3. Probiere jede Änderung in der Live-Vorschau oder auf deinem Handy aus (Vorschau).
  4. Ab Creator baust du sie für iOS und Android und reichst sie in den Stores ein (Veröffentlichen im Überblick).

Lizenz und Support

Lizenz

Die für dich erstellte App gehört dir; der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).

Hilfe

  • Anleitungen zu Vorlagen, Assistent und Veröffentlichung.
  • Support kontaktieren über Hilfe; Antwort meist in 1–2 Werktagen.
  • Frag in deiner Kopie den KI-Assistenten zu jedem Screen oder jeder Datei.

Von FluxNative

Support-Richtlinie

Fragen

Ist es kostenlos?

Eine kostenlose Vorlage zu kopieren kostet nichts, auch keine Credits; eine Premium-Vorlage ist ein Einmalkauf pro Website. Chat-Änderungen und Builds kosten Credits.

Was gehört mir?

Die für dich erstellte App gehört dir. Der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).

Muss ich programmieren können?

Nein. Bitte den Assistenten in einfachen Worten um Änderungen; den vollen Quellcode siehst du, wenn du willst.

Kommt sie mit Backend?

Nein. Eine vollständige App nennt das nötige Backend und du verbindest deines unter Server; ein Design läuft mit Beispieldaten.

Kann ich das Design ändern?

Ja. Im Tab Design stellst du Markenfarbe, Farben, Schriften und Ecken ohne Credits ein; den Rest ändert der Assistent.

Welchen Tarif brauche ich zum Veröffentlichen?

Ab Creator baust du und lädst in die Stores hoch, mit deinen eigenen Apple- und Google-Konten. Die App einer Premium-Vorlage baut mit jedem Tarif, sobald ihre Website verbunden ist.

Kann ich den Quellcode herunterladen?

Ja, mit Quellcode herunterladen oder Push zu GitHub, sobald dein Workspace einen Tarif, Credits oder eine bezahlte Vorlage gekauft hat. Die App einer Premium-Vorlage braucht zusätzlich ihre verbundene Website.

Was, wenn sie mit einem früheren FluxNative erstellt wurde?

Deine Kopie funktioniert wie sie ist. Lass sie vom Assistenten auf neuere Funktionen wie App-Sprachen und Währungen aktualisieren; das ist der letzte Einrichtungsschritt.

Bereit, daraus deine App zu machen?

Starte mit Hearth AI Room Redesign App und ändere alles per Chat. Deine Kopie enthält den vollständigen Quellcode.

Kostenlos kopieren. Keine Kreditkarte nötig.

Taking a little longer than usual…

Loading FluxNative