Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves building a modern AI-powered student learning dashboard web application designed for two user roles: students and teachers. The application aims to provide a clean and efficient interface for tracking learning progress, analytics, and personalized feedback, ensuring an engaging and effective learning experience.

## CORE FEATURES
1. **Student Dashboard**: Displays an overall Learning Score (0-100) alongside five dimensions of learning: Engagement, Completion, Mastery, Consistency, and Improvement, each with scores, trends, and visual progress bars.
2. **Weekly Learning Analytics**: Provides insights into student performance and progress over the week.
3. **AI-Generated Personalized Feedback**: Offers tailored feedback to students based on their performance and learning patterns.
4. **Teacher Dashboard**: Lists all students, highlights at-risk individuals, shows learning trends, and alerts for low engagement.
5. **Learning Streak System**: Encourages consistent learning by tracking continuous engagement.
6. **Analytics Page**: Displays detailed performance analytics for students, allowing teachers to make data-driven decisions.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The application will feature a responsive layout with a sidebar for navigation on dashboards and a clean header section. Each page will prioritize content visibility and ease of navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or any preferred state management library)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project using Create React App with TypeScript.
2. **Install dependencies**: Add Tailwind CSS, shadcn/ui, and Redux for state management.
3. **Set up the database**: Use Supabase to create a database for storing user data, scores, and learning records.
4. **Design the components**: Create reusable components for the dashboard, including cards for dimensions, progress bars, and analytics views.
5. **Implement user authentication**: Build a login page allowing students and teachers to access their respective dashboards.
6. **Develop the dashboards**: Implement student and teacher dashboards, integrating AI features for feedback and analytics.
7. **Ensure mobile responsiveness**: Use Tailwind CSS utilities to make the app layout responsive across devices.
8. **Test the application**: Conduct thorough testing to ensure functionality and user experience align with the requirements.

## USER EXPERIENCE
The user experience focuses on intuitive navigation and minimalistic design. Students will easily access their learning metrics and receive suggestions for improvement. Teachers will have quick access to student performance data, enabling proactive interventions. The application will prioritize user engagement through visual feedback and an organized layout, ensuring a seamless experience across all devices.