Inspiration
The inspiration for Magical Stories came from a desire to blend technology with childhood wonder. Growing up, I loved creating stories with my siblings, but language barriers often limited sharing them with friends from diverse backgrounds. Today, with millions of children learning in multilingual environments, I saw an opportunity to use AI to make storytelling inclusive and engaging. The Bolt.new hackathon, with its focus on no-code AI development, was the perfect launchpad to bring this vision to life. The idea of combining Picaos.com to build with OpenAI's text and image generation, ElevenLabs’ expressive voice narration, Supabase and Bolt.new capabilities sparked excitement about creating a tool that could delight kids and inspire educators worldwide.
What it does
Magical Stories transforms a child’s imagination into vibrant, narrated tales in just a few clicks. Users—kids or parents—select a story theme (e.g., dragons, space, fairies), character type (e.g., hero, animal), and narration language (e.g., English, Spanish, French) through a simple, colorful interface. They can also add custom prompts for unique stories. The app uses Bolt.new’s AI to generate a 200–300-word, age-appropriate story paired with a cartoon-style image that brings the tale to life. ElevenLabs’ voice synthesis then narrates the story in the chosen language with a warm, expressive tone, creating an immersive visual novel experience. Users can save their stories to revisit later and replay the narration, making it perfect for bedtime stories, classroom activities, or creative play. The app is mobile-friendly, publicly accessible, and designed to captivate young users while being intuitive for parents and educators.
How we built it
Bolt.new: No-code platform for building the app’s UI, AI-driven story generation, and cartoon-style image creation.
ElevenLabs API: Voice synthesis for multilingual, child-friendly narration in English, Spanish, and French.
Netlify: Hosting platform for public deployment of the app.
Supabase: Used to handle backend requirements.
Pica: to connect with Gemini and ElevenLabs and get prompts to prompt bolt with using the buildKit
Gemini: to generate images and text for story generation
Challenges we ran into
Kid-Friendly Content: Ensuring AI-generated stories and images were consistently age-appropriate required tweaking Bolt.new’s prompts to avoid complex or inappropriate themes.
ElevenLabs Integration: Initial audio playback issues on mobile devices (e.g., Safari) required testing multiple browsers and optimizing file formats, eating into development time.
UI Simplicity: Balancing a playful, colorful design with usability for young kids was tricky; early feedback showed small buttons confused users, so I enlarged them.
Time Constraints: The 4-week timeline meant prioritizing core features over extras like advanced story customization, teaching me to focus on a functional MVP.
Language Support: Confirming ElevenLabs supported all target languages (e.g., French) and handling API rate limits required careful planning.
Accomplishments that we're proud of
Inclusive Storytelling: Successfully created a multilingual app that supports English, Spanish, and French narration, making storytelling accessible to kids from diverse linguistic backgrounds.
Kid-Centric Design: Crafted a vibrant, intuitive UI with large buttons and playful visuals that kids as young as 5 can navigate, validated through user testing with families.
Seamless AI Integration: Integrated Bolt.new’s AI for story and image generation, ensuring every story is age-appropriate and visually engaging, with zero manual coding.
High-Quality Voice Narration: Leveraged ElevenLabs’ API to deliver natural, child-friendly narration in multiple languages, enhancing the storytelling experience.
Rapid Development: Built a fully functional prototype in 8 weeks using Bolt.new’s no-code platform, overcoming challenges like API rate limits and mobile compatibility.
Positive User Feedback: Received enthusiastic responses from parents and educators during testing, with comments praising the app’s simplicity and potential for classroom use.
Hackathon-Ready Submission: Deployed the app on a public URL with the “Built with Bolt.new” badge and created a polished 3-minute demo video showcasing all features, ready for judging.
What we learned
No-Code AI Power: I learned how Bolt.new’s AI can generate coherent, kid-friendly stories and visuals without manual coding, democratizing app development.
Voice AI Integration: Integrating ElevenLabs taught me how to map text to multilingual voice outputs, ensuring natural, child-friendly narration.
Kid-Friendly UX: Designing for children required prioritizing simplicity, vibrant visuals, and large, intuitive buttons, which I tested with feedback from parents.
Hackathon Pressure: Balancing creativity with functionality under a tight timeline honed my prioritization skills, focusing on a polished minimum viable product (MVP).
API Challenges: I gained insights into handling API rate limits and ensuring audio playback compatibility across devices.
What's next for Magical Stories
Built With
- bolt.new
- elevenlabs
- openai
- pica
- react
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.