Building an AI Story Maker as a Full Product System

Most AI apps fail because they're just demos—no monetization strategy, no structured UX, no reason for users to pay, no distribution loop.

Mosaic fixes that.

This case study breaks down how we built a complete AI product system that generates $25K MRR—not a hackathon app, but a real business.

---

What is Mosaic?

Mosaic is a consumer AI product that generates personalized bedtime stories for kids.

It's not just an AI demo or a single prompt → response app.

Mosaic is designed as a complete system spanning:

• A mobile app (iOS / Android)
• A backend for AI, data, and payments
• A shareable web experience for growth and SEO

Core Features

• Multi-step story creation wizard
• AI-generated stories and chapters
• High-quality text-to-speech audio
• Freemium → premium subscriptions
• Shareable story links that work outside the app

---

Who This Case Study Is For

This case study is for:

• Founders building AI-powered consumer products
• Indie hackers shipping real apps, not prototypes
• Engineers curious about system-level AI architecture

If you want to understand how to design AI products end-to-end, this is for you.

---

The Formula

Just structured input → AI orchestration → media → monetization → distribution.

Most AI apps are missing most of these pieces. Here's how Mosaic includes all of them:

---

Repositories in This System

Mosaic is split into three focused codebases:

1. ai-story-maker

→ React Native + Expo mobile app

2. mosaic-backend

→ Backend API, AI orchestration, payments, storage

3. mosaic-share-url

→ Next.js web app for shareable story links

Each repo has a clear responsibility and can evolve independently.

---

Product Goal & User Experience

The Problem

Parents want personalized bedtime stories for their kids, but:

• Writing them takes time
• Generic stories feel repetitive
• Audio narration is often missing

The Desired Experience

Mosaic aims to feel:

• Magical, not technical
• Fast and guided, not overwhelming
• Audio-first and bedtime-friendly
• Easy to share with family members

---

End-to-End User Journey

1. User installs the Mosaic mobile app
2. Signs up using Email, Google, or Apple
3. Completes a 4-step wizard describing the child and story preferences
4. Taps Generate Story
5. Backend generates the story using AI
6. User reads the story or listens via audio
7. Premium users unlock more credits and features
8. User shares the story via a universal web link

This journey is intentionally simple on the surface, while hiding significant system complexity underneath.

---

High-Level System Architecture

Mosaic is built as three cooperating layers:

1. Mobile App (ai-story-maker)

• React Native + Expo
• Handles:
  • User experience
  • Navigation & animations
  • Authentication
  • Payments
  • Audio playback
  • Sharing

The mobile app never talks directly to AI providers.

2. Backend API (mosaic-backend)

• Node.js + TypeScript + Express
• Owns:
  • AI prompt construction
  • Story and chapter generation
  • Subscription logic and credits
  • Text-to-speech generation
  • Data persistence
  • Operational tooling

This is the brain of the system.

3. Share URL Web App (mosaic-share-url)

• Next.js App Router
• Purpose:
  • Render stories on the web
  • Enable SEO and social previews
  • Allow non-app users to read stories
  • Drive app installs and growth

This turns in-app content into link-based distribution.

---

Mobile App Deep Dive

Tech Stack

• React Native + Expo
• TypeScript
• Expo Router (file-based navigation)
• Zustand for global state
• Firebase Authentication
• RevenueCat React Native SDK
• Reanimated + Lottie for animations

App Structure (Conceptual)

Story Creation Wizard

The wizard exists to structure inputs before calling AI.

Steps:

1. Child's name
2. Character & gender
3. Age group & hobbies
4. Story style & voice preference

All data is stored centrally in a global store.

Why this matters:

Structured inputs produce:

• More consistent AI output
• Better prompt control
• Easier iteration without breaking UX

Authentication & Subscriptions

Authentication:

• Firebase (Email, Google, Apple)
• Tokens persisted on device
• Encapsulated inside a global auth store

Premium Flow:

1. User selects a plan
2. Mobile app triggers RevenueCat purchase
3. Native payment sheet is shown
4. RevenueCat syncs subscription status
5. App reflects changes instantly

The backend is the single source of truth for access control.

Public Feed, Library & Sharing

Public Feed:

• Paginated stories
• Filtered by age, style, voice, and themes

User Library:

• Fetch, view, and delete personal stories

Sharing:

• Always generates a universal link:

https://share.mosaicai.in/story/:id

• Works outside the app
• Enables organic sharing and discovery

---

Backend Deep Dive

Tech Stack

• Node.js + TypeScript
• Express
• MongoDB
• OpenAI + Google GenAI (Gemini)
• ElevenLabs (text-to-speech)
• RevenueCat (subscriptions)
• Cloudinary
• Firebase Admin

Backend Responsibilities

The backend owns:

• Story lifecycle (create, read, delete)
• Chapter generation and persistence
• AI prompt composition
• Usage limits and credits
• Payments and subscriptions
• Audio generation
• Support and operational endpoints

Core API Capabilities

Stories:

