Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Chatbot to Teach Spanish

## APPLICATION OVERVIEW
This project involves creating a web application designed as a chatbot that helps students practice Spanish. The application will engage users in interactive conversations, quizzes, and language exercises to enhance their language skills in a fun and effective way.

## CORE FEATURES
1. **Interactive Chatbot**: A user-friendly chatbot interface where students can have conversations in Spanish, receive instant feedback, and learn vocabulary and grammar.
2. **Language Exercises**: A variety of exercises and quizzes that test users' knowledge of Spanish, including fill-in-the-blank, multiple-choice questions, and speaking prompts.
3. **Progress Tracking**: A dashboard that allows students to track their learning progress, view completed exercises, and receive personalized recommendations based on their performance.
4. **User Accounts**: Secure authentication for users to create accounts, save their progress, and revisit previous sessions.
5. **Feedback System**: An integrated feedback mechanism where users can rate their experience and suggest improvements to the chatbot’s responses.
6. **Resource Library**: Access to additional learning resources, such as articles, videos, and vocabulary lists, tailored to different proficiency levels.

## 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 will consist of a header with navigation, a central chatbot interface, a sidebar for exercises and resources, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing user states and progress)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Design the Layout**: Create the main components for the header, chatbot interface, exercise section, and footer using Tailwind CSS for styling.
3. **Build the Chatbot**: Implement the chatbot logic using a state management library to handle user input and responses.
4. **Create User Authentication**: Set up user registration and login functionality with secure authentication.
5. **Implement Language Exercises**: Develop the exercise components that fetch questions and provide instant feedback.
6. **Design the Progress Dashboard**: Create a user-friendly dashboard to display users' progress and suggestions for improvement.
7. **Feedback System**: Integrate a feedback form to collect user experiences and suggestions.
8. **Testing and Deployment**: Conduct thorough testing of the application, focusing on user experience, and deploy the application to a hosting service.

## USER EXPERIENCE
The application will provide an intuitive user experience where students can easily interact with the chatbot. Users will start by logging in or creating an account, after which they will be greeted by the chatbot. As they engage in conversations, they will receive instant feedback and can seamlessly transition to exercises. The dashboard will allow users to monitor their progress and access additional resources, ensuring a comprehensive learning experience. Responsive design principles will ensure the application functions well on both desktop and mobile devices, accommodating various user preferences.