Kids Night Story

Building a World of Sweet Dreams, One Story at a Time.

Comment

Here is the full project description for KidsNightStory, formatted in Markdown with LaTeX support, ready for your submission.

KidsNightStory

Building a World of Sweet Dreams, One Story at a Time.

Inspiration

The spark for KidsNightStory came from a very personal place: my nightly routine with my 2-year-old daughter, Camilla. Like many parents, I found myself struggling to teach important life lessons—like “Why do we need to brush our teeth?” or “Why is sharing good?”—without it feeling like a lecture.

I wanted to turn these "AAA Problems" (everyday parenting challenges) into magical adventures where Camilla wasn't just a listener, but the protagonist. As a Senior Architect with a passion for "Geo" (World Building) and community planning, I realized that a bedtime story shouldn't just be a page you turn; it should be a world you visit. I wanted to build a "Dream Atlas" for her—a digital map where every island is a lesson learned through wonder, not warnings.

What it does

KidsNightStory is an interactive iOS application built entirely on iPad. It uses Generative AI to instantly weave custom bedtime stories based on real-time parental input.

The workflow is simple yet powerful:

  1. Input Layer: The parent enters the Child's Name, Age, Gender, the "Lesson of the Night" (e.g., Fear of dentists), and a preferred Art Style (e.g., Studio Ghibli, Disney, or Toriyama).
  2. The Dream Engine: The app generates a 10-page story arc tailored to the child's cognitive level.
  3. Visuals: It generates high-fidelity, text-free illustrations using the Gemini (Nano Banana) model.
  4. Delivery: The app overlays age-appropriate, bilingual text (English/Chinese) onto the images using a custom "Child-Friendly" font system, ensuring the story is readable and engaging.

How we built it

We adopted a "No-Code / Low-Code" philosophy, utilizing Swift Playgrounds on iPad to demonstrate that powerful architecture doesn't require a heavy desktop environment.

The system architecture consists of three distinct layers:

  1. The Input Layer (UI): Built with SwiftUI, this layer collects variables

. We used ObservableObject to manage the state flow between the configuration screen and the story view.

  1. The Logic Layer (The Brain): We created a StoryEngine class. This engine constructs dynamic prompts based on the user's input. For example, if the age is , the prompt requests "simple, repetitive language"; if , it requests "adventure and plot twists."

  2. The Rendering Layer (The Canvas): We utilized AsyncImage to handle real-time API calls to the image generator. Crucially, we decoupled text from image generation to avoid AI "gibberish." The text is rendered natively by iOS on top of the AI-generated background.

Challenges we ran into

  • The "Gibberish" Problem: Early versions of the AI model tried to write the story text inside the image generation. This resulted in unreadable, alien-like symbols.

  • Solution: We architected a separation of concerns. The AI generates the scene (pure pixels), and Swift renders the script (vectors).

  • Latency vs. Attention Span: Real-time generation takes seconds, which is an eternity for a toddler.

  • Solution: We implemented a "Magical Loading State"—instead of a spinning wheel, we show animations of "Weaving Starlight..." or "Waking up the pixies..." to keep the child engaged during API calls.

  • Asset Management in Playgrounds: Unlike Xcode, Swift Playgrounds has limitations on local asset management.

  • Solution: We moved from a local asset model to a purely cloud-based API architecture, meaning the app is lightweight and the "Dream World" is infinite.

Accomplishments that we're proud of

  • The "Dream Map" UI: Instead of a boring list of files, we built a Geo-spatial Home Screen. Stories appear as islands on a starry map (e.g., "Toothbrush Forest," "Sharing Castle"), reinforcing the concept of world-building.
  • Bilingual Integration: Successfully implementing a toggle that instantly switches the narrative between English and Chinese, aiding in bilingual language acquisition for young children like Camilla.
  • Hyper-Personalization: Seeing the look on a child's face when the "anime character" on the screen actually looks like them and has their name.

What we learned

  • Prompt Engineering is Architecture: Constructing the perfect prompt is just like writing code. A small variable change in the "Age" parameter completely shifts the tone of the story.
  • Design for the Device: Building on iPad for iPad gave us immediate feedback on touch targets and UI sizing for small hands.
  • The Power of "Geo": We learned that users (children) respond better to spatial metaphors (exploring a map) than linear metaphors (turning a page).

What's next for KidsNightStory

  • Voice Cloning: We plan to integrate a TTS (Text-to-Speech) API that can clone the parent's voice, so the app can read to the child even when the parent is away.
  • Community "World Building": We want to allow parents to share their generated "Story Islands" on a global map, creating a massive, user-generated atlas of parenting wisdom.
  • Interactive Choices: Transforming the linear 10-page story into a "Choose Your Own Adventure" model, where the child decides if the protagonist fights the cavity monster or befriends it.

Built With

Share this project:

Updates