Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Quest Arena is a comprehensive web application designed to gamify educational tasks, allowing students, teachers, and schools to engage in a competitive learning environment. The app features personalized dashboards for each user type, facilitating progress tracking, challenges, and interactive quizzes that enhance educational outcomes.

## CORE FEATURES
1. **User Authentication**: Secure login and registration for students, teachers, schools, and administrators, including social login options.
2. **User Dashboards**: Personalized dashboards for students, teachers, and schools showcasing relevant metrics, progress, and insights.
3. **Arena Screen**: A central hub where users can view their scores, participate in solo quests or PvP duels, and join competitions using unique codes.
4. **Leaderboard**: A ranking system displaying students' points, filterable by class, subject, year, and school.
5. **Match Configuration**: Options for users to set up quizzes, choosing between solo or duel formats, and customizing question types and time limits.
6. **Individual and Duel Matches**: Real-time game screens displaying questions, answers, and scores, along with detailed results and corrections after each match.

## 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 main layout structure consists of a sidebar for navigation, a main content area for user interactions, and a footer with additional links and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context or Redux as needed for managing global state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and TypeScript. Install Tailwind CSS and set up the shadcn/ui components.
2. **Design Authentication Flow**: Implement user authentication using Supabase Auth, including registration, login, password recovery, and social login options.
3. **Create User Dashboard**: Develop separate dashboard components for students, teachers, and schools, pulling data from Supabase.
4. **Build Arena Screen**: Design the arena interface where users can initiate quests or duels, and display their scores and progress.
5. **Implement Leaderboard**: Create a ranking component that retrieves and displays user scores with filtering options.
6. **Design Match Configuration**: Develop a settings screen for users to configure quiz parameters before starting a match.
7. **Create Match Screens**: Implement the individual match and duel match interfaces, ensuring real-time updates and score tracking.
8. **Test and Iterate**: Conduct thorough testing for usability, performance, and bug fixes. Gather feedback from potential users and iterate on the design.

## USER EXPERIENCE
Users will have an intuitive experience starting from the registration or login process, leading to their personalized dashboards. They can easily navigate to the arena to challenge themselves or others, configure matches, and engage with the leaderboard. Each interaction will be designed to be responsive and visually engaging, ensuring that users feel immersed in a competitive yet supportive learning environment.