Template Parents

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 écrans
iOS et Android
Données d’exemple
Mis à jour le 4 nov. 2026
Version vérifiée
1 copie créée

Copie gratuite · Code source complet · Sans carte bancaire

Écrans

6 écrans de l’app fonctionnelle.

Contenu

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

À propos de ce modèle

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

Ce que vous obtenez

Code source complet — Expo et React Native en TypeScript, en app dans votre espace de travail.
Aperçu en direct — testez chaque changement dans votre navigateur ou sur votre téléphone.
Version vérifiée — elle compile et chaque écran s’ouvre sans erreur.
Assistant IA — modifiez tout par chat ; chaque changement consomme des crédits.
Builds et envoi aux stores — builds iOS et Android, envoyés à l’App Store et à Google Play depuis Publier.
Aucun crédit pour copier — la copie elle-même est gratuite.

Conçu avec la version actuelle de FluxNative.

Ce qu’il vous faut

Un compte FluxNative — le forfait Free accepte jusqu’à 2 apps.
Aucun backend au départ — elle tourne sur des données d’exemple jusqu’à ce que vous connectiez le vôtre.
Creator ou plus — pour les builds natifs et l’envoi aux stores.
Comptes de store — Apple Developer Program (99 US$ par an) et Google Play (25 US$ une fois), pour publier.

Ce que contient le code

écrans: 18
fichiers dans votre copie: 442
lignes écrites pour cette app: 6 550
composants d’interface prêts à l’emploi: 142

Textes de l’app en anglais et vietnamien

Stack technique

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

Tiré du package.json de cette version.

Système de design

Titres: Outfit
Texte: Police du système

Modes clair et sombre
Liquid Glass
Boutons en pilule
Cartes simples

Configuration après le fork

Votre copie s’ouvre avec l’assistant IA qui l’a créée. Suivez les étapes dans l’ordre : connectez sous Serveur ce qu’une étape demande, puis envoyez chaque prompt.

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 pour l’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.
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 pour l’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.
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 pour l’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.
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 pour l’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.
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 pour l’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.

Comment utiliser ce modèle

Utilisez le modèle pour obtenir une copie modifiable, avec son code source, dans votre espace de travail (Modèles).
Demandez à l’assistant IA les changements voulus, avec vos propres mots (Travailler avec l’assistant).
Essayez chaque changement dans l’aperçu en direct ou sur votre téléphone (Aperçu).
Avec Creator ou plus, compilez-le pour iOS et Android et envoyez-le aux stores (Vue d’ensemble de la publication).

Licence et support

Licence

L’app créée pour vous vous appartient ; le code du modèle reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Aide

Guides sur les templates, l’assistant et la publication.
Contacter le support depuis Aide ; réponse en général sous 1 à 2 jours ouvrés.
Dans votre copie, interrogez l’assistant IA sur n’importe quel écran ou fichier.

Créé par FluxNative

Politique de support

Questions

Est-ce gratuit ?

Copier un template gratuit ne coûte rien, pas même des crédits ; un template Premium est un achat unique par site web. Les changements par chat et les builds consomment des crédits.

Qu’est-ce qui m’appartient ?

L’app créée pour vous vous appartient. Le code du template reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Faut-il savoir coder ?

Non. Demandez des changements à l’assistant en mots simples ; le code source complet est là si vous le voulez.

Y a-t-il un backend inclus ?

Non. Une app complète nomme le backend requis et vous connectez le vôtre sous Server ; un design tourne sur des données d’exemple.

Puis-je changer le design ?

Oui. L’onglet Design règle la couleur de marque, les couleurs, les polices et les angles sans coût en crédits ; l’assistant change le reste.

Quel forfait pour publier ?

Creator ou plus compile et envoie aux stores, avec vos propres comptes Apple et Google. L’app d’un template Premium se compile avec tout forfait dès que son site web est connecté.

Puis-je télécharger le code source ?

Oui, avec Télécharger le code source ou Push vers GitHub, dès que votre espace de travail a acheté un forfait, des crédits ou un template payant. L’app d’un template Premium exige aussi son site web connecté.

Et si elle a été créée avec une version antérieure de FluxNative ?

Votre copie fonctionne telle quelle. Demandez à l’assistant de la mettre à jour pour les nouveautés comme les langues et devises de l’app ; c’est la dernière étape de configuration.

Prêt à en faire votre app ?

Partez de Storyloom AI Bedtime Story App et changez tout par chat. Votre copie inclut tout le code source.

Copie gratuite. Sans carte bancaire.