IllumiLearn

Creating storybook
storybook page1
Home Screen

Inspiration

Every child learns differently. Traditional textbooks can feel boring and overwhelming — especially for kids aged 6-12 who are just starting to explore science, history, and the world around them.

We asked ourselves: what if learning felt like storytime? What if a child could type "How do volcanoes work?" and instantly receive a beautiful, illustrated 6-page storybook — written just for them — followed by a fun quiz?

That's how IllumiLearn was born. We wanted to make every educational concept feel magical, personal, and unforgettable.

What it does

IllumiLearn is an AI-powered interactive storybook generator for kids aged 6-12.

Here's how it works:

🌟 A child types any educational topic (e.g. "Volcanoes", "Solar System", "Water Cycle")
📖 Gemini AI generates a beautiful 6-page illustrated storybook in seconds
🎨 Each page comes with an AI-generated colorful illustration
🧠 After reading, a 3-question quiz tests what the child learned
🏆 Results show their score with a fun celebration!

The magic is in the streaming — pages appear one by one as Gemini generates them, creating a live magical experience that kids love watching!

How built it

IllumiLearn is built with a 3-layer architecture:

🖥️ Frontend — React + TypeScript Beautiful storybook UI with colorful page themes, real-time streaming interface where pages appear as they're generated, and a quiz interface with progress bar and answer review. Deployed on Firebase Hosting.

⚙️ Agent Backend — Python + FastAPI An orchestrator agent that coordinates the full story generation flow using Gemini's interleaved/mixed output to stream text + images together. Each page streams to the frontend as soon as it's ready. Deployed on Google Cloud Run.

✨ Gemini AI — Google DeepMind gemini-3-flash-preview # For story + quiz text gemini-2.5-flash-image # For illustrations for story generation and quiz creation, plus Gemini image generation for per-page illustrations. A single agent call produces text + images + quiz in one interleaved stream.

The key innovation is our interleaved output implementation — rather than waiting for all 6 pages to generate, each page streams to the user immediately as Gemini creates it.

Challenges ran into

CORS Issues — Getting the React frontend to communicate with the Python backend required careful CORS configuration in FastAPI.
Streaming Pipeline — Building real-time streaming that passes Gemini's interleaved output from backend to frontend page-by-page was technically challenging.
Image Generation Reliability — Gemini image generation occasionally fails, so we built a graceful emoji fallback to ensure the storybook always completes.
Prompt Engineering — Getting Gemini to consistently return well-structured JSON for storybook pages and quiz required careful schema validation.
Model Quotas — Managing free tier rate limits required switching models and implementing retry logic.

Accomplishments that we're proud of

Built a fully working AI agent from scratch in under 2 weeks
Implemented true interleaved output — text and images streaming together in real time
Created a UI that kids genuinely find magical and engaging
The quiz feature reinforces learning in a fun, non-intimidating way
Every storybook is 100% unique — no two stories are ever the same!
Successfully deployed a full-stack AI application on Google Cloud

What learned

How to build AI agents using Google's GenAI SDK
How Gemini's interleaved/mixed output works in practice
How to implement real-time streaming from a Python backend to a React frontend
How to deploy containerized applications on Google Cloud Run
The importance of graceful error handling in AI applications
How powerful Gemini's multimodal capabilities are for creative educational tools