Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application, named **VocabMaster**, is a web-based learning platform designed to enhance vocabulary acquisition through interactive learning methods such as flashcards, quizzes, and AI-generated exercises. The platform provides a user-friendly experience for learners of all ages, integrating a minimalist design that promotes focus and ease of navigation.

## CORE FEATURES
1. **User Authentication**: Secure login and registration system allowing users to create accounts with usernames, emails, and passwords. Integration with Google login for convenience.
   
2. **Vocabulary Sets**: Users can create, manage, and delete custom vocabulary sets. Each set can contain words with definitions and progress tracking.

3. **Learning Modes**: Multiple learning modes including adaptive learning, flashcards, and quizzes to suit different learning preferences.

4. **AI-Powered Exercises**: Generate personalized practice tests based on user-selected topics and difficulty levels, providing a tailored learning experience.

5. **Token System**: Virtual currency system where users earn tokens for completing tasks, which can be used to unlock premium features or additional exercises.

6. **Responsive Design**: Fully responsive layout that adapts seamlessly to different screen sizes, ensuring accessibility on both mobile and desktop devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean, simple interface that utilizes ample white space and a limited color palette for clarity and focus on content.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: 
  - A top navigation bar for easy access to core features (home, contact, store).
  - A central dashboard area displaying user progress, vocabulary sets, and learning modes.
  - Sidebar for quick navigation between different sections of the application.
- **Typography**: 
  - Primary font: **Inter** or **Roboto** for a modern, legible text.
  - Font sizes: 
    - Headings (h1, h2, h3): bold and larger sizes for visual hierarchy.
    - Body text: regular weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and scalable application structure.
- **Styling**: Tailwind CSS for utility-first styling approach, enabling rapid UI development.
- **UI Components**: Utilize **shadcn/ui** for pre-built components that align with the minimalist design philosophy.
- **State Management**: Use React's Context API or Zustand for global state management to handle user authentication and vocabulary sets.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it with PostCSS.
   - Set up shadcn/ui components.

2. **Create Authentication System**:
   - Implement user registration and login forms using controlled components.
   - Integrate Firebase or a similar service for user authentication.
   - Create local storage handling for user sessions.

3. **Design the Dashboard**:
   - Build a central dashboard displaying user statistics and vocabulary sets.
   - Use Tailwind CSS for responsive layouts.
   - Implement components for creating, editing, and deleting vocabulary sets.

4. **Develop Learning Modes**:
   - Create components for different learning modes (flashcards, quizzes).
   - Implement logic for tracking user progress and displaying feedback.
   - Integrate AI-generated exercises utilizing an external API or service.

5. **Implement Token System**:
   - Create a state management structure to handle token transactions.
   - Design UI components for displaying token balance and purchasing premium features.

6. **Testing and Deployment**:
   - Conduct thorough testing across various devices and browsers.
   - Deploy the application using platforms like Vercel or Netlify.

## USER EXPERIENCE
The application emphasizes intuitive navigation with a clean layout that minimizes distractions. Users will start by creating an account or logging in. Upon entering the dashboard, they will see their progress and options to create new vocabulary sets or engage in learning modes. Each learning mode will provide interactive feedback, encouraging users to improve and track their learning effectively. The use of a token system will gamify the experience, motivating users to engage more with the platform. 

This design and implementation plan ensures that **VocabMaster** meets user expectations while providing a robust learning experience.