StoryWeaver - AI Bedtime Companion

💡 Inspiration

Every parent has lived this moment: it's 8 PM, your child is begging for a bedtime story, and you're completely out of ideas, energy, or both. You reach for a tablet — and feel guilty about it. We built StoryWeaver to turn that exhausted moment into something magical.

We wanted to prove that AI could replace the screen with something deeply personal: a story where YOUR child is the hero, not a YouTube algorithm's recommendation.

✨ What it does

StoryWeaver is a magical AI-powered bedtime story creator that generates fully personalized, narrated 3-chapter stories for kids in under 30 seconds.

Core flow:

Step 1: Enter your child's name
Step 2: Choose a hero — Dragon, Princess, Astronaut, Robot, Unicorn, or Pirate
Step 3: Pick a theme — Adventure, Friendship, Courage, Kindness, or Curiosity
Step 4: Select a setting — Forest, Space, Ocean, Castle, or City
Generate: Watch a complete, age-appropriate story unfold with the child's name woven in as the protagonist

Standout features:

🎙️ Warm female AI narration using browser's built-in Web Speech API (zero cost, zero latency)
💜 Parent Insights badges that highlight what values each story teaches
📚 Personal magical library saved locally, available forever
🌙 Beautiful pastel "Macaron" aesthetic with floating stars and a friendly moon mascot
📱 Fully mobile responsive — works on any device

🛠️ How we built it with MeDo

The entire app was built through just 3 progressive conversations with MeDo:

Conversation 1 — Foundation: I described the magical pastel aesthetic, the 4-step wizard flow, the 4-page architecture (Home, Create, Story Display, Library), and asked MeDo to use only browser-native APIs to keep the app free to run. MeDo's first build had the entire scaffolding wired together correctly.

Conversation 2 — Smart Features: I asked MeDo to integrate the browser's Web Speech API for narration, add localStorage persistence for the library, and create a "Parent Insights" feature that derives moral values from each generated story. MeDo correctly handled async voice loading across different browsers on the first try.

Conversation 3 — Voice Polish: I asked MeDo to upgrade the Read Aloud feature to prioritize female English voices (Google UK English Female, Samantha, Zira) with a slower 0.85x rate and warmer pitch — perfect for bedtime. Added a pulsing visual indicator when narration is active.

🏗️ Architecture choices

React + Tailwind CSS frontend (scaffolded by MeDo)
MeDo's built-in AI for story generation — no external paid APIs
Browser Web Speech API for TTS — free, fast, privacy-respecting
localStorage for the library — no backend, no database costs, full user privacy
Fully serverless — costs $0 to run and scales infinitely

🎯 Challenges we faced

Voice quality: The default browser TTS voice sounded robotic and male — completely wrong for bedtime stories. MeDo solved this in one prompt by intelligently filtering available voices for the warmest female options.
Async voice loading: Different browsers load voice lists asynchronously. MeDo correctly handled the voiceschanged event so voices are selected only AFTER they're loaded.
Scope discipline: It was tempting to add AI illustrations and external TTS services, but those would have added cost and complexity. Sticking to browser-native APIs made the app genuinely free and instant.