| |
| |
|
|
| --- |
| |
| |
|
|
| 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. |
