Saltar al contenido

Plantilla de Crianza

Storyloom AI Bedtime Story App

A React Native app for parents: pick a hero, a place and a gentle lesson, and Gemini writes, illustrates and reads aloud a bedtime story. Runs on sample stories until you connect Supabase.

  • 18 pantallas
  • iOS y Android
  • Datos de ejemplo
  • Actualizada el 4 nov 2026
  • Versión verificada
  • 1 copia creada

Copia gratis · Código completo · Sin tarjeta

Pantallas

6 pantallas de la app en funcionamiento.

Qué incluye

  1. Story builder: a child or animal friend, six places, eight lessons, 3/5/8 minutes and four narrator voices
  2. Three Gemini tasks in a Supabase Edge Function: write the story, draw each page, read each page aloud
  3. Honest staged progress: writing, each picture as it lands, recording; keeps going if you leave the screen
  4. Reader with read-along word lighting, narration playback, sleep timer, text size and a slowly dimming end
  5. For parents: drawn avatars only, a grown-up number check before plans and deleting data, no ads or analytics
  6. Sample mode with no backend: two sample children, six stories and 73 bundled illustrations

Acerca de esta plantilla

Overview

Storyloom is a bedtime story app used by parents with their child. The parent picks who the story is about (their child by first name, or one of six animal friends), where it happens, what it gently shows and how long it is. The app writes the story, draws a picture for every page and reads it aloud, then keeps it in a family library with favourites and collections.

Out of the box it runs in sample mode: no backend, everything stored on the device. Connect Supabase and a Gemini key and the same screens make real stories.

Key features

  • Library with tonight's idea for one of the children, keep reading, a favourites shelf, Calm/Brave/Friendship collections and every story

  • Builder with drawn hero and place pickers, lesson chips, an optional one-line detail, length and narrator, and the cost shown before Create

  • Creating screen that shows each real step and each picture as it arrives; failures get their own words and next step

  • Story page with Read or carry on, a pages strip, favourite, edit a page's words, draw a missing picture, share the text and delete

  • Reader that lights each word as it is read (recorded narration or read-along pacing), with page bars, a sleep timer and text size

  • Kids profiles with drawn avatars built from skin tone, hair and pajama colour, never photos

  • You tab with the week's free story, reader settings, the grown-up check, restore purchases and Delete my data

  • In-app Privacy Policy and Terms of Use, and an About screen

Screens

Welcome, add your first child, Stories (library), New story, Creating, Story, Reader, The end, Collection, Kids, a child's profile, Add a child, You, the grown-up check, Storyloom Pro, Privacy Policy, Terms of Use and About: 18 screens, all built and tested in light and dark.

AI and backend

AI runs on the server through one Supabase Edge Function (`ai`) that calls Google Gemini with your key. The app signs each install in anonymously, so there is no visible account.

  • write-story (2 units): title and pages with a picture brief each, JSON output, a children's safety prompt; saves the story and its pages

  • illustrate-page (2 units a page): one flat picture-book style, later pages drawn against page 1 so the hero stays the same

  • narrate (1 unit a page): each page read slowly in the chosen voice, saved as audio

  • A six-page story uses 20 units; the daily allowance, Pro limits and the free plan's one story a week are checked on the server

  • Tables kids, stories and pages with row-level security; pictures and narration in a private storage bucket, shown through signed URLs

In sample mode, Create returns a designed sample story for the chosen place and hero, with bundled pictures. Sample stories have no recorded voice: the reader's read-along lights the words at a bedtime pace.

Monetisation

Free makes one new story a week and includes Storyloom's own stories, read by one voice. Pro (monthly and yearly) makes unlimited stories in all four voices. Purchases go through RevenueCat; until you connect it, the paywall shows sample prices and says subscriptions open in the App Store version. The plans screen sits behind the grown-up check.

Setup

Connect Supabase and apply the two migrations, add the Gemini key and deploy the functions, then connect RevenueCat to sell Pro. Each step below includes the request for your coding agent.

aibedtime storieskidsparentingstory generatortext to speechgeminisupabaserevenuecatreact nativeexpo

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
442
líneas escritas para esta app
6550
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
Outfit
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

    Server › Backend › Supabase. Apply both migrations, turn on anonymous sign-ins in the Supabase dashboard, and write the public URL and anon key to .env. Until then the app runs on sample stories.

    Prompt para la IA

    Connect this app to the Supabase project under Server › Backend › Supabase. Apply supabase/migrations/20261019000000_ai_kit.sql and then supabase/migrations/20261019010000_storyloom.sql. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Remind me to turn on Authentication › Sign In / Providers › "Allow anonymous sign-ins" in the Supabase dashboard and to keep the anonymous sign-in rate limit low. Then confirm the kids, stories and pages tables exist with row-level security.

  2. Turn on the AI

    Server › API keys & secrets: add GEMINI_API_KEY (a billing-enabled key; image models have no free tier). Deploy the ai function. Keep AI_FREE_UNITS_PER_DAY at 30 or more so a 9-page story fits.

    Prompt para la IA

    Under Server › API keys & secrets, check that GEMINI_API_KEY is set, and set AI_FREE_UNITS_PER_DAY to 30 and AI_PRO_UNITS_PER_DAY to 500 unless I say otherwise. Deploy the Supabase Edge Function ai (supabase/functions/ai) and push its secrets. Invoke it with { "task": "usage" } as a test user and show me the answer. Then make one story from the New story tab and tell me whether writing, drawing and narration all succeeded.

  3. Sell Pro

    Server › Monetization: connect RevenueCat with a monthly and a yearly product in one offering, entitlement pro. Save the webhook secret and deploy the revenuecat-webhook function.

    Prompt para la IA

    Connect RevenueCat under Server › Monetization for Storyloom Pro: one offering with a monthly and a yearly product and the entitlement pro. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env. Create a long random REVENUECAT_WEBHOOK_SECRET under Server › API keys & secrets, deploy supabase/functions/revenuecat-webhook with JWT verification off, push the secret, and give me the webhook URL and Authorization header to paste into RevenueCat › Integrations › Webhooks. Update PLAN_PREVIEW in src/services/iap/index.ts to match my real prices.

  4. Choose the stories and voices

    Places, lessons, narrator voices and animal friends live in src/services/catalog; Storyloom's own six stories are in templates.ts. The server's task list (functions/ai/tasks.ts) must match.

    Prompt para la IA

    Show me the places, lessons, narrator voices and animal friends in src/services/catalog/index.ts and the voice mapping in the server's ai function (functions/ai/tasks.ts). Apply the changes I ask for in both files so the app and the server stay in step, keep the safety prompt in write-story, and re-run the typecheck.

  5. Set your icon, store IDs and legal pages

    Rename the app, replace the icon, retune the colours and point the legal links at your own pages. Rewrite the in-app Privacy Policy and Terms of Use for your business.

    Prompt para la IA

    Rename the app to the name I give you in app.json and the visible copy. Replace assets/icon.svg and assets/adaptive-icon.svg with my icon and render icon.png, adaptive-icon.png and favicon.png. Change brandSeed and the overrides in src/theme/brand.ts to my colours, keeping text contrast. Set EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL in .env, and update src/features/legal/PrivacyScreen.tsx and TermsScreen.tsx 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 Storyloom AI Bedtime Story 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