Create Edor

Edor

@@ -0,0 +1,236 @@
+# COMPREHENSIVE APP DEVELOPMENT PROMPT
+## AI-Enhanced Personalized Tutoring Platform
+
+---
+
+## PROJECT OVERVIEW
+
+Create a modern, interactive mobile-responsive web application for an AI-enhanced personalized tutoring platform targeting Indian students (Classes 9-12). The app should seamlessly blend AI-powered 24/7 learning support with human tutor interactions, featuring an engaging, youthful design that appeals to diverse student demographics across different academic boards and learning preferences.
+
+---
+
+## CORE FUNCTIONALITY REQUIREMENTS
+
+### User Authentication & Onboarding
+• Multi-role login system (Student, Parent, Tutor, Admin)
+• Social login options (Google, Phone OTP)
+• Interactive onboarding wizard with academic profile setup
+• Grade selection (9th, 10th, 11th, 12th) and board selection (CBSE, ICSE, State boards)
+• Subject preferences and learning goals configuration
+• Personalized dashboard generation based on user profile
+
+### AI-Powered Learning Assistant
+• 24/7 AI chatbot with subject-specific knowledge bases
+• Voice and text input for doubt resolution
+• Step-by-step problem solving with visual explanations
+• Smart study recommendations based on learning patterns
+• Progress tracking with AI-generated insights
+• Gamified learning streaks and achievement badges
+
+### Human Tutor Integration
+• Tutor discovery and booking system with availability calendar
+• Video calling integration for live sessions
+• Session recording and playback functionality
+• Homework submission and review system
+• Real-time whiteboard collaboration tools
+• Session feedback and rating system
+
+### Learning Management Features
+• Personalized study plans with milestone tracking
+• Interactive practice tests and mock exams
+• Performance analytics with detailed progress reports
+• Study material library (PDFs, videos, notes)
+• Doubt history and resolution tracking
+• Parent progress sharing dashboard
+
+---
+
+## DESIGN SPECIFICATIONS
+
+### Visual Design Philosophy
+• **Modern & Youthful**: Clean, contemporary interface with vibrant yet professional color schemes
+• **Inclusive Design**: Appealing to both male and female students across different cultural backgrounds
+• **Academic Focused**: Professional enough for serious study while maintaining engaging visual elements
+• **Mobile-First**: Responsive design optimized for smartphones and tablets
+
+### Color Palette & Branding
+• Primary: Deep blue (#1E3A8A) - trust and professionalism
+• Secondary: Vibrant purple (#7C3AED) - creativity and innovation
+• Accent: Bright green (#10B981) - growth and success
+• Neutral: Warm grays (#F3F4F6, #6B7280) - balance and readability
+• Warning/Alert: Soft orange (#F59E0B)
+• Background gradients with subtle animations
+
+### Typography & Icons
+• Clean, readable fonts (Inter or Poppins)
+• Varied font weights for hierarchy
+• Lucide React icons for consistency
+• Subject-specific iconography (math symbols, science beakers, etc.)
+• Emojis for gamification elements
+
+### Layout & Navigation
+• Bottom navigation for mobile optimization
+• Collapsible sidebar for desktop
+• Card-based content organization
+• Smooth transitions and micro-animations
+• Floating action buttons for quick access
+• Breadcrumb navigation for complex flows
+
+---
+
+## USER INTERFACE COMPONENTS
+
+### Dashboard Components
+• Welcome banner with personalized greeting and daily goals
+• Quick action cards (Ask AI, Book Session, Practice Test)
+• Progress visualization with animated charts
+• Recent activity feed
+• Upcoming sessions and deadline reminders
+• Achievement showcase area
+
+### AI Chat Interface
+• Modern chat bubble design with typing indicators
+• Mathematical equation rendering support
+• Code syntax highlighting for programming subjects
+• Voice message support with waveform visualization
+• Image upload for problem-solving
+• Quick action buttons for common queries
+
+### Session Management
+• Calendar view with intuitive booking interface
+• Tutor profile cards with ratings and specializations
+• Video call interface with screen sharing capabilities
+• Interactive whiteboard with drawing tools
+• Session timer and break notifications
+• Post-session feedback forms
+
+### Learning Analytics
+• Interactive progress charts and graphs
+• Subject-wise performance breakdowns
+• Time spent tracking with visual representations
+• Strength and weakness analysis
+• Goal completion tracking
+• Comparative performance metrics
+
+---
+
+## TECHNICAL IMPLEMENTATION
+
+### Technology Stack
+• **Frontend**: React with TypeScript
+• **Styling**: Tailwind CSS for responsive design
+• **Icons**: Lucide React icon library
+• **Charts**: Recharts for data visualization
+• **State Management**: React hooks (useState, useEffect)
+• **Animations**: CSS transitions and transforms
+• **Responsive**: Mobile-first design principles
+
+### Key Features to Implement
+• Real-time AI chat with typing indicators
+• Interactive calendar for session booking
+• Progress tracking with animated charts
+• File upload and preview capabilities
+• Search functionality across all content
+• Notification system for updates and reminders
+• Dark/light mode toggle for user preference
+
+### Data Management
+• Student profile with academic information
+• Learning history and progress tracking
+• Session data and recordings management
+• AI interaction logs and preferences
+• Performance metrics and analytics
+• Tutor ratings and feedback system
+
+---
+
+## USER EXPERIENCE FLOW
+
+### Student Journey
+1. **Landing**: Eye-catching hero section with clear value proposition
+2. **Registration**: Quick 3-step onboarding with profile customization
+3. **Dashboard**: Personalized learning hub with immediate action options
+4. **AI Interaction**: Seamless chat experience with instant responses
+5. **Session Booking**: Intuitive tutor selection and scheduling
+6. **Learning**: Interactive content consumption with progress tracking
+7. **Assessment**: Engaging quizzes and tests with immediate feedback
+
+### Engagement Elements
+• Daily login streaks with rewards
+• Achievement badges for milestones
+• Leaderboards for friendly competition
+• Study buddy matching system
+• Progress sharing with parents/friends
+• Celebration animations for accomplishments
+
+---
+
+## RESPONSIVE DESIGN REQUIREMENTS
+
+### Mobile Optimization (320px - 768px)
+• Touch-friendly button sizes (minimum 44px)
+• Swipe gestures for navigation
+• Collapsible menus and sections
+• Optimized chat interface for one-handed use
+• Quick access floating action buttons
+
+### Tablet Optimization (768px - 1024px)
+• Two-column layouts where appropriate
+• Expanded sidebar navigation
+• Larger content areas for better readability
+• Split-screen capability for multitasking
+
+### Desktop Optimization (1024px+)
+• Full sidebar navigation
+• Multi-column dashboard layout
+• Hover effects and advanced interactions
+• Keyboard shortcuts for power users
+• Picture-in-picture video support
+
+---
+
+## ACCESSIBILITY & INCLUSIVITY
+
+### Accessibility Features
+• High contrast color options
+• Keyboard navigation support
+• Screen reader compatibility 
+• Adjustable font sizes
+• Alternative text for images
+• Focus indicators for interactive elements
+
+### Cultural Sensitivity
+• Multi-language support preparation
+• Indian educational context awareness
+• Diverse representation in imagery
+• Regional festival and holiday acknowledgments
+• Flexible learning schedule accommodations
+
+---
+
+## IMPLEMENTATION PROMPT
+
+**Create a comprehensive React web application that serves as an AI-enhanced personalized tutoring platform. The app should feature:**
+
+• A modern, student-friendly interface with vibrant colors and engaging animations
+• Complete user authentication system with role-based access
+• AI chatbot integration for 24/7 doubt resolution with mathematical rendering
+• Tutor booking system with calendar integration and video calling interface
+• Comprehensive dashboard with progress tracking and analytics
+• Interactive learning modules with gamification elements
+• Responsive design optimized for mobile, tablet, and desktop
+• Real-time notifications and updates system
+• File upload capabilities for homework and assignments
+• Parent dashboard for progress monitoring
+
+**The app should be built using React, Tailwind CSS, and Lucide React icons, ensuring smooth animations, intuitive navigation, and a professional yet youthful aesthetic that appeals to Indian students across Classes 9-12. Focus on creating an engaging user experience that encourages daily usage and learning consistency.**
+
+**Priority Features for MVP:**
+1. User registration and profile setup
+2. AI chat interface with subject selection
+3. Basic dashboard with progress visualization
+4. Tutor discovery and booking system
+5. Session management and history
+6. Mobile-responsive design with smooth interactions
+
+Create this as a single-file HTML application with embedded JavaScript and CSS, ensuring it's fully functional and visually appealing from the start.