Learn anything through stories about your friends - A revolutionary AI-powered educational app with Apple-inspired design that transforms complex topics into memorable, personalized learning experiences.
- OpenRouter Qwen AI - Powered by cutting-edge Qwen-2.5-72B model
- Academic-Grade Definitions - Anna University style formal definitions
- 5th Grade Explanations - Complex concepts broken down from scratch
- Structured Learning - Logical, step-by-step conceptual building
- Memory Aids - Emojis, rhymes, and recall techniques
- Comprehensive Responses - Up to 2000 tokens for detailed explanations
- API Management System - Easy key switching, error recovery, and troubleshooting
- Smart Error Handling - Automatic detection and user-friendly recovery options
- Personalized Stories - Uses your friends' personalities and memories
- Relatable Analogies - Creates authentic scenarios with friend involvement
- Character-Driven Education - Friends become teachers in your stories
- Emotional Connection - Makes learning memorable through relationships
- Flat Color System - Clean iOS colors without gradients for modern aesthetic
- Glassmorphism UI - Frosted glass effects with backdrop blur on main container
- SF Pro Typography - Apple's signature font family
- iOS Color Palette - Native blue, green, orange, and red flat colors
- Smooth Animations - 0.3s ease transitions with hover effects
- Touch-Optimized - 32px+ tap targets for mobile interaction
- Responsive Design - Seamless experience across all devices
- Modal System - Professional overlay interactions for API management
- Local Storage - API keys stored securely in browser
- No Data Collection - Your conversations stay private
- Transparent Usage - Clear API key requirements and usage
- Key Management - Easy switching, removal, and troubleshooting tools
- Error Recovery - Graceful handling of API issues with user guidance
Experience the full AI-powered learning with your own OpenRouter API key!
- Visit OpenRouter.ai - Universal AI API platform
- Create Account - Sign up for free (no credit card required initially)
- Generate API Key - Create a new API key in your dashboard
- Add to App - Enter your key in the app's secure form
- Start Learning - Generate unlimited personalized educational stories!
- ๐ Free credits to get started
- ๐ง Qwen-2.5-72B - One of the most advanced AI models
- ๐ Academic Focus - Excellent for educational content
- ๐ Multilingual - Supports learning in multiple languages
- โก Fast Response - Optimized for real-time learning experiences
- React 18 - Modern hooks-based architecture
- CDN Deployment - Bypass build issues with direct React loading
- Babel Standalone - Real-time JSX transpilation
- CSS3 - Advanced animations and glassmorphism effects
- OpenRouter API - Universal AI model access
- Qwen-2.5-72B-Instruct - Advanced language understanding
- Structured Prompting - Educational format optimization
- Error Handling - Graceful fallbacks and user feedback
- Apple Human Interface - Following iOS design principles
- Responsive Grid - CSS Grid with auto-fit columns
- Variable Fonts - SF Pro Display with proper letter spacing
- Color Science - Accessible contrast ratios and semantic colors
/* Core Design Principles */
- Flat Colors: Pure iOS colors (#007AFF, #30D158, #FF9500, #FF3B30)
- Glassmorphism: backdrop-filter: blur(20px) on main container
- Typography: -apple-system, BlinkMacSystemFont, 'SF Pro Display'
- Spacing: Generous padding (2.5rem, 3rem) for breathing room
- Corners: Consistent 12px-20px border radius
- Shadows: Layered shadows for depth (0 10px 40px + 0 1px 3px)
- Performance: No gradients for faster rendering- Hover States - Subtle lifts and shadow expansion
- Focus States - Blue glow rings for accessibility
- Loading States - Engaging animations during AI processing
- Touch Feedback - Immediate visual response to interactions
- Modern web browser (Chrome, Safari, Firefox, Edge)
- OpenRouter API key for AI features
- Internet connection for CDN resources
-
Clone the repository
git clone https://github.com/smdhussain06/AttiTutor.git cd AttiTutor -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173
- Direct HTML serving from main branch
- No build process required
- CDN-based React loading
# For traditional build deployment
npm run build
npm run previewThe app uses advanced prompt engineering for optimal learning:
๐ Official Definition: [Academic-grade definition]
๐ฏ Simple Explanation: [5th grade breakdown]
๐ Step-by-Step Concepts: [Logical building blocks]
๐ฅ Friend Story: [Personalized narrative]
๐ง Memory Hooks: [Recall techniques]
โ
Quick Recap: [Reinforcement summary]
- 2000 token limit for comprehensive responses
- Temperature 0.7 for creative yet focused content
- Structured formatting with markdown and emojis
- Error handling with meaningful user feedback
- Open the app and enter your OpenRouter API key
- Key is securely stored in browser localStorage
- No server-side storage or data collection
- Use API Info button to check connection status
- Change Key anytime if needed or experiencing issues
- Click "+ Add Friend" to add learning companions
- Enter friend's name and a memorable trait/personality
- Friends become characters in your educational stories
- Enter any topic you want to learn about
- Click "Create My Learning Story! ๐"
- Receive a comprehensive, personalized explanation
- โน๏ธ API Info - View connection status, key details, and troubleshooting tips
- ๐ Change Key - Switch API keys easily without losing progress
- ๐จ Error Recovery - Automatic detection of API issues with recovery options
- ๐๏ธ Remove Key - Start fresh with a new API key
- ๐ Status Display - Visual indicators for API health and connection state
Topic: "Photosynthesis"
Friends:
- Alex (loves gardening)
- Sam (always asks why things work)
Result: A detailed story where Alex and Sam discover
photosynthesis in Alex's garden, complete with:
- University-level definition
- Simple analogies
- Step-by-step process
- Memorable phrases with emojis
- Real-world connections
- Narrative Learning - Stories improve retention by 65%
- Social Context - Friend involvement increases engagement
- Multi-Modal - Visual (emojis) + textual learning
- Scaffolded Difficulty - 5th grade โ Academic progression
- Active Recall - Memory hooks promote long-term retention
- University Preparation - Anna University style definitions
- Concept Clarification - Breaking down complex topics
- Exam Preparation - Memorable formats for recall
- Cross-Subject Learning - Works for any academic field
- Voice Integration - Text-to-speech for stories
- Visual Learning - AI-generated diagrams and illustrations
- Study Groups - Share friends and stories with classmates
- Progress Tracking - Learning analytics and achievement system
- Offline Mode - Cached stories for offline review
- API Provider Options - Support for multiple AI providers
- Advanced Error Recovery - Automatic retry and fallback systems
- Multi-Language - Learn in your preferred language
- Difficulty Adaptation - AI adjusts complexity based on feedback
- Knowledge Graphs - Connect related topics automatically
- Export Options - PDF, flashcards, and study guides
We welcome contributions to make learning more accessible and engaging!
# Fork and clone
git clone https://github.com/yourusername/AttiTutor.git
cd AttiTutor
# Create feature branch
git checkout -b feature/amazing-feature
# Make changes and test locally
npm run dev
# Commit with conventional commits
git commit -m "feat: add amazing new feature"
# Push and create PR
git push origin feature/amazing-feature- UI/UX improvements
- Educational prompt optimization
- Performance enhancements
- Accessibility improvements
- Mobile experience refinements
- API management and error handling
- New AI provider integrations
This project is licensed under the MIT License - see the LICENSE file for details.
- Apple Inc. - Design inspiration from iOS and macOS
- OpenRouter - Universal AI API platform
- Alibaba DAMO - Qwen AI model development
- Educational Research - Learning science principles integration
- Open Source Community - React, Vite, and web technologies
Made with โค๏ธ for transforming education through friendship and AI
"The best way to learn is through stories, and the best stories involve the people we care about." - Atti Tutor Philosophy