Inspiration

The inspiration behind TinyTales came from seeing how much parents want to create meaningful and personalized experiences for their children. We wanted to combine storytelling with technology to make every child feel special and celebrated.

What it does

TinyTales allows parents to upload their child’s photo, select personality traits, and add custom notes. It then generates a unique story narrated in a gentle voice. Parents can also create personalized certificates and share stories in a safe community.

How we built it

We built TinyTales using:

Frontend: React with TypeScript and Tailwind CSS for a beautiful and responsive design

Audio: Integration with ElevenLabs API for natural text-to-speech conversion

Storage: LocalStorage to save data locally

PDF Generation: jsPDF and html2canvas to create PDF files

Icons: Lucide React for beautiful icons

Animations: Custom CSS animations for a magical user experience Character Design: We used Bing Image Creator to generate cute and imaginative characters that match the personality traits selected in the platform.

Challenges we ran into

Audio management: handling API limits and network errors with ElevenLabs

Performance optimization: ensuring fast loading of images and audio

User experience: creating an intuitive and enjoyable interface for both children and parents

Data management: handling local image storage without exceeding storage limits

Responsive design: ensuring the app works perfectly across all devices

Accomplishments that we're proud of

Created an intelligent storytelling system that generates meaningful and personalized content

Successfully integrated with high-quality text-to-speech technology

Designed a beautiful and user-friendly interface

Developed a safe community system for story sharing

Added a feature for creating custom certificates of appreciation

Delivered a smooth user experience with appealing animations

What we learned

The importance of handling API errors in a user-friendly way

The value of user-centered design in children's applications

The challenges and benefits of integrating AI services

The importance of performance in multimedia applications

How to create interactive experiences combining technology and creativity

What's next for TinyTales

Add more languages and voice options

Develop a more advanced AI system for story creation

Add interactive features like games and activities

Develop a mobile app

Introduce educational features and moral lessons

Improve the community system with enhanced safe interaction features

Built With

  • autoprefixer
  • canvasapi
  • css3
  • elevenlabstexttospeechapi
  • eslint
  • filereaderapi
  • html5
  • html5fileapi
  • localstorage
  • lucidereact
  • postcss
  • react18
  • tailwindcss
  • typescript/javascript
  • typescriptcompiler
  • urlcreateobjecturl
  • vite
  • webaudioapi
Share this project:

Updates