• Create stories (AI-powered)
• Fetch user stories
• Public story feed
• Generate additional chapters
• Delete stories

AI:

• Provider-agnostic AI orchestration
• OpenAI and Gemini abstracted behind services

Payments:

• RevenueCat webhook handling
• Subscription state synchronization
• Credit management

AI & Audio Pipeline

1. Mobile app sends structured inputs
2. Backend constructs the AI prompt
3. AI generates story and chapters
4. Text stored in MongoDB
5. Audio generated via ElevenLabs
6. Audio URLs returned to the app

This design allows:

• Swapping AI providers
• Prompt iteration
• Cost control
• Consistent output quality

---

Share URL Web App

Why It Exists

Native apps are poor at sharing.

The web is excellent at distribution.

This app:

• Renders stories publicly
• Adds SEO and social previews
• Allows reading without installing the app
• Funnels users back to the mobile app

Tech Stack

• Next.js 15 (App Router)
• React 19
• Tailwind CSS
• Server-side rendering

Why a Separate Repository?

• Independent deployments
• Faster marketing and SEO iteration
• Smaller mobile app bundle
• Clean separation of concerns

---

Key Technology Choices

Each choice prioritizes shipping speed and scalability.

---

Why RevenueCat Over Stripe?

Apple and Google became very strict about in-app purchases. You can't use Stripe or third-party payment processors for digital goods on mobile apps.

RevenueCat solves this:

• Wraps Apple's StoreKit and Google's Billing Library
• Unified API for both platforms
• Built-in A/B testing for pricing
• Predictive analytics and churn prevention
• Works directly with the App Store and Play Store

The result? Native payment sheets, proper compliance, and much higher conversion rates.

---

How to Replicate This Architecture

1. Define the user journey before touching AI
2. Capture structured inputs via a wizard
3. Keep AI logic server-side
4. Add media (audio/images) early
5. Build a web sharing layer
6. Add monetization once value is clear

This system works beyond stories:

• Education apps
• Fitness plans
• Language learning
• Kids apps
• Personalized content products

---

The Design Process

We started with design before code:

1. Branding & Logo

Generate high-quality logos using AI (ChatGPT or Gemini). Iterate through human-in-the-loop feedback until you have something distinctive.

2. Screen Design

Design every screen before building:

• Onboarding flow
• Story creation wizard
• Paywall design
• Public feed with filters
• Story view and audio player

Use Figma or AI tools like Google AI Studio for rapid iteration.

3. User Journey Finalization

Create a detailed PRD (Product Requirements Document) that maps:

• Every screen
• Every user action
• Every API call
• Every state change

---

Common Mistakes to Avoid

Mistake 1: Building AI Without Structure

Problem: Raw prompt → response apps feel like toys.

Solution: Always capture structured inputs. A wizard creates consistency.

Mistake 2: Ignoring Distribution

Problem: Great app, but no way for users to share content.

Solution: Build a web layer that makes every piece of content shareable.

Mistake 3: Client-Side AI Calls

Problem: API keys in the app, inconsistent prompts, no logging.

Solution: All AI calls go through your backend. Period.

Mistake 4: Skipping Audio/Media

Problem: Text-only AI products feel commodity.

Solution: Add TTS, images, or video early. It creates a moat.

Mistake 5: Complex Monetization Too Early

Problem: Building elaborate subscription systems before users pay.

Solution: Use RevenueCat. Start with one plan. Iterate based on data.

---

Cost Breakdown

One-Time Costs

• Apple Developer Program: $99/year
• Google Play Developer: $25 one-time

Monthly Costs (Approximate)

• RevenueCat: Free up to $2.5K MRR, then 1%
• OpenAI API: ~$50-200/month (usage-based)
• ElevenLabs: ~$99-330/month (usage-based)
• MongoDB Atlas: Free tier to ~$25/month
• Cloudinary: Free tier to ~$29/month
• Hosting (Render/Vercel): Free tier to ~$20/month

Total First-Year Cost: ~$500-2,000 (before revenue)

---

Results

Mosaic achieved:

• Mobile-first AI experience with native iOS/Android apps
• Subscription-based value delivery via RevenueCat
• Audio + personalization moat that competitors can't easily copy
• Shareable links that drive organic installs

The system works because it's designed as a complete product, not a demo.

---

Final Takeaway

Mosaic is not "an AI app".

It is a full product system:

• Mobile app for UX and payments
• Backend for intelligence and control
• Web layer for growth and sharing

Structured input → AI engine → media → monetization → distribution

That's the formula for AI products that actually make money.

---

Next Steps

Want to build something similar? Here's where to start:

1. Map your user journey before writing code
2. Pick your AI providers (OpenAI, Gemini, Claude)
3. Choose your media layer (audio, images, video)
4. Set up RevenueCat for native monetization
5. Build the sharing layer from day one

---

Building an AI-powered product? DreamLaunch ships complete AI product systems like Mosaic in 28 days. Book a free consultation to discuss your project.