|
|
|
|
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• **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 |
|
|
|
|
|
|
|
|
• 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, |
|
|
• Warning/Alert: Soft orange (#F59E0B) |
|
|
• Background gradients with subtle animations |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• **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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• 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 |
|
|
|
|
|
|
|
|
• Two-column layouts where appropriate |
|
|
• Expanded sidebar navigation |
|
|
• Larger content areas for better readability |
|
|
• Split-screen capability for multitasking |
|
|
|
|
|
|
|
|
• Full sidebar navigation |
|
|
• Multi-column dashboard layout |
|
|
• Hover effects and advanced interactions |
|
|
• Keyboard shortcuts for power users |
|
|
• Picture-in-picture video support |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• High contrast color options |
|
|
• Keyboard navigation support |
|
|
• Screen reader compatibility |
|
|
• Adjustable font sizes |
|
|
• Alternative text for images |
|
|
• Focus indicators for interactive elements |
|
|
|
|
|
|
|
|
• Multi-language support preparation |
|
|
• Indian educational context awareness |
|
|
• Diverse representation in imagery |
|
|
• Regional festival and holiday acknowledgments |
|
|
• Flexible learning schedule accommodations |
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
**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. |
