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

قالب الأبوة والأمومة

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 شاشة
  • iOS وAndroid
  • بيانات تجريبية
  • حُدّث في 4 نوفمبر 2026
  • إصدار موثّق
  • نسخة واحدة

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

الشاشات

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

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

  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

عن هذا القالب

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

ما تحصل عليه

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

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

ما تحتاج إليه

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

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

شاشات
18
ملفات في نسختك
442
أسطر كُتبت لهذا التطبيق
6,550
مكوّنات واجهة جاهزة
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 لهذا الإصدار.

نظام التصميم

العناوين
Outfit
النص
خط النظام
  • الوضعان الفاتح والداكن
  • Liquid Glass
  • أزرار كبسولية
  • بطاقات بسيطة

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

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

  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.

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

    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.

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

    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.

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

    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.

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

    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.

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

    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.

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

  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؟

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

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

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

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

Taking a little longer than usual…

Loading FluxNative