Saltar al contenido

Plantilla de Casa y hogar

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 pantallas
  • iOS y Android
  • Datos de ejemplo
  • Actualizada el 4 nov 2026
  • Versión verificada

Copia gratis · Código completo · Sin tarjeta

Pantallas

6 pantallas de la app en funcionamiento.

Qué incluye

  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

Acerca de esta plantilla

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

Qué obtienes

  • Código completo: Expo y React Native en TypeScript, como una app en tu espacio de trabajo.
  • Vista previa en vivo: prueba cada cambio en el navegador o en tu móvil.
  • Versión verificada: compila y cada pantalla abre sin errores.
  • Asistente de IA: cambia lo que quieras por chat; cada cambio usa créditos.
  • Compilaciones y subida a tiendas: compilaciones de iOS y Android, enviadas a App Store y Google Play desde Publish.
  • Copiar no gasta créditos: la copia en sí no cuesta nada.

Creada con la versión actual de FluxNative.

Qué necesitas

  • Una cuenta de FluxNative: el plan Free admite hasta 2 apps.
  • Sin backend para empezar: usa datos de ejemplo hasta que conectes el tuyo.
  • Creator o superior: para compilaciones nativas y subida a tiendas.
  • Cuentas de tienda: Apple Developer Program (99 US$ al año) y Google Play (25 US$ una vez), para publicar.

Qué incluye el código

pantallas
18
archivos en tu copia
387
líneas escritas para esta app
6981
componentes de UI listos
142

Textos de la app en inglés y vietnamita

Tecnologías

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

Del package.json de esta versión.

Sistema de diseño

Títulos
Fuente del sistema
Texto
Fuente del sistema
  • Modo claro y oscuro
  • Liquid Glass
  • Botones de cápsula
  • Tarjetas planas

Configuración después del fork

Tu copia se abre con el asistente de IA que la creó. Sigue los pasos en orden: conecta en Server lo que pida un paso y luego envía cada 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 para la IA

    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 para la IA

    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 para la IA

    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 para la IA

    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 para la IA

    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.

Cómo usar esta plantilla

  1. Usa la plantilla para tener una copia editable, con su código fuente, en tu espacio de trabajo (Plantillas).
  2. Pide al asistente de IA los cambios que quieras, con tus propias palabras (Trabajar con el asistente).
  3. Prueba cada cambio en la vista previa en vivo o en tu teléfono (Vista previa).
  4. Con Creator o superior, compílala para iOS y Android y envíala a las tiendas (Resumen de la publicación).

Licencia y soporte

Licencia

La app creada para ti es tuya; el código de la plantilla sigue siendo de InspireUI y tiene licencia para usarse en tus apps (Términos › Nuestra propiedad intelectual).

Ayuda

  • Guías sobre plantillas, el asistente y la publicación.
  • Contactar con soporte desde Ayuda; respondemos normalmente en 1–2 días laborables.
  • En tu copia, pregunta al asistente de IA sobre cualquier pantalla o archivo.

Hecho por FluxNative

Política de soporte

Preguntas

¿Es gratis?

Copiar una plantilla gratis no cuesta nada, ni créditos; una Premium es un pago único por sitio web. Los cambios por chat y las compilaciones usan créditos.

¿Qué es mío?

Eres dueño de la app creada para ti. El código de la plantilla sigue siendo de InspireUI y tiene licencia para usarlo en tus apps (Terms › Our intellectual property).

¿Necesito saber programar?

No. Pide cambios al asistente con tus palabras; el código completo está ahí cuando lo quieras.

¿Incluye backend?

No. Una app completa indica el backend que necesita y conectas el tuyo en Server; un diseño usa datos de ejemplo.

¿Puedo cambiar el diseño?

Sí. La pestaña Design cambia el color de marca, los colores, las fuentes y las esquinas sin gastar créditos; el asistente cambia el resto.

¿Qué plan necesito para publicar?

Creator o superior compila y sube a las tiendas, con tus propias cuentas de Apple y Google. La app de una plantilla Premium compila en cualquier plan cuando su sitio web está conectado.

¿Puedo descargar el código?

Sí, con Download source o Push to GitHub, cuando tu espacio de trabajo haya comprado un plan, créditos o una plantilla de pago. La app de una plantilla Premium también necesita su sitio web conectado.

¿Y si se hizo con una versión anterior de FluxNative?

Tu copia funciona tal cual. Pide al asistente que la actualice a funciones nuevas, como idiomas y monedas de la app; es el último paso de configuración.

¿Lista para convertirla en tu app?

Empieza desde Hearth AI Room Redesign App y cambia lo que quieras por chat. Tu copia incluye el código fuente completo.

Copia gratis. Sin tarjeta de crédito.

Taking a little longer than usual…

Loading FluxNative