AI KIDS STORY TELLER

• 

  main-interface

• 

🎯 Inspiration

My inspiration for the AI Kid Storyteller stemmed from a desire to ignite imagination and foster creativity in children. I envisioned an interactive web application where children could actively participate in crafting their own personalized tales, complete with positive moral lessons.

📚 What It Does

AI Kid Storyteller is an interactive web application that generates unique, personalized stories for children. Users can choose various elements like:

• Hero's name and type
  
• Setting
  
• Theme
  
• Age group
  
• Story length
  

Beyond just text, the application offers:

• Text-to-speech narration with a variety of engaging AI voices
  
• Dynamic sound effects, including recommended voices based on story content and characters
  
• User authentication, allowing children (or parents) to:
  • Save favorite stories to a personal library
    
  • Track read counts
    
  • Mark favorites
    
• A friendly 3D animated companion character that adds interactive engagement

🛠️ How I Built It

The project was developed using a modern full-stack web development approach:

Frontend

• React + TypeScript
  
• Vite – Tooling and build setup
  
• Tailwind CSS – Styling
  

Backend & Services (via Supabase)

• Authentication – Managing user sign-up and sign-in
  
• PostgreSQL Database – Storing user-generated stories and preferences
  
  • stories and user_preferences tables
    
  • Secured using Row Level Security (RLS) policies
    
• Edge Functions (Deno) – Hosting serverless API endpoints:
  • Story generation
    
  • Saving, fetching, updating, and deleting stories
    

AI Integration

• Cohere API – Generates story content based on user selections
  
• ElevenLabs API – Provides text-to-speech functionality and dynamic sound effects
  

Additional Features

• 3D Character – Implemented with CSS 3D transforms, optimized for cross-device performance
  

🧩 Challenges I Ran Into

I encountered some challenges, especially when integrating and building the Edge Functions in Supabase to generate stories using Cohere AI.

🏆 Accomplishments That I'm Proud Of

• Seamless AI Integration – Successfully combined Cohere for narrative creation and ElevenLabs for immersive audio
  
• Interactive 3D Character – Created an animated, responsive 3D character to engage users
  
• Robust Backend with Supabase – Implemented reliable authentication and data storage
  
• Comprehensive Accessibility Features – High contrast mode, adjustable text size, and audio controls
  
• Responsive and Performant Design – Optimized experience for all screen sizes and devices
  

📘 What I Learned

From this project, I learned the intricacies of integrating external AI services with serverless functions in a cloud environment, particularly through the process of building Supabase Edge Functions to utilize the Cohere AI for story generation.

🚀 What's Next for AI Kid Storyteller

Looking ahead, several exciting features and improvements are planned to expand the capabilities and reach of AI Kid Storyteller:

• Multilingual Story Generation: Enable story creation in multiple languages to reach a broader, global audience and help children learn new languages through storytelling.

• Illustrated Story Mode: Automatically generate AI-powered illustrations to accompany the stories, turning them into picture books.

• Story Sharing & Community: Allow users to publish and share their favorite stories with a safe, moderated community of young readers and parents.

• Gamified Learning: Introduce fun quizzes, vocabulary games, or comprehension questions at the end of each story to enhance learning.

Built With

• api
• bolt.new
• cohere
• cors
• dotenv
• express.js
• javascript
• react.js
• vite