StoryBites is an innovative AI-powered platform that creates personalized, dyslexia-friendly stories for young readers. Built with cutting-edge technology, it combines Google Gemini AI for story generation with ElevenLabs for natural voice narration, creating engaging reading experiences that adapt to each child's unique needs.

• Reading barriers for children with dyslexia
• Lack of personalized content that matches individual interests
• Limited accessibility features in existing reading platforms
• Generic stories that don't engage young readers

• AI-Generated Stories: Personalized narratives based on child's interests and age
• Dyslexia-Friendly Design: OpenDyslexic font and optimized formatting
• Interactive Audio: High-quality text-to-speech with word-level pronunciation
• Vocabulary Building: Custom vocabulary integration with definitions
• Accessibility First: Built with inclusive design principles

• Google Gemini AI for intelligent story generation
• Personalized Content based on child's profile and interests
• Age-Appropriate Language that adapts to reading level
• Vocabulary Integration with custom word definitions

• ElevenLabs AI Voices for natural, engaging narration
• Sentence-by-Sentence Playback for better comprehension
• Word-Level Pronunciation for difficult vocabulary
• Audio Controls with play, pause, and replay functionality

• OpenDyslexic Font for improved readability
• High Contrast Design for better visibility
• Interactive Elements with click-to-hear functionality
• Responsive Design that works on all devices
• Keyboard Navigation support

• Secure Authentication with Auth0
• Personal Profiles with reading preferences
• Story Library to save and manage stories
• Progress Tracking and reading statistics

• React 19.2.0 - Modern React with hooks
• Tailwind CSS 3.4.18 - Utility-first styling
• React Router 6.8.0 - Client-side routing
• Auth0 React SDK 2.5.0 - Authentication

• Vercel API Routes - Serverless backend
• Google Gemini AI - Story generation
• ElevenLabs API - Text-to-speech
• Snowflake - Data warehouse
• Auth0 - User authentication

• Create React App - Build tooling
• ESLint - Code quality
• PostCSS - CSS processing
• Concurrently - Development workflow

• Node.js 16+
• npm or yarn
• Git

git clone https://github.com/VainerAriel/HackTheValley2025.git
cd HackTheValley2025/storybridge

npm install

Create a .env.local file in the storybridge directory:

# 🔐 Auth0 Configuration
REACT_APP_AUTH0_DOMAIN=your-auth0-domain.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-auth0-client-id

# 🤖 AI Services
REACT_APP_GEMINI_API_KEY=your-gemini-api-key
REACT_APP_ELEVENLABS_API_KEY=your-elevenlabs-api-key

# 🗄️ Database (Snowflake)
REACT_APP_SNOWFLAKE_ACCOUNT=your-snowflake-account
REACT_APP_SNOWFLAKE_USER=your-snowflake-username
REACT_APP_SNOWFLAKE_PASSWORD=your-snowflake-password
REACT_APP_SNOWFLAKE_WAREHOUSE=your-warehouse
REACT_APP_SNOWFLAKE_DATABASE=your-database
REACT_APP_SNOWFLAKE_SCHEMA=your-schema

# 🌐 API Configuration (Optional)
REACT_APP_API_URL=http://localhost:3001

1. Go to Auth0 Dashboard
2. Create a new application (Single Page Application)
3. Copy your Domain and Client ID

1. Visit Google AI Studio
2. Create a new API key
3. Copy the key to your .env.local

1. Sign up at ElevenLabs
2. Go to your profile settings
3. Copy your API key

1. Create a Snowflake account
2. Set up a warehouse, database, and schema
3. Create a user with appropriate permissions

# Start the React app
npm start

# Or start with local backend proxy
npm run dev

Navigate to http://localhost:3000 and start creating stories! 🎉

storybridge/
├── 📁 api/                    # Backend API routes
│   ├── stories/              # Story endpoints
│   ├── user/                 # User management
│   └── _utils.js             # Shared utilities
├── 📁 src/
│   ├── 📁 components/        # React components
│   │   ├── features/         # Feature components
│   │   ├── layout/          # Layout components
│   │   └── ui/              # UI components
│   ├── 📁 services/         # API integrations
│   ├── 📁 hooks/            # Custom React hooks
│   ├── 📁 assets/           # Static assets
│   └── App.js               # Main application
├── 📁 public/               # Public assets
├── package.json             # Dependencies
└── vercel.json             # Deployment config

Interactive story creation with:

• Child profile setup
• Interest selection
• Vocabulary word addition
• AI story generation

Advanced reading interface featuring:

• Dyslexia-friendly typography
• Interactive audio controls
• Word-level pronunciation
• Vocabulary definitions

Main user interface with:

• Story library management
• Quick story creation
• User profile access
• Reading progress

1. Connect Repository to Vercel
2. Configure Build Settings:
   • Root Directory: storybridge
   • Build Command: npm run build
   • Output Directory: build
3. Add Environment Variables in Vercel dashboard
4. Deploy automatically on every push

REACT_APP_AUTH0_DOMAIN=your-production-domain
REACT_APP_AUTH0_CLIENT_ID=your-production-client-id
REACT_APP_GEMINI_API_KEY=your-gemini-key
REACT_APP_ELEVENLABS_API_KEY=your-elevenlabs-key
SNOWFLAKE_ACCOUNT=your-account
SNOWFLAKE_USER=your-username
SNOWFLAKE_PASSWORD=your-password
SNOWFLAKE_WAREHOUSE=your-warehouse
SNOWFLAKE_DATABASE=your-database
SNOWFLAKE_SCHEMA=your-schema

• Hour 0-6: Problem identification and solution design
• Hour 6-18: Core development and AI integration
• Hour 18-30: UI/UX refinement and accessibility features
• Hour 30-36: Testing, deployment, and presentation prep

• ✅ Full-stack application built from scratch
• ✅ AI integration with multiple services
• ✅ Accessibility-first design for dyslexia support
• ✅ Production deployment on Vercel
• ✅ Real-time audio processing and playback

• AI API Integration: Seamless connection between Gemini and ElevenLabs
• Audio Processing: Real-time text-to-speech with word-level control
• Database Design: Efficient story and user data management
• Authentication: Secure user management with Auth0
• Responsive Design: Cross-platform compatibility

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and test thoroughly
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

• Follow React best practices
• Maintain accessibility standards
• Test on multiple devices
• Document new features

This project is licensed under the MIT License - see the LICENSE file for details.

• Ariel Vainer
• Matthew Lee
• Isabella Phan

• Google Gemini AI - Intelligent story generation
• ElevenLabs - High-quality text-to-speech
• Auth0 - Secure authentication
• Snowflake - Data warehouse
• Vercel - Seamless deployment
• OpenDyslexic - Dyslexia-friendly typography

• Inclusive design principles
• Accessibility-first approach
• Child-centered user experience

• Live Demo: storybites.vip
• GitHub Issues: Report bugs or request